掌握这3个策略,轻松提升数据信息传达效率

  1. 云栖社区>
  2. 袋鼠云技术团队>
  3. 博客>
  4. 正文

掌握这3个策略,轻松提升数据信息传达效率

袋鼠云 2020-03-26 10:15:32 浏览521
展开阅读全文

在阅读正文之前,先请大家一起来玩个游戏。下面这些图,看看大家第一眼看到的是什么?
11
图1,不同大小的圆,你的眼睛是否立刻被那个小圆吸引?
22
图2,不同方向的线段,你的眼睛是否停留在了那个倾斜的线段?
33
图3,不同颜色的圆,你的眼睛是否马上识别出来灰色的圆圈?
44
图4,不同形状,你的眼睛是否首先注意到的是那个正方形?
55
图5,不同透明度,你的眼睛是否最先注意到那个透明了的线段?
66
不同的标记、位置、长度、粗细、动作下,你的眼睛都会被那个与众不同的东西给抓住,最先意识到它的不一样。

当眼睛扫过上述这些内容时,你的视线会被每组中唯一的一个与众不同的元素所吸引,你根本不需要任何有意识的思考就会被它吸引到。这正是因为我们的大脑天生能快速找出环境中的差异,这是一个认知心理学概念——前注意过程(Pre-attentive processing)

前注意过程有什么用

当有策略地使用前注意过程,就能够让受众的注意力引导至你期望的地方,不知不觉地看到我们期望展现的内容。

此外根据不同前注意过程对注意力的吸引强弱,可以建立视觉层次,按你希望的方式和顺序引导受众处理信息。

划重点,前注意过程两个作用:
第一,引导受众注意到特定位置。
第二,建立视觉层次,引导受众按你的顺序阅读。

因此利用前注意过程所建立的视觉层次可以为受众提供隐式的指示,引导他们处理信息,我们可以标记什么是最重要的,他们应该最先关注,什么是次重要的,接下来应该关注的。

举个例子,
重复使用相同的图表表达,但不同部分强调不同的问题或同一个问题的不同方面。这是前注意过程的有效策略。首先让受众熟悉数据和图表,然后再进行说明。下图中产品优势的6个特性正式使用了这种重复策略。
明亮的蓝色通常会比柔和的蓝色吸引更多的注意。而两者都会比浅灰色吸引更多的注意。因此用浅灰色将必要但不影响信息传递的元素淡化到背景中,减少对受众注意力的竞争,使受众能够更简单、更快速地消化我们提供的信息。文字的描述是这种颜色改变策略的实践。
一些特殊的标签、形状、按钮、则充当了“看这里”的信号,更快地将手中的注意力吸引到那里。柔和的蓝色“联系我们”按钮,在不喧宾夺主的前提下,最终吸引了受众的注意,呼唤他们的点击操作。
77

实用策略

讲了这么多,相信大家对前注意过程有了一定的了解。下面就讨论三个好用的前注意过程策略,对大小、颜色和空间位置的使用,大家可以尝试着把它用于日常汇报的ppt、可视化大屏等等需要数据可视化表达的场景中来。

1.大小

很简单,就一句话:当几个数据重要性相同时,请使用相同的大小。相反,如果有一件事尤其重要,那么大小可以用来体现,毫无犹豫的将它放大吧。
88

2.颜色

颜色是吸引受众注意的最强大工具,但请克制为了丰富多彩而使用颜色的冲动,对颜色的使用建议遵循以下原则:

  • 少量使用

只有少量使用颜色才能确保有效性,种类太多会导致没有哪一种是足够突出的,前注意过程消失,一切都不同,不但不能突出其中的某些内容,而且会令人分心。

视线在高饱和度的颜色上探索却不知重点,使用单一颜色的不同饱和度会是一个更好的选择,使用了同一个颜色,我们更容易看到其不同饱和度下代表的量化假设。

下面的图,明显左图会更容易看到不同省份的热力的变化程度。

99

一般来说,人眼难以区分出七种以上的颜色,除非颜色直接反映数据中的值,否则请将类保持在七个以下。

  • 一致性

尽可能避免将集中颜色用于别的目的。不要改变颜色使用,否则会让受众感到困扰。设想下此前你使用红色代表警告,却在后续图表中用红色代表赞扬。

不要改变颜色使用,会让用户困惑。当然如果你希望表达主题或者语气的明显变化,颜色切换是利器。

  • 考虑色觉障碍者

8%的男性和0.5%的女性是色盲患者,更有大类色弱患者。通常他们难以区分红色和绿色,所以可以考虑加粗、不同的饱和度或亮度,以及在数字前添加正负号等方法确保突出两个数字。后面我们也会有专门的专题讨论如何为色觉障碍者进行设计。

这里先给推荐一个开源软件——Color Oracle,在设计的过程中能够模拟各种类型的色盲来辅助选择合适的颜色。

1212
正常人眼中的颜色
1313
红色色盲和绿色色盲人眼中的世界

3.页面位置

还记得前面一篇文章里我们讲的之字形视线吗?

大部分人习惯性的从左上角开始阅读,哪怕其他视觉线索尝试鼓励去做有想法的事情,还是会不自觉的从左上角开始读起。因此请注意你页面元素的摆放位置,让受众感到自然并且留意到你最希望受众看到的内容,把重要的内容放在左上角的部分。

有趣的是,你可以多留意留意纸质的报纸,基本都遵循了这样的规则。我们先看到的肯定是人民日报这几个字,然后再是头条、头图等等。

1010

当然如果为了使版面不要有那么强的整体感和紧张,也可以打破这种“左上到右下”的排版规则,缓解这种拘束感。

案例分析

1111

最后,拿一个Easy[V]平台中的模板和大家再总结下本文讲的前注意过程。

在看上方这个可视化大屏的时候,大概率你的视线移动过程是“标题-中心地图-左侧图表-右侧图表”,其中有动态的部分又会比静态图表更容易被看到,页面位置和大小的前注意过程策略造成了这样的顺序。

整个页面以蓝紫色为主要配色,但黄色飞线会非常抓人眼球,在第一时间让你了解从北京与各地的联系。

不同比例占比的饼图,通过动态的突出动画,能快速的让你了解各系列数据的分布情况。

时序的折线变化动画,让你注意到不同系列的变化趋势。

排名标题轮播,增加了页面动感的同时也在向你传达top10的具体情况。

所有的好设计其实都是专业思考的过程的反映。通过前注意过程,潜移默化地引导你的阅读顺序,强调重点的内容。好的可视化大屏,是艺术更是科学,细微的变动可能完全影响数据信息的传达。

袋鼠云可视化团队希望提供一些基本知识,从如何选择合适的图表到如何创造一个好的故事,让你在数据沟通上胜人一筹。

网友评论

登录后评论
0/500
评论
袋鼠云
+ 关注
所属团队号: 袋鼠云技术团队