4.2.1设计原则实施

（1）数据到可视化元素的映射

数据到可视化元素的映射政策导读

中共中央、国务院印发了《数字中国建设整体布局规划》（以下简称《规划》）明确，数字中国建设按照“2522”的整体框架进行布局，即夯实数字基础设施和数据资源体系“两大基础”，推进数字技术与经济、政治、文化、社会、生态文明建设“五位一体”深度融合，强化数字技术创新体系和数字安全屏障“两大能力”，优化数字化发展国内国际“两个环境”。

湖北省以推动数字化改革为抓手，以激发数据要素价值为主线，以建设全国一体化大数据中心为基础，推动数字产业化、产业数字化，以数字经济赋能高质量发展、提升高效能治理、创造高品质生活，构建立足中国、面向世界、引领未来的“国家数字经济中部脊梁”，为加快“建成支点、走在前列、谱写新篇”作出更大贡献。以上政策阐述了数据是建设数字中国的基础，而一个好的可视化设计能够将数据以图形或图像的形式呈现，可以提高数据的可理解性和易用性，从而更容易地获取数据背后的信息和价值。本章将学习数据可视化设计的相关知识。

（摘自“中共中央国务院印发《数字中国建设整体布局规划》https://www.gov.cn/xinwen/2023-02/27/content_5743484.htm”、摘自《湖北省数字经济发展“十四五”规划》https://jxt.hubei.gov.cn/fbjd/xxgkml/jhgh/202111/t20211124_3879632.shtml）即标记和视觉通道，在选择合适的视觉通道时，设计者首先要考虑数据数量及复杂程度和用户的个性特征。可视化的一个核心作用是使用户在最短的时间内获取数据的整体信息和大部分细节信息，直接观测很难快速准确地获得信息。如果设计者能够预测用户在观察使用可视化结果时的行为和期望，并以此指导自己的可视化设计过程，则可以在一定程度上帮助用户对可视化结果的理解，从而提高可视化设计的可用性和功能性。

数据到可视化元素的映射需充分利用已有的先验知识，从而降低人们对信息的感知和认知所需要的时间。对于基本数据类型，可以通过使用不同的视觉编码通道来表达数据及其之间的关系（见图3-1）

 

图3-1基本数据类型适用的可视化编码方式，优先级自上而下

实际应用中的数据通常是基础数据类型的实例和组合，其可视化方法一般为采用基于不同视觉编码通道的组合。如图3-2所示的可视化设计使用的是散点图，在点标记的选择上设计者使用了一些众所周知的纹理贴图以表示不同的行星并用标签对各行星的数据进行标注，使得可视化所包含的信息一目了然，例如，大部分用户对于地球所代表的点的识别是非常直观而快速的。这是因为，在用户普遍所具备的先验知识中，蓝色和白色分别表示地球的海洋和云彩，“地球”字体的加粗显示更加快了认知速度。

 

图3-2使用散点图的形式可视化行星到太阳的距离和行星公转时间

数据到可视化的映射还要求设计者使用正确的视觉通道去编码数据信息。对于类别型数据属性，需使用类别型视觉通道；对于有序型数据属性，也需要使用定量/定序的视觉通道进行编码。然而，可视化系统也可以向用户提供一些灵活特性。例如，在流线可视化中将时间映射为颜色虽然并不是直观的映射，但这样的方式却可以解释流线上粒子运动速度的变化。另一方面，将时间和空间分别映射为横轴和纵轴，也可以呈现时空演化的事件（见图3-3）。

 

图3-3复活节前一周耶稣活动记录的可视化（部分）。全周时间沿横轴从左到右布局，灰色长方块区域表现了空间，不同颜色的管道线的位置远近编码了人物之间的互动

（2）视图设计与交互

一般而言，一个成功的可视化首先需要考虑的是被用户所广泛认可并熟悉的视图设计。此外，可视化系统还必须提供一系列的交互手段，使得用户可以按照自己满意的方式修改视图的呈现形式。不管使用一个视图还是多个视图的可视化设计，每个视图都必须用简单而有效的方式（如通过标题标注）进行命名和归类。

视图的交互主要包括以下一些方面：

•滚动与缩放：当数据无法在当前有限的分辨率下完整展示时，滚动与缩放是非常有效的交互方式。

