17、优化数据可视化，提升视觉效果

优化数据可视化，提升视觉效果

1. 数据可视化的直观感受

在观察数据可视化图表时，我们常常能直观地感受到某些图表设计得更好，给人“简洁”“流畅”“干净”的印象，而另一些则显得“繁杂”“凌乱”。这种感受就如同我们对好的或坏的写作所产生的“直观感受”一样。好的设计不仅仅是为了让图表更美观，更重要的是提高其有效性，帮助我们更轻松地获取信息。

例如，有两个关于人们在网站上购买时间的图表，尽管它们类型相同、数据一致，但第二个图表的设计使其更易于使用。通过这个例子可以看出，好的设计能帮助我们更便捷地获取信息，让普通的图表变得出色，优秀的图表更加卓越。

2. 设计结构与层次

2.1 一致的结构

设计清晰整洁的图表，需关注结构和层次。所有图表应包含以下四个元素：标题、副标题、视觉区域（包括视觉元素、坐标轴、标签、说明文字、图例）和来源说明。在视觉区域内，还应包含坐标轴、标签，有时还会有说明文字和图例。

遵循这一一致的结构有两个好处：一是能避免因图表元素缺失而导致演示被打断，使可视化更具自解释性，让我们能更多地讨论图表传达的思想，而非图表本身；二是使图表便于移植、复用和共享，方便不同人员在不同场景下使用。

2.2 一致的权重分配

每个元素应具有一致的权重：标题约占可视化的 12%，副标题占 8%，视觉区域占 75%，来源说明占 5%。视觉区域应在结构中占主导地位，其他元素为其服务。例如，若标题权重过大，会与视觉区域争夺注意力；权重过小，则可能错失利用文字帮助观众理解图表的机会。

不过，这些比例只是参考，在某些情况下可以根据实际需求进行调整。比如，波士顿“T”通勤时间地图为了在有限空间内展示更多有用信息并保持可读性，会增加视觉区域的空间，相应地调整标题的位置和大小。

2.3 元素对齐

专业设计师常使用网格系统来设计图表，将设计空间划分为均匀的列和行。设计良好的图表会尽量减少对齐点，因为过多的对齐点会使图表显得繁杂。例如，居中对齐可能会为元素创建多个对齐点，而视觉区域内未对齐的标签会给人一种杂乱无章的感觉。

许多图表本身就有坐标轴，可将其作为标签和其他元素的基线，起到很好的对齐作用。

2.4 限制视线移动

保持协同工作的元素相邻，有助于保持图表结构的整洁。例如，图例可能会导致视线在图表中频繁来回移动，因此有时直接将数值与视觉元素连接起来会更好。

此外，使指针和其他标记尽可能短而直，甚至完全消除它们，也能减少视线移动。曲线和折线会分散对重要元素的注意力，标签距离视觉元素越远，就越难将其与对应元素关联起来。

以下是一个简单的流程图，展示了设计整洁图表的关键步骤：

graph LR
    A[开始设计图表] --> B[确定一致结构]
    B --> C[分配元素权重]
    C --> D[对齐图表元素]
    D --> E[限制视线移动]
    E --> F[完成整洁图表设计]

3. 设计清晰度

3.1 去除无关元素

清晰的图表应去除无关元素，尽可能在保留含义的前提下减少不必要的信息。例如，Tynan DeBold 设计的图表，除标签外仅用三个单词就使图表易于理解，他省略了一些不必要的轴标签和标题中的部分内容，但不影响图表的含义。

3.2 元素独特且支持视觉

每个元素应具有独特的功能，且支持视觉表达。DeBold 的图表包含标题、x 轴标签、y 轴标签、图例、视觉元素、分界线和说明文字等七个元素，每个元素都有其独特作用，无冗余信息。

而大多数图表缺乏清晰度，可能是因为元素用于描述图表结构而非传达核心思想，如标题或副标题重复轴标签，说明文字描述视觉元素展示的内容等。

3.3 消除歧义

可视化中的歧义会产生类似驾驶时遇到模糊指示牌的压力效果，使我们不得不停下来重新思考视觉元素，而非专注于其传达的思想。例如，DeBold 的脊髓灰质炎图表中，每个元素都清晰明确，而医学期刊版本的图表存在一些未明确标注的元素，导致理解困难。

3.4 遵循隐喻和惯例

图表应遵循我们大脑易于理解的隐喻和惯例。例如，DeBold 的脊髓灰质炎图表使用颜色来表示强度，红色表示更强烈，蓝色表示较弱，同时在低饱和度端添加蓝色到淡灰色的渐变，符合“颜色饱和度越低，值越小”的惯例，使图表更易于理解。

以下是一个表格，总结了提高图表清晰度的方法：
|方法|说明|
| ---- | ---- |
|去除无关元素|在保留含义的前提下，去除不必要的信息|
|元素独特且支持视觉|每个元素有独特功能，支持核心思想传达|
|消除歧义|确保每个元素目的明确，无歧义|
|遵循隐喻和惯例|利用常见的隐喻和惯例，使图表易于理解|

