数据可视化10大年夜案例分析

数据可视化一贯处于大热的状态，已成为互联网产品的基本配置。
它用于各种行业，从商业智能到信息传达，帮助用户更好的理解数据背后的故事。

我们的大脑长于处理可视化信息，这使我们更随意马虎理解图表或图形中可视化的数据，而不是表格和电子表格中列出的数据。
一个伟大的数据可视化该当利用人类视觉系统的上风来呈现数据，以便数据被接管和理解。
它该当考虑用户对视觉处理的理解，提高并简化用户的数据体验。

目前有很多工具和框架可用于构建数据可视化图形，本日我们一起回归可视化设计的根本，理解是什么让数据可视化有效？在设计数据时我们该当遵照哪些辅导原则？

以下 10 个要点和实践案例将帮助你进行思考，完成丰富、有洞察力的数据体验。

一、为特定受众设计

可视化以视觉表现形式，将信息以概要形式抽提出来，供应高下文并描述数据中的关系。
虽然设计师对给定的一组数据集中的模式和关系没有任何影响，但他可以根据用户的需求选择显示哪些数据以及供应若何的语境。
毕竟，就像其他产品一样，如果用户无法利用它，那么可视化就毫无意义。

为新手用户设计的可视化产品该当是构造化的、明确的和有吸引力的。
他们该当用笔墨直接解释受众该当从数据中得到什么。

转换双亲的事情韶光：妈妈 VS 爸爸

来源：https://flowingdata.com/2016/04/20/parent-work-hours/

另一方面，面向专家用户的可视化产品可以显示更风雅的数据视图，以驱动用户探索和创造。
细节和数据密度该当大略明了。

事情来来往往：国民失落业情形

来源：http://graphics.wsj.com/job-market-tracker/

二、利用交互促进探索（但不要依赖）

《纽约时报》网站上只有 10 – 15％ 参与可视化交互的用户实际点击了按钮。
《纽约时报》的图形团队制作了一些业内最好的可视化作品，但险些没有人与这些作品互动。

这表明，在可视化设计中，我们不能依赖交互操作帮助用户建立理解。
关键数据不能隐蔽在交互操作后面，而该当明确的展示在图表中。

然而，若何在可视化中融入交互比较好呢？

设计师该当许可在图表中整合更多数据（打消非关键数据），许可感兴趣的用户更深入地研究数据集。

Nathan Yau 的流动数据是在可视化中合理运用交互操作的有名案例，在可视化行业中广泛运用。
下图是他在关于去世亡缘故原由和预期寿命的图表运用交互操作的案例，顶部 tab 可以切换数据展示维度，点击曲线，可以看到对应的数据。

2005 年至 2014 年的去世亡率数据：去世因如何因性别和种族而异

来源：https://flowingdata.com/2016/01/05/causes-of-death/

或者，交互可以用作吸引点，让你的用户在浏览图表之前，就亲自参与该项目。
看看 Quartz 这款有趣的书写和文化作品。
这件作品首先哀求读者在文化形态的剖析概述之前，大略地绘制一个圆圈 ，这个圆圈展示了有效的可视化的特色。

画圆圈的办法说了很多关于你的故事

来源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/

同样， The Pudding 最近发布了一个交互式可视化软件，向读者讲述有关生日悖论的知识（生日悖论，指如果一个房间里有 23 个或 23 个以上的人，那么至少有两个人的生日相同的概率要大于 50% ）。
虽然大多数非统计学家可能会创造生日悖论，这是概率论中的一个标准问题，非常呆板且不直不雅观，但这种可视化使得它看起来有趣且易于理解。
创作者融入最近的用户互动的办法使得全体体验非常具有关联性。

生日悖论实验

来源：https://pudding.cool/2018/04/birthday-paradox/

这两个在可视化产品中融入交互操作的案例都很成功，由于它们利用交互带读者参与数据研究。

三、利用视觉突出性聚焦并勾引体验

视觉突出性，使视觉元素从周围环境凸显的特性，是数据可视化的强大工具。
它可以用于勾引用户把稳可视化中最主要的信息，以帮助防止信息过载。
通过利用视觉突出一些细节并压制其他细节，可以使我们的设计更清晰，更随意马虎理解。

一些视觉变量 —— 颜色和大小 —— 是我们创造和掌握视觉显著性的关键。

色彩方案是数据可视化设计的关键成分。
众所周知，色彩特殊易于视觉识别。
我们可以利用温暖，高饱和度的颜色来突出关键数据点，并运用冷色调，利用低饱和度的颜色将不太主要的信息放到背景中。

2014：最热的年份

来源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/

尺寸也非常易于营造视觉突出性。
较大的元素比较小的元素更有吸引力，因此要扩大您希望用户首先阅读的元素，并缩小不太干系的文本和元素。

四、利用位置和长度表达定量信息

利用颜色表达分类信息

Cleveland 和 McGill 在信息可视化方面的著名研究 —— 视觉编码的有效性（即数据维度与视觉属性的映射）。
他们根据人们对视觉编码的准确感知程度，对不同类型的视觉编码的识别程度进行了排序，给出了以下（简化的）列表：