•颜色映射的控制：调色盘是可视化系统的基本配置。同样，允许用户修改或者制作新的调色盘也能增加可视化系统的易用性和灵活性。

•数据映射方式的控制：在可视化设计时，设计者首先需要确定一个直观且易于理解的数据到可视化的映射。虽然如此，在实际使用过程中，用户仍有可能需要转换到另一种映射方式来观察他们感兴趣的其他特征。因此，完善的可视化系统在提供默认的数据映射方式的前提下，仍然需要保留用户对数据映射方式的控制交互。如图3-4所示的可视化使用了两种不同的数据映射方式展示了同一个数据。

•数据缩放和裁剪工具：在对数据进行可视映射之前，用户通常会对数据进行缩放并对可视化数据的范围进行必要的裁剪，从而控制最终可视化的数据内容。

•LOD控制：细节层次（Level-Of-Detail）控制有助于在不同的条件下，隐藏或者突出数据的细节部分。

总体上，设计者必须要保证交互操作的直观性、易理解性和易记忆性。直接在可视化结果上的操作比使用命令行更加方便和有效，例如，按住并移动鼠标可以很自然地映射为一个平移操作，而滚轮可以映射为一个缩放操作。

 

图3-4对一个四维数据的两种可视化方法：散点图和平行坐标

（3）合适的信息量

在确定了数据到可视化元素的映射和视图与交互的设计后，信息可视化设计的另一个关键挑战是：设计者必须决定可视化视图所需要包含的信息量。一个好的可视化应当展示合适的信息，而不是越多越好。

失败的可视化案例主要存在两种极端情况。第一种极端情况是可视化展示了过少的数据信息。在实际情况中，很多数据仅包含了两到三个不同属性的数值，甚至这些数值可能是互补的，即可由其中的一个属性的数值推导出另外一个，例如男性和女性的比例（如果相加起来是100%），在这些情况下，直接通过表格或文字描述即可完整而快速地传达信息，并且还能省下不少版面空间。总之，可视化只是辅助用户认识和理解数据的工具，可视化过少的数据信息并不能给用户对数据的认识和理解带来好处。第二种极端情况是设计者试图表达和传递过多的信息。包含过多信息会大大增加可视化的视觉复杂度，也会使可视化结果变得混乱，造成用户难以理解、重要信息被掩藏等弊端，甚至让用户自己都无法知道应该关注哪一部分。

因此，一个好的可视化设计过程应该向用户提供对数据进行筛选的操作，使得被用户选择部分数据的可以显示，同时在特定情况下才显示其他部分。另外一种解决方案则是通过多视图或多显示器，将根据数据的相关性分别显示。

3.2.2设计技巧概述

（1）正确合理的标注

在可视化设计中，仅仅完成上述的交互操作仍然无法形成有效的可视化，用户可能仍然无法从可视化结果中获取足够的信息以判断和理解其包含的内容。例如，在没有任何标注的坐标轴上的点，用户既不知道每个点的具体的值，也不知道该点所代表的具体含义。解决这一问题的做法是给坐标轴标记尺度，然后给相应的点标记一个标签以显示其数据的值，最后给整个可视化赋以一个简洁明了的题目。如图3-5，左图只是简单地完成了数据到可视化（位置和颜色）的映射，然而在用户看来，它仅仅是几条不同颜色的曲线；右图则是一个较完整的可视化，通过增加坐标轴、颜色和尺寸等的标注和说明，用户就能知道这10条曲线的信息含义。

 

图3-5一个不完整的可视化结果与一个完整的可视化结果，在不完整（左图）的可视化结果中，用户无法得知这几条曲线的意义

设计者通过在水平和竖直方向增加均匀分割的网格线，提高用户对该可视化结果中曲线上的点所表示的数值进行对比时的精度。设计者需要认真仔细地对待可视化设计中的网格及其标注。如图3-6展示了网格及其标注是否被合理使用的例子，过于稠密的网格（左）和过于稀疏的网格（右）都不利于用户对于数据的理解。甚至，当网格稠密到一定程度后，用户将无法分辨可视化结果中的数据所表示的点。网格的过多使用和过少使用，使得可视化结果在缺少数据表达的精确性的同时也缺失了美观性，而图中（b）通过网格的合理使用，数据所映射的点能够被用户很好地理解。

 