4. 设计简洁性

4.1 相对简洁性

简洁并不意味着简单地去除所有信息，过度简洁可能导致缺乏清晰度。我们需要考虑相对简洁性，即展示最少的信息，同时仍能清晰传达核心思想。例如，有两个关于销售代表绩效的图表，左边的图表虽然看起来完整且清晰，但不够简洁；右边的图表通过减少元素数量，在传达相同观点的同时，展现出了令人印象深刻的简洁性。

4.2 去除冗余元素

去除不必要的元素是实现简洁性的重要途径。可以通过评估每个元素是否必要、独特以及是否可以简化来进行筛选。例如，在一个销售绩效图表中，标题可能与某个说明文字重复，此时可以保留标题，去除说明文字；副标题如果只是对视觉元素的重复总结，也可以考虑去除。

以下是一个评估元素是否保留的流程图：

graph TD
    A[评估元素] --> B{元素是否必要?}
    B -- 是 --> C{元素是否独特?}
    B -- 否 --> D[考虑消除元素]
    C -- 是 --> E{元素能否更简单?}
    C -- 否 --> F[比较类似元素并考虑消除]
    E -- 是 --> G[简化并保留元素]
    E -- 否 --> H[保留元素]

4.3 减少标签和刻度

标签和刻度的数量会影响图表的简洁性。当图表中绘制的值数量增加时，标签可能会占据过多空间，分散对整体趋势的注意力。因此，需要思考每个具体值是否对表达思想至关重要，如果不是，可以减少标签数量。例如，在一个销售绩效图表中，x 轴的标签是必要且独特的，但 y 轴的值可以简化为低、中、高三个值，而不会影响图表传达核心思想的能力。

4.4 避免元素冗余

不仅要去除重复的元素，还要消除元素内部的冗余设计。例如，一个图表的标题为了突出显示，可能使用了大小、粗体、下划线、颜色和全大写等五种特殊处理方式，但实际上可能并不需要这么多信号来表明其重要性。同样，副标题的斜体等设计可能也是多余的。

在设计中，可以为不同类型的信息创建类别，让相关元素共享相同的文本样式，避免为每个元素赋予独特的属性。例如，说明文字、图例和标签可以使用相同的文本样式。

4.5 克制使用颜色

过多使用颜色会降低图表的简洁性，因为观众需要花费更多精力来理解颜色差异所代表的含义。在添加颜色时，需要思考是否真的需要做出这种区分，能否将相关信息归为一组并使用单一颜色表示。

可以将图表中的颜色看作一个分数，尽量将其简化到最低公分母，同时保留传达思想所需的区分度。例如，最初一个图表为八个不同的三小时时间段分别使用了独特的颜色，导致图表看起来复杂；将颜色减少到四个六小时时间段的颜色，有所改善；进一步将数据聚类为两个颜色家族（中午前为黄色，下午为蓝色，非工作时间使用较浅色调），则明显提高了清晰度。

此外，灰色是一个很好的选择，它可以创建信息层次，作为背景或次要信息，在不干扰主要思想的前提下提供上下文。

5. 简洁设计的勇气

很多人认为在图表中展示所有信息是更好的选择，认为复杂的图表能体现自己的专业和努力，但这种观念是错误的。实际上，简洁的图表更能有效地传达信息。

在重要会议上展示几个清晰、简单的图表可能会让人感到害怕，担心观众无法理解或认为自己工作不努力。但实际上，简洁的图表往往更受认可。例如，有人帮助一位经理准备向 CEO 的演示，最终决定基于一个出色的图表进行整个演示，结果 CEO 印象深刻，他们围绕这个可视化讨论了三个小时。

6. 总结

好的图表设计目标不是让可视化更具吸引力，而是让它们更有效、更易于理解。以下是创建良好设计感图表的一些技巧总结：
1. 注重结构和层次
- 所有图表包含标题、副标题、视觉区域和来源说明四个元素，视觉区域内包含坐标轴、标签等。
- 为每个元素分配一致的权重：标题约 12%，副标题 8%，视觉区域 75%，来源说明 5%。
- 对齐元素，尽量减少对齐点，可利用坐标轴作为基线。
- 限制视线移动，保持协同元素相邻，简化指针和标记。
2. 确保设计清晰
- 去除无关元素，保留必要信息。
- 使元素独特且支持视觉，避免重复描述结构。
- 消除歧义，确保每个元素目的明确。
- 遵循隐喻和惯例，利用常见认知。
3. 追求设计简洁
- 展示必要信息，思考相对简洁性。
- 去除冗余元素和设计，避免过度装饰。
- 减少标签和刻度，避免分散注意力。
- 克制使用颜色，利用灰色创建信息层次。

通过运用这些技巧，可以设计出更简洁、清晰、有效的图表，更好地传达信息。