这对数据可视化设计的意义在于，我们显示定量信息的首选该当是按位置进行编码（如经典散点图和条形图所示）。
与基于角度（如饼图）或基于区域（如气泡图）的编码比较，基于位置的编码有助于用户在更短的韶光内进行更准确的比较。

然而，这并不是说所有可视化都必须是条形图或散点图。
在研究可视化数据的新方法时，牢记这些原则是个好主张。

我真正想要强调的是，颜色不应该用于编码定量信息，而是该当用来编码分类信息。
也便是说，我们可以利用颜色来表示属于不同类别的数据。

出生时的预期寿命

来源：http://www.vizwiz.com/2017/11/life-expectancy.html

五、肃清图表视觉上的混乱

无论你是否支持 Edward Tufte 在设计中利用极简主义的极度方法，都须要不断思考，如何肃清图表视觉上的混乱。
通过在数据元素和非数据元素之间创建可视化比拟，来让您的数据大放异彩，就像 Nadieh Bremer 在他的获奖作品“美国出生韶光”中所做的那样。

婴儿潮：白天事情韶光出生高峰期

来源：https://www.visualcinnamon.com/portfolio/baby-spike

删除不起任何浸染的构造元素使数据清晰（如背景、线条和边框）。
减弱必要的构造元素（如轴、网格和刻度线），否则这些元素会与数据争夺把稳力。
(网格为浅灰色，最宽设为 0.5 pt，轴为玄色或灰色，最宽设为 1 pt )

六、合理利用图例

图表中的每个数据都利用图例标注，以便读者理解它所代表的内容，这样的设计对吗？

错。
太多设计师依赖图例来见告用户哪些符号或颜色代表图表中的哪些数据。
列举图例虽然对设计师来说很随意马虎，但对读者来说却很难。
它们迫使读者在图例和数据之间来回扫描，给读者的影象带来不必要的压力。

更好的方法是直接在图表上标记数据。
作为设计师，你的事情便是完善体验，便于用户阅读。
不才面的例子中，Nathan Yau 进行了去除图例的设计，创建了一个带有大量直接标签的小型交互式多重显示。

每人逐日均匀消费量

来源：https://flowingdata.com/2016/05/17/the-changing-american-diet/

七、利用通报和视觉层级创建叙事流程

最好的可视化讲述着引人入胜的故事。
这些故事通过图表中的趋势、干系性或非常值展示，图表数据周围的元素可以进一步丰富故事内容。
这些故事将原始数据转化为有用的信息。

从表面上看，彷佛数据可视化完备与数字干系，但一个伟大的数据故事是无法用措辞来讲述的。
信息通报清晰的视觉层次，才能一步一步地勾引读者阅读数据。

例如，可视化的标题，该当明确阐明一个关键不雅观点，使读者领会。
分散在数据中的眇小注释，可以通过非常值或趋势引起读者把稳，从而为关键不雅观点供应支撑。

来源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html

我在这里要说的是：帮助用户，确切地见告他们在数据中探求什么！

八、利用图形元素丰富图表信息

正如上一条建议提到的，我们可以在可视化中利用注释来丰富数据故事。
有时可以添加图形元向来使这些注释更故意义，以便将这些信息更直接地关联到我们的数据。

以这张来自 Susie Lu 的图片为例。
“夏季大片”和“奥斯卡季”的数据重叠授予了原来看似随机的高峰和低谷以意义。
它们帮助不雅观众理解数据的主要性，比单独利用字幕或注释更直接。

2015 – 2017.08 票房趋势：强大的开场和后期的爆发

来源：https://susielu.com/data-viz/box-office

九、为移动体验而设计

静态可视化常日以 JPG 和 PNG 等位图图像格式发布，这对移动端用户来说是一个明显的寻衅。
许多数据可视化的美妙之处在于它们的视觉细节 —— 眇小的数据点和奇妙的编码 —— 而这些细节许多在静态格式的小屏幕上被丢失了。

例如：Accurat 事情室在诺贝尔奖上的精美繁芜的作品，在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸，却在移动设备上险些难以辨认。

视觉数据

来源：http://giorgialupi.com/lalettura/

为移动体验设计，利用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建相应式可视化，考试测验为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。

十、平衡繁芜性与清晰度以促进理解

本日谈到的所有最佳实践可以归结为一件事：在繁芜性和清晰度之间找到得当的平衡，以知足受众的需求。

制作精美的、探索性的可视化细节总是诱人的，但这不一定是最得当的方法。
在设计图形时要考虑严密 ，让读者的知识和目标决定该当包含哪些数据以及包含多少数据，并整理数据以讲述想要讲述的故事。

作者：Midori Nediger；译者：桃花果；编辑审核：TCC翻译情报局

原文链接：https://uxdesign.cc/8-ways-to-make-forms-more-user-friendly-50f3f22c708c

本文由@TCC翻译情报局 翻译发布于大家都是产品经理，未经容许，禁止转载。

题图来自 pixabay，基于CC0协议。