可视化设计的10个指导原则

数据可视化已迅速成为在互联网上传播信息的标准。它用于各种行业，从商业智能到新闻，帮助我们理解和传达意见。 我们的大脑擅长处理可视化信息，这使我们更容易理解图表或图形中的可视化数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来显示数据，从而吸收和理解数据。它应该考虑用户对视觉处理的理解，以改善和简化用户的数据体验。 目前，有许多工具和框架可以用来构建这些图形，是时候回到基础了。是什么使数据可视化有效？我们在设计数据时应该遵循哪些指导原则？ 以下最佳实践将帮助您设计丰富、有洞察力的数据体验。 01 为特定受众设计 可视化用于揭示模式，提供上下文，描述数据中的关系。虽然设计师对给定的数据集中模式和关系没有影响，但她可以根据用户的需要选择显示哪些数据和上下文。毕竟，就像其他产品一样，如果用户不能使用它，可视化是没有意义的。 为小白用户设计的可视化应该是结构化的、清晰的、有吸引力的。他们应该用文字直接解释观众应该从数据中得到什么。 改变父母的工作时间：母亲VS爸爸 （来源：https://flowingdata.com/2016/04/20/parent-work-hours/） 另一方面，专家用户的可视化可以显示更精细的数据视图，以驱动用户探索和发现。细节和数据密度应简单明了。 工作来来往往:国民失业(来源:http://graphics.wsj.com/job-market-tracker/） 02 交互促进探索(但不依赖) 这是一个发人深省的数字：只有10-15%的访客在《纽约时报》网站上参与视觉交互，实际上点击了按钮。《纽约时报》的图形团队制作了业内最好的作品，但很少有人与他们互动！ 这表明我们不能依靠交互来建立对交互可视化设计的理解。关键数据不应隐藏在交互元素后面，而应在没有交互的情况下看到。 然而，什么样的互动更好？允许整合更多数据（否则可能被排除在外），以便感兴趣的读者能够更深入地研究数据集。Nathan Yau 正如他关于死亡原因和预期寿命的图表所示，流动数据已经垄断了这种交互式可视化市场。 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/） 由于允许读者参与数据，，因为它们允许读者参与数据，而不需要通过交互理解。 03 利用视觉突出焦点引导体验 视觉突出是数据可视化的强大工具，使视觉元素从周围环境中突出。它可以用来引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉突出一些细节并抑制其他细节，我们的设计更清晰、更容易理解。 一些视觉变量-颜色和大小-是我们创造和控制视觉显著性的关键。 色彩方案是优秀数据可视化的关键。众所周知，知，颜色特别擅长打破伪装。我们可以使用温暖和高饱和度的颜色来突出关键数据点，并使用冷色调和低饱和度的颜色来将不太重要的信息放在背景中。 2014:最热的年份(来源:https://www.bloomberg.com/graphics/2014-hottest-year-on-record/） 尺寸也很明显。大元素和小元素更有吸引力，所以扩大你想让读者先阅读的元素，缩小不相关的文本和元素。 04 定量信息用位置和长度表达，分类信息用颜色表达 Cleveland 和 McGill 在信息可视化方面，研究了视觉代码的有效性（即数据维度和视觉属性的映射）。他们根据人们对视觉代码的准确感知，对不同类型的视觉代码进行了排序，并给出了以下（简化）列表： 通过共同的规模定位 长度 角度 区域 颜色 这种数据可视化设计的意义在于，我们显示定量信息的首选应该是根据位置编码（如经典散点图和条形图所示）。与基于角度（如蛋糕图）或基于区域（如气泡图）的编码相反，基于位置的编码有助于观众在更短的时间内进行更准确的比较。 然而，这并不意味着所有的可视化都必须是条形图或散点图。在研究可视化数据的新方法时，记住这些原则是个好主意。 我真正想强调的是，颜色不应该用来编码定量信息，而应该用来编码分类信息。换句话说，我们可以使用颜色来表示不同类别的数据。 出生时的预期寿命(来源:http://www.vizwiz.com/2017/11/life-expectancy.html） 05 结构元素和轴一样清晰，但不显眼 不管你是否支持 Edward Tufte 极简主义在设计中的极端方法应该帮助自己消除你图表中的视觉混乱。通过在数据元素和非数据元素之间创建可视化对比，您的数据就像 Nadieh Bremer 他在获奖作品《美国出生时间》中所做的。 婴儿潮:白天工作时间出生高峰(来源:https://www.visualcinnamon.com/portfolio/baby-spike） 删除不起作用的结构元素，使数据清晰（如背景、线条和边框），削弱必要的结构元素（如轴、网格和刻度线），否则这些元素将与您的数据竞争。网格为浅灰色，最宽为0.5 pt，轴是黑色或灰色的，最宽的轴是1 pt。 06 直接标记数据点 编码数据的每个元素都需要标记，以便读者理解它所代表的内容。简单吗？ 错误。太多的设计师通过图例告诉读者哪些符号或颜色代表图表中的数据系列。虽然设计师很容易列出图例，但读者很难列出图例。它们迫使读者在图例和数据之间来回扫描，给读者的记忆带来不必要的压力。 更好的方法是直接在图表上标记数据系列。这通常更像是一个挑战，但嘿，你是一个设计师。你的工作就是这样做，这样读者就不必这样做了。在下面的例子中，Nathan Yau 完成了避免使用图例的工作，创建了一个带有大量直接标签的小型交互式多重显示。 每人每日平均消费量(来源:https://flowingdata.com/2016/05/17/the-changing-american-diet/） 07 利用信息传递和视觉层面创建叙事过程 最好的可视化讲述了一个迷人的故事。这些故事来自中包含的趋势、相关性或异常值，并由数据周围的元素加强。这些故事将原始数据转化为有用的信息。 从表面上看，数据可视化似乎与数字完全相关，但一个伟大的数据故事不能用语言来讲述。只有当信息传输具有清晰的视觉层次时，读者才能逐步阅读数据。 例如，可视化标题应该清楚地澄清一个关键观点，以便读者能够理解它。分散在数据中的小注释可以通过异常值或趋势吸引读者的注意，从而支持关键观点。 来源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html 我想说的是:帮助读者准确告诉他们在数据中寻找什么！ 08 直接将上下文信息叠加到图表上 正如我刚才提到的，我们可以在可视化中使用注释来帮助创建数据故事。有时我们可以添加图形元素来使这些注释更有意义，以便更直接地与我们的数据相关联。 以这张来自 Susie Lu 以图为例。夏季大片和奥斯卡季的数据重叠赋予了看似随机的高峰和低谷。它们帮助观众理解数据的重要性，比单独使用字幕或注释更直接。 2015 – 2017.08 票房趋势:强劲的开局和后期爆发(来源:https://susielu.com/data-viz/box-office） 09 设计移动体验 静态可视化通常是 JPG 和 PNG 等位图像格式的发布对移动用户来说是一个明显的挑战。许多数据可视化的美在于它们的视觉细节——小数据点和微妙的编码——许多细节在静态格式的小屏幕上丢失了。 例如：Accurat 诺贝尔奖工作室精美复杂的作品在印刷和高分辨率视网膜显示器上看起来非常棒，但在移动设备上几乎很难识别。 视觉数据(来源:http://giorgialupi.com/lalettura/） 为移动体验设计或使用图像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化，或为印刷、桌面和移动设备的各种载体创建相同的静态可视化设计。 10 平衡复杂性和清晰度，促进理解 我今天谈论的所有最好的实践都可以归结为一件事：在复杂性和清晰度之间找到合适的平衡，以满足观众的需求。 制作精美、探索性的可视化细节总是有吸引力的，但这并不一定是最合适的方法。在设计图形时要仔细考虑 ，让读者的知识和目标决定应该包含哪些数据和数据，并整理数据来讲述你想讲的故事。 原文作者：MIDORI NEDIGER 原文地址：https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/ 作者：桃花果，杭州设计师；编辑：TCC实验室 翻译特工队 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。