漂亮得不像实力派 | 掌握这3个策略，轻松提升数据信息传达效率

在阅读正文之前，先请大家一起来玩个游戏。下面这些图，看看大家第一眼看到的是什么？

不同大小的圆，你的眼睛是否立刻被那个小圆吸引？

不同方向的线段，你的眼睛是否停留在了那个倾斜的线段？

不同颜色的圆，你的眼睛是否马上识别出来灰色的圆圈？

不同形状，你的眼睛是否首先注意到的是那个正方形？

不同透明度，你的眼睛是否最先注意到那个透明了的线段？

不同的标记、位置、长度、粗细、动作下，你的眼睛都会被那个与众不同的东西给抓住，最先意识到它的不一样。

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

 

| 前注意过程有什么用

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

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

 

划重点，前注意过程两个作用：

第一，引导受众注意到特定位置。

第二，建立视觉层次，引导受众按你的顺序阅读。

 

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

 

举个例子，

重复使用相同的图表表达，但不同部分强调不同的问题或同一个问题的不同方面。这是前注意过程的有效策略。首先让受众熟悉数据和图表，然后再进行说明。下图中产品优势的6个特性正式使用了这种重复策略。
明亮的蓝色通常会比柔和的蓝色吸引更多的注意。而两者都会比浅灰色吸引更多的注意。因此用浅灰色将必要但不影响信息传递的元素淡化到背景中，减少对受众注意力的竞争，使受众能够更简单、更快速地消化我们提供的信息。文字的描述是这种颜色改变策略的实践。

一些特殊的标签、形状、按钮、则充当了“看这里”的信号，更快地将手中的注意力吸引到那里。柔和的蓝色“联系我们”按钮，在不喧宾夺主的前提下，最终吸引了受众的注意，呼唤他们的点击操作。

 

| 实用策略

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

1.大小

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

2.颜色

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

• 少量使用

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

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

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

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

• 一致性

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

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

• 考虑色觉障碍者

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

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

正常人眼中的颜色

红色色盲和绿色色盲人眼中的世界

3.页面位置

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

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

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

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

 

| 案例分析

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

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

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

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

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

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

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

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