图3-6网格及其标注的合理使用例子

 

                       图3-7网格间距的正确使用例子

另外，网格所表示的区间的均匀性对于用户对可视化的理解也非常重要，图3-7左图所示的可视化结果中由于设计者使用了不均匀的网格间距（横轴）和非零的起始位置（纵轴），使得用户对可视化结果的理解很难忠于原始数据所包含的信息。使用非均匀的网格间距可能会导致用户对于数据的误读，例如，某一区间的数据斜率将无法通过线段的倾斜程度进行理解和比较。

（2）基本的美学原则

在可视化中，颜色是使用最广泛的视觉通道，也是经常被过度甚至错误使用的一个重要的视觉参数。使用了错误的颜色映射表或者试图使用很多不同的颜色表示大量数据属性，都可能导致可视化结果的视觉混乱，因而都是不可取的。在某些可视化领域，可视化的设计者还需要考虑色觉障碍用户的因素，使得可视化结果对这些用户依然能够起到信息表达与传递的功能。可视化设计者通过仔细的设计完成可视化的功能（向用户展示数据的信息）后，就需要考虑其形式表达（可视化的美学）方面的改进。在可视化设计的方法学中，有许多方法可以提高可视化的美学性，总结起来主要有以下三种：

①聚焦原则

设计者必须通过适当的技术手段将用户的注意力集中到可视化结果中的最重要区域。如果设计者不对可视化结果中各元素的重要性进行排序，并且不改变重要元素的表现形式，则用户只能以通过自我探索的方式获取信息，继而难以达到设计者的意图。

②平衡原则

平衡原则要求可视化的设计空间必须被合理且有效地利用，尽量使重要元素置于可视化设计空间的中心或附近，同时确保元素在可视化设计空间中的平衡分布。在图3-8中，左图的可视化设计将主要的可视化元素置于视图空间的右上角，违背了平衡原则。

 

图3-8可视化元素的平衡分布

③简单原则

简单原则要求设计者在可视化设计空间中要突出重点，尽量避免在可视化中包含过多的造成混乱的图形元素和使用过于复杂的视觉效果（如带光照的三维柱状图等）。在过滤多余数据信息时，可以使用迭代的方式进行，即过滤掉任何一个信息特征，都要衡量信息损失，最终找到可视化结果美学特征与传达的信息含量的平衡。

（3）视图选择与交互设计

使用人们认可并熟悉的视图设计方式，是优秀的可视化展示的前提。简单的数据可使用一些基础的可视化视图，而复杂的数据需要使用或开发新的较为复杂的可视化视图。除此之外，可视化系统还应该提供一系列的交互操作，使用户可以按照自己满意的展示方式修改视图的展示结果。其中，视图的交互包括视图的滚动与缩放、颜色映射的控制、数据映射方式的控制、数据缩放工具、细节控制。

使用动画与过渡效果是可视化系统中常用的技术，它通常被用于增加可视化结果视图的丰富性与可理解性，或增加用户交互的反馈效果。

在时序数据的可视化中，数据值随时间变化。如果每一时刻仅包含一个维度，该维度和时间维度则可以组成一个二维空间，用类似坐标轴的方式编码数据值，其中横轴代表时间的渐变。当数据包含多个维度时，需要通过多个视觉通道编码不同的维度信息，此时如果采用动画的方式编码随着时间演进而产生的数据值变化，则可以在有限的视图空间上展示更多的信息，同时也确保任何单一时刻时可视化结果对有限视图空间的充分利用。图3-9展示了类似GapMinder软件（http://www.gapminder.org）可视化效果的动画序列的其中4帧，呈现了75个国家在25年中平均寿命和婴儿平均死亡率的关系变化。

 

图3-975个国家在25年中平均寿命和婴儿平均死亡率的关系变化

可以看到，随着时间的推进，散点图上的每个点都往右下角移动（更高的平均寿命和更低的婴儿死亡率）。很显然，如果在有限的视图空间中展示这25年所包含的数据，得到的可视化结果将显得非常拥挤，甚至产生大量的重叠（见图3-9）。此外，即使使用静态的可视化编码，时序数据也不是问题，动画效果也能在一定程度上展示时序效果，并从一定程度上引起观察者的注意力。