专栏卷首语

 

漂亮得不像实力派

袋鼠云数据可视化大屏技术解密

袋鼠云数据可视化大屏团队拥有业内领先的数据可视化大屏故事策划、视觉设计、前端和数据开发技术实力，尤其擅长3D模型展示、基于GIS的地理信息数据展示。

目前已经为天津津南区政府、杭州互联网法院、金华市防汛防旱指挥部、浙江大学、中航金网、中国石油、南方电网、湖南国家电网、京东方等50多家政府单位或行业Top级客户提供服务，设计开发交付近100张酷炫数据可视化大屏，多次收到客户好评。2018年9月，袋鼠云数据可视化团队获得飞凤数创2018全球物联网数据创新大赛“最佳设计奖”。

《漂亮得不像实力派——袋鼠云数据可视化大屏技术解密》专栏，将和大家分享大屏背后的专业知识，一起欣赏数据可视化的颜值与内在。

对袋鼠云数据可视化大屏感兴趣的用户或合作伙伴，欢迎拨打400-002-1024，一起有颜值有实力！

第五期

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

图1

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

图2

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

图3

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

图4

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

图5

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

图6

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

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

 

 

 前注意过程有什么用 

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

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

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

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

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

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

 

●举个例子

重复使用相同的图表表达，但不同部分强调不同的问题或同一个问题的不同方面。这是前注意过程的有效策略。首先让受众熟悉数据和图表，然后再进行说明。下图中产品优势的6个特性正式使用了这种重复策略。

明亮的蓝色通常会比柔和的蓝色吸引更多的注意。而两者都会比浅灰色吸引更多的注意。因此用浅灰色将必要但不影响信息传递的元素淡化到背景中，减少对受众注意力的竞争，使受众能够更简单、更快速地消化我们提供的信息。文字的描述是这种颜色改变策略的实践。

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

 

 实用策略 

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

 

01

大小

 

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

 

02

颜色

 

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

少量使用

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

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

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

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

一致性

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

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

考虑色觉障碍者

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

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

正常人眼中的颜色

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

03

页面位置

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

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

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

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

 

 案例分析 

 

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

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

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

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

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

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

 

 

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

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

如果你有什么感兴趣或有疑问的地方，欢迎留言，或直接联系400-002-1024咨询。

 

参考资料

1.Cole K.(2017) 《用数据讲故事》，第一版，北京：人民邮电出版社

2.Bob R. Noam R. & Simon G.(2018) The viridis color palettes, https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html

3.Bernie J.(2020) Color Oracle, https://colororacle.org

 

关于作者

无形

袋鼠云数据可视化大屏团队

数据可视化专家、当家男主播

一个“误”入大数据行业的曾经媒体人，《漂亮得不像实力派》、《用数据可视化讲述中国好故事》专栏主笔。