网站设计关于网页数据可视化最佳体验方法研究

数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业，从商业智能到新闻，帮助我们理解和传达数据中的见解。

我们的大脑已准备好处理可视化呈现的信息，使我们更容易理解图表和图形中可视化的数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的这些优势来显示数据，以便它可以被吸收和理解。它应该考虑我们对视觉处理的了解，以增强和简化观众的数据体验。

现在有很多工具和框架可用于构建这些图形，现在是时候回归基础了。是什么让数据可视化有效？在设计数据时我们应该遵循哪些指导原则？

以下最佳实践将帮助您设计丰富，富有洞察力的数据体验。

1.为特定受众设计

可视化用于揭示模式，提供上下文以及描述数据中的关系。虽然设计师不会影响给定数据集中的模式和关系，但她可以根据受众的需求选择要显示的数据量以及要提供的上下文。毕竟，就像任何其他产品一样，如果观众无法使用它，那么可视化就毫无意义。

新手的可视化应该是结构化的，明确的和引人入胜的。他们应该用文字直接说明观众应该从数据中拿走什么。

另一方面，专家观众的可视化可以显示更细粒度的数据视图，以允许读者驱动的探索和发现。细节和数据密度应该简单明了。

2.使用（但不要依赖）交互促进探索

这是一个令人警醒的数字：纽约时报网站上只有10-15％的交互式可视化访问者实际点击了按钮。纽约时报的图形团队在业务中创造了一些最好的工作，几乎没有人与他们互动！

这对交互式可视化设计的意义在于我们不能依赖交互来建立理解。密钥数据不得隐藏在交互元素后面，而应该在没有交互的情况下可用。

然而，什么交互是很好的，允许整合额外的数据（否则可能被排除），以允许感兴趣的观众更深入地探索数据集。流动数据的Nathan Yau已经在这种交互式可视化风格上垄断了市场，正如他在死亡原因和预期寿命方面的图表所示。

或者，交互可以用作钩子; 一个吸引注意力的人，可以让你的观众亲自投资于该项目，然后他们可以远距离导航。看看这款有趣的石英手写和文化作品。这篇文章通过要求读者简单地绘制一个圆圈开始，然后继续概述文化形状绘制的分析，其中包含一些简单但有效的可视化。

同样，The Pudding最近发布了一个交互式可视化，向读者讲述生日悖论。虽然大多数非统计学家可能会发现生日悖论，这是概率论中的标准问题，非常干燥且不直观，但这种可视化使得它看起来简直令人着迷。创作者融入最近用户互动的方式使得整个体验非常相关。

这两个交互式示例都起作用，因为它们允许查看者参与数据，而无需交互来理解。

3.使用视觉显着注重注意力并指导经验

视觉显着性是使视觉元素与周围环境相抗衡的特性，是数据可视化的强大工具。它可用于引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉显着突出一些细节并压制其他细节，我们可以使我们的设计更清晰，更容易理解。

一些视觉变量 – 颜色和大小，主要是 – 我们创建和控制视觉显着性的关键。

色彩方案是大数据可视化的关键，因为众所周知，色彩特别擅长打破伪装。我们可以使用温暖，高度饱和的颜色来突出关键数据点，并应用冷色调，去饱和的颜色将不太重要的信息推送到背景中。

尺寸也很明显。大元素比小元素需要更多关注，因此要扩大您希望观众首先阅读的元素，并缩小文本和不太相关的元素。

4.使用位置和长度编码定量信息并使用颜色编码分类信息

Cleveland和McGill在信息可视化方面的着名工作研究了视觉编码的有效性（即数据维度与视觉属性的映射）。在他们的发现中，他们根据我们对它们的准确程度对不同类型的视觉编码进行了排序，给出了这个（简化的）列表：

1. 沿着共同的比例定位
2. 长度
3. 角度
4. 区
5. 颜色

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

然而，这并不是说所有可视化都必须是条形图或散点图。在探索可视化数据的新方法时，要牢记这些基础知识是个好主意。

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

5.使结构元素像刻度线和轴一样清晰但不显眼

无论你是否支持爱德华·图夫特极端主义的极简主义设计，都要帮自己一个忙，并从你的图表中消除视觉上的混乱。通过在数据元素和非数据元素之间创建视觉对比来让您的数据大放异彩，就像Nadieh Bremer在美国出生时间的获奖可视化中所做的那样。

删除任何不起作用以澄清数据的结构元素（如背景，线条和边框）。减弱必要的结构元素（如轴，网格和刻度线），否则这些元素会与您的数据竞争以引起注意。浅灰色的样式网格，最大重量为0.5磅，样式轴为黑色或灰色，最大重量为1磅。

6.直接标记数据点

编码某些数据的每个可视元素都需要进行标记，以便查看者理解它所代表的内容。简单吧？

错误。很多设计师依靠传说告诉读者哪些符号或颜色代表其图表中的哪些数据系列。传奇虽然对设计师来说很容易，但读者却很难。它们迫使读者在图例和数据之间来回扫描，给读者的工作记忆带来不必要的压力。

更好的选择是直接在图表上标记数据系列。这往往更像是一个挑战，但是，嘿，你是设计师。你的工作是做这项工作，所以读者不必这样做。在下面的例子中，Nathan Yau完成了避免使用图例的工作，创建了一个带有大量直接标记的交互式小型多重显示。

7.使用消息传递和可视层次结构创建叙事流程

最好的可视化描述引人入胜的故事。这些故事来自数据中的趋势，相关性或异常值，并且由围绕数据的元素加强。这些故事将原始数据转化为有用的信息。

从表面上看，似乎数据可视化完全与数字有关，但是如果没有文字就无法讲述一个伟大的数据故事。具有清晰视觉层次结构的消息传递可用于一步一步地引导读者通过数据。

例如，可视化的标题应该通过明确说明读者应该从可视化中获取的单一关键洞察力来启动叙述。分散在数据中的微小注释可以通过引起对异常值或趋势的关注来为该叙述提供支持。

我在这里要说的是：给观众一个手，告诉他们确切地在数据中寻找什么！

8.将上下文信息直接叠加到图表上

正如我刚才提到的，我们可以在可视化中使用注释来帮助创建叙事流程。有时我们可以添加图形元素以使这些注释更有意义 – 将这些信息更直接地连接到我们的数据。

以Susie Lu的图片为例。“夏季大片”和“奥斯卡季节”叠加为高峰和低谷提供了意义，否则这些高峰和低谷似乎是随机的。它们以比单独的字幕或注释更直接的方式帮助观众理解数据的重要性。

9.移动体验设计

静态可视化通常以JPG和PNG等位图图像格式发布，这对移动观众来说是一个明显的挑战。许多数据可视化的优点在于它们的视觉细节 – 在微小的数据点和微妙的编码中 – 并且许多这些细节在静态格式的小屏幕上丢失。

举个例子：Accurat工作室在诺贝尔奖上的精美复杂作品，看起来非常棒的全尺寸印刷和高分辨率视网膜显示屏，在移动设备上几乎难以辨认。

要设计移动体验，可以使用像D3.js或Highcharts这样的JavaScript可视化库构建响应式可视化，也可以为打印，桌面和移动创建相同静态可视化的多种变体。

10.平衡复杂性与清晰度以促进理解

我今天触及的所有最佳实践归结为一件事：在复杂性和清晰度之间找到适合您的受众需求的平衡点。

制作精美细致的探索性可视化总是诱人的，但这很少是最合适的方法。在设计图形时要考虑周到 – 允许观众的知识和目标决定应该包含哪些数据和多少数据，并策划数据以讲述您想要讲述的故事。