2.4视觉编码原则

视觉编码是指在人们在接收外界信息时，对外界信息的视觉刺激进行编码，比如颜色、数字、字母、图形等。数据可视化就是将数据以一定的变换和视觉编码原则映射为可视化视图。用户对可视化的感知和理解通过人的视觉通道完成。在可视化设计中，对数据进行可视化（视觉）元素映射时，需要遵循符合人类视觉感知的基本编码原则，这些原则跟数据类型紧密相关。在通常情况下，如果违背了这些基本原则，将阻碍或误导用户对数据的理解。

2.4.1相对性和绝对性

人类感知系统的工作原理决定于对所观察事物的相对判断。人眼通过光线在物体表面所投射形成的明暗效果来辨别物体，并且通过其效果对比，形成对空间深度的视觉感知，来辨认物象形态、动态及颜色。

①视觉对大小的感知

例如在日常生活中（专业领域除外），人们通常会选取一个参照物，而将另外一个物体的尺寸描述为其相对于参照物的尺寸的变化量，并将比较结果描述成“A比B长大约2厘米”或“C比D要大一些”这样的形式。然而，精确地进行相对判断是有条件的，即如果物体使用相同的参照物或者相互对齐进行判断，则会有助于人们做出准确的相对判断。

图2-16展现了一个可视化实例：将美国政府的1万亿美元债务以100美元现金形式占用的场地来表示。

 

图2-16相对判断：将等同于美国政府财政赤字的1万亿美元现金堆叠形成的方块（墨绿色），和标准美国橄榄球场（左）、波音747飞机（右）进行对比，形象直观。

视觉假象（VisualIllusion）是指人们通过眼睛所获得的信息被大脑处理后形成的关于事物的感知，是与事物在客观世界中的物理现实并不一致的现象。相对判断给用户提供了一种定性判断的有效手段，然而不合理地设定事物的上下文环境，会导致判断真实性的失效。在图2-17中，左右线条具有完全相同的长度，然而右边线条看起来很像屋内一个墙角，如我们平时所认知的，它“应该”比我们想象的要远。左边的线条看起来像是屋外的一个墙角，那“理应”比我们认为的近。在感知上人们更容易得到右边的线条长的伪结论。

 

图2-17相对判断和视觉假象：长度。线段A和线段B具有完全相同的长度。

②视觉对颜色和亮度的感知

一些视觉实验表明，感知系统对于亮度和颜色的判断完全是基于周围环境的，即人眼是通过与周围亮度和颜色的对比获得对焦点处亮度和颜色的感知的，因此在这种情况下，视觉假象将更加突出。例如，图2-18（a）为美国麻省理工学院教授EdwardAdelson发布的一个阴影假象图像，被标记的两个正方形格子A和B看上去具有明显不同的灰度（B比A亮）。然而，通过增加一个灰色条带连接A和B（见图2-18（b））或覆盖图中除正方形A和B以外的区域（见图2-18（c）），可以发现，正方形A和B实际上具有相同的亮度。这主要是因为，人们对于色块A和B的亮度的判断完全是基于它们的周围色块进行的。人们对于颜色的判断也会受到周围环境的影响。

 

图2-18相对判断和视觉假象：亮度。感知系统对于亮度的判断是相对的，因此容易受到周围亮度的影响

图2-19中，左1和左2两幅图展示了经过两种不同颜色滤镜处理的色彩魔方，右边两幅图则展示了将左图中色彩魔方的部分色块遮盖后的结果，不难发现，左图中给大脑形成了两种不同颜色的色块（深蓝色和暗黄色），它们实际上是一样的灰色。

 

图2-19相对判断和视觉假象：颜色。感知系统对于颜色的判断也是相对的，上下文颜色的组成会使人对相同的颜色形成不同的感知

在信息可视化设计中，设计者需要充分考虑到人类感知系统的这种现象，以使得设计的可视化结果视图不会存在阻碍或误导用户的可视化元素。

2.4.2视觉通道的特性

视觉通道有不同的取值范围，如何取值能使人们易于区分该视觉通道的两种或多种取值状态。例如，对于圆的大小或线段的粗细，都只编码了三种尺寸，即大中小，这样的编码方式可以使不同数值的编码样式更为明显，并极大地提高了人们对不同编码方式的识别效率。

1967年，JacquesBertin初版的《SemiologyofGraphics》一书提出了图形符号与信息的对应关系，奠定了可视化编码的理论基础。如图2-20所示。

 

图2-20图形符号与信息的对应关系

如上图所示，书中把图形符号分为两种：

①位置变量：一般指二维坐标。

②视网膜变量：尺寸、数值、纹理、颜色、方向和形状。

将以上7种基本的图形符号其映射到点、线、面之后，就相当于有21种编码可用的视觉通道。后来人们还又补充了几种其他的视觉通道：长度、面积、体积、透明度、模糊/聚焦、动画等。

然而，使用过多的视觉通道反而会造成我们视觉系统的混乱，使我们获取信息更难。所以合理地使用视觉通道是设计优秀的信息可视化的关键因素，因此，本节主要讨论各个视觉通道的一些特性，以指导设计者在设计信息可视化时能够合理地利用视觉通道对数据信息进行编码。

（1）位置变量

位置变量是既可用于编码分类的数据属性，又可用于编码定序或定量的数据属性的视觉通道。另外，对象在平面上的接近性也可以用于编码分组的数据属性。位置变量是所有视觉通道中最特殊的一个。

由于可视化设计大多在二维空间，位置变量对于任何数据都非常有效，甚至是最有效的。因此，使用位置变量编码哪种数据属性是设计者首先面临并需要解决的问题，其结果甚至将直接主导用户对于可视化结果图像的理解。水平位置和垂直位置属于位置变量的两个可以分离的视觉通道，当需要编码的数据属性是一维时，可以仅选择其一。水平位置和垂直位置的表现力与有效性的差异比较小，但也有不少研究指出，受真实世界中重力效应的影响，垂直位置会比水平位置具有略高的优先级，即在相同条件下人们更容易分辨出高度的差异。基于此考虑，显示器的显示比例通常被设计成包含更多的水平像素，从而使水平方向的信息含量可以与垂直方向的信息含量相当。

位置关系能够帮助揭示数据间的关系。例如，数据是否主要集中在某一范围，数据分布是否符合一定的统计规律，数据间是否表现出特定的趋势等等。图2-21显示了两个简单的图表例子，通过点之间的位置分布，我们很容易就可以发现不同属性间的联系。在图2-21中，左、右两图都显示了同一组1993年汽车数据中的部分属性。其中，左图显示了不同汽车的最低价格和最高价格的散点图，从点的分布情况来看，这两个价格之间呈线性关系；右图显示了最低价格和引擎大小之间的关系。与左图不同的是，右图揭示两个属性之间没有很强的联系。

 

图2-21图形元素间位置关系的作用，1993年汽车数据中的部分属性

除了选择数据属性，一般还要选择坐标轴来组织显示空间，决定图像元素在显示空间中的位置。坐标轴一般标有刻度，表示值的范围，同时每个刻度标注具体数值。坐标轴通常还包括文字描述，表示坐标轴的意义。坐标轴上的刻度是决定图形元素位置的重要因素。通常使用的是线性刻度，图形元素在空间中的位置，根据所对应的数据做线性伸缩。另一种常见的是对数刻度，通常用于显示指数增长的数据。图2-22显示了世界500强中前40名公司在2011年的总收入，上图采用了线性刻度，由于沃尔玛和艾克森石油公司的收入远远大于其他公司，其他公司的数据所对应的点被压缩在一个很小的范围内，因而很难观察它们之间的差别。下图采用了对数刻度（以2为底），清楚地显示通用电气的收入为237美元，而苹果公司略小于236美元，两公司的收入相差2倍多。

 

图2-22世界500强中前40名公司的2011年总收入的两种可视化

（2）视网膜变量

①颜色

颜色在数据可视化领域通常被用于编码数据的分类或定序属性。在所有的视觉通道中，颜色是最复杂的。有时，为了便于用户在观察和探索数据可视化时从整体进行把握，可以给颜色增加一个表示不透明度的分量通道，用于表示离观察者更近的颜色对背景颜色的透过程度。

颜色混合效果可以为可视化视图提供数据可视化的上下文内容信息，方便观察者对于数据全局的把握。关于颜色的感知原理和基本理论，已在前面的章节中讲述了，这里主要关心其作为视觉通道的一些特性。从可视化编码的角度对颜色进行分析，可以将颜色分为亮度、饱和度和色调三个视觉通道，其中前两个可以认为是定量或定序的视觉通道，而色调属于定性的视觉通道。在使用一般术语“颜色”时，通常指的是这三个独立的视觉通道的结合整体，因此可以认为“颜色”既是分类的也是定量的视觉通道。

亮度适合于编码有序的数据，然而需要注意的是亮度通道的可辨性较小，一般情况下，在可视化中尽量使用少于6个不同的可辨的亮度层次。另外，相比于其他两个视觉通道（饱和度和色调）的对比度，亮度的对比度所形成的边界现象更加明显。由于人类感知系统是基于相对性进行判断的，所以受到对比度效果的影响后，人们对于亮度的感知缺乏精确性。

饱和度是另一个适合于编码有序数据的视觉通道。作为一个视觉通道，饱和度与尺寸视觉通道之间存在非常强烈的相互影响，在小尺寸区域上区分不同的饱和度明显要比在大尺寸区域上区分困难得多。和亮度一样，饱和度识别的精确性也受到对比度效果的影响。在大块区域内（如背景），标准的可视化设计原则是使用低饱和度的颜色进行填充；对于小块区域，设计者需要使用更亮的、饱和度更高的颜色填充，以保证它们可以比较容易地被用户辨认。点和线是典型的小块区域的标记，因此使用饱和度编码具有不同意义的点和线时能够容易被辨认的饱和度层次较低，通常只有三层；对于大区域的标记，如面积，可以使用的饱和度层次则会略多。

色调非常适合于编码分类的数据属性，并且也提供了分组编码的功能。虽然在表现力排序上处于“位置”之后，但可以为可视化增加更多的视觉效果，在实践中被广泛使用。然而，色调和饱和度都面临着与其他视觉通道相互影响的问题。例如，在小尺寸区域中人们难以分辨不同的色调。同样地，在不连续区域中的色调也难以被准确地比较和区分。一般情况下，由于色调属于定性的视觉通道，因此色调具有比亮度和饱和度更多的可区分层次，人们在不连续区域的情况下通常可以分辨多达6～12种色调，在小尺寸区域着色的情况下，可分辨的层次数量受到视觉通道相互影响而略有下降。

配色方案在信息可视化设计中，关系到可视化结果的信息表达和美观性。在设计可视化的配色方案时，设计者需要考虑很多因素：可视化所面向的用户群体、可视化结果是否需要被打印或复印（转为灰阶）、可视化本身的数据组成及其属性等。由于数据具有定性、定量的不同属性，因此将数据进行可视化的时候需要设计不同的配色方案。例如，对于定性的分门别类的数据类型，通常使用颜色的色调视觉通道进行编码，因此设计者需要考虑的是如何选择适当的颜色方案，使得不同的数据能容易地被用户区分（有时候还需要考虑到视觉障碍用户的需求）；如果是定量的数据类型，则通常使用亮度或饱和度进行编码，以体现数据的顺序性质。

在进行可视化设计的过程中，设计者还可以应用一些软件工具辅助配色方案的设计，例如较流行的ColorBrewer配色系统（http://colorbrewer2.org/）（见图2-23）和Adobe公司的Kuler配色系统（http://kuler.adobe.com）。在ColorBrewer配色系统中，用户首先选择数据的分类数量（定性数据的类别数量，或定量数据的层次级别数量），然后选择数据类型（定性数据、顺序的定量数据，或发散的定量数据），选择配色方案，最后在左下角显示相应的配色方案。另外，用户在选择配色方案的时候，可以限制选择色盲友好的、打印一致的或可复印的配色方案。ColorBrewer系统能够根据定制选择出用色方案。而CARTOColors系统（https://carto.com/carto-colors/）（见图2-24）则能更加方便、快捷地给出各种不同的配色方案，Kuler在线配色方案工具加入了社交功能，允许用户上传、下载、评价配色方案，受到不少用户的青睐。

 

图2-23ColorBrewer在线配色系统截图

 

 

图2-24CARTOColors在线配色系统截图

②尺寸

尺寸是定量/定序的视觉通道，因此适合编码有序的数据属性。尺寸通常对其他视觉通道都会产生或多或少的影响——尺寸变小的时候，其他视觉通道所表达的视觉效果会被抑制，例如，人们可能无法区分很小尺寸的形状，或者如前面的例子所示，尺寸与色调存在较强的影响。长度是一维的尺寸，包括垂直尺寸（或称高度）和水平尺寸（或称宽度）。面积是二维的尺寸，体积则是三维的尺寸。由于高维的尺寸蕴含了低维的尺寸，因此在可视化设计中应尽量避免同时使用两种不同维度的尺寸编码不同的数据属性。人们对于一维尺寸的判断是线性的，而对多维尺寸的判断则随着维度的增加而变得越来越不精确，因此在可视化设计时可以使用一维的尺寸（高度或宽度）编码重要的数据属性的值，例如柱状图等。Alexander等人进行了一系列针对英文单词的长度、字体大小和高度的认知偏差相关实验。通过实验发现，长度和高度会影响用户对字体大小的感知；同时相比长度而言，宽度对偏差的影响更大（见图2-25）。尽管很少有可视分析任务对字体的相关因素有像素级的高要求，但这个实验表明字体的相关参数比之前人们认为的更有用处。

 

 

图2-25尺寸示意图

③斜度和角度斜度

斜度和角度斜度是指在二维坐标轴平面中，方向和0度坐标轴的夹角（见图2-26（a））；而角度是指任意两条线段之间的夹角测量（见图2-26（b））。因此，根据它们的性质和特征，斜度和角度都可用于分类的或有序的数据属性的编码。在二维坐标轴平面中，斜度具有所属象限及角度值等性质，因此，在其定义域内并非是单调的，即不存在严格的增或减的顺序。在二维坐标轴平面的每一个象限内，它可以被认为具有单调性，从而适合于有序数据的编码。也正因为如此，斜度也就可以通过4个象限的区分来对分类的数据进行编码。另外，在相邻的两个象限中间，斜度所指示的方向呈现中性的特征，因此，它也可以被用于编码数据的发散性（Divergence）（见图2-26（c））。

 

图2-26斜度和角度示意图

④形状

形状对于人类的复杂感知系统而言，“形状”是一个包罗万象的词汇。视觉心理专家认为形状是人们通过前向注意力就能识别的一些低阶视觉特征。形状与其他视觉通道也存在着较多的相互影响。一般情况下，形状属于定性的视觉通道，因此仅适合编码分类的数据属性。例如，用形状和颜色生动地呈现交通标识的图标，红色代表禁止、危险，黄色代表警告，蓝色代表指示信息。值得注意的是，在显示大量标识时，要尽量避免使用相似的形状。

在图2-27所示的散点图中，用不同的形状符号来表示不同的N值，可以迅速区分，观察它们的数据趋势，同时也可以看到一些特别的数据点。同时，使得这些形状符号具有类似的大小和复杂程度，可以让用户更加关注所对应的数据。所以，可视化设计者在此种情况下应该避免特别突出某些形状。

 

图2-27涂料价格和耐洗刷性次数的关系和比较

⑤纹理

纹理可以被认为是多种视觉变量的组合，包括形状（组成纹理的基本元素）、颜色（纹理中每个像素的颜色）和方向（纹理中形状和颜色的旋转变化）。简单的纹理，例如，由虚线或者点画线填充，被广泛地用来区分不同的物体。而具有不同颜色的形状也常常用作纹理。纹理通常用于填充多边形、区域或者表面。在三维应用中，纹理一般作为几何物体的属性，用来表示高度、频率和方向等信息。同样地，对于二维的图形物体，我们可以通过使用不同的纹理来表示不同的数据范围或分布。形状或颜色的变化都可以用来组成不同的纹理。图2-28显示了6种纹理的例子，这些纹理具有不同的形状或者方向。

 

图2-286种不同纹理的例子

应用纹理可以避免在可视化设计中使用过多的色彩，同时也可以照顾到色盲、色弱用户的理解。Textures.js是一个JavaScript的数据可视化库，用于制作纹理，如图2-29所示。

 

图2-29Textures.js中的9种填充样例

⑥动画

计算机动画指由计算机生成的连续播放的静态图像所形成的动态效果的图画作品。动画的原理利用了人的生理上的视觉残留现象和人们趋向将连续类似的图像在大脑中组织起来的心理作用。人的大脑将这些视觉刺激能动地识别为动态图像，使两个孤立的画面之间形成顺畅的衔接，从而产生视觉动感。动画作为视觉通道的一种，也可以用于可视化表达。然而，在动画可视化中，用户观察非动画的视觉通道可能会变得困难。因此，可视化设计者在使用动画作为视觉通道时必须慎重考虑其对可视化结果产生的不利影响。

（3）视觉多通

视觉多通可以理解为可正确解码的多可视信息的堆叠方式。也就是说，把不同视觉通道（颜色、大小、形状等）通过合理的组合方式编码在一起，使得用户能够正确地解码出可视元素所蕴含的信息。这篇论文提出了视觉多通的理论框架，并把组合方式分为12类，如图2-30所示，分别为：

（a）空间上的分割：由空间邻域D的不同可视编码构成。

（b）时间上的分割：即动画，由时间邻域T的不同可视编码构成。

（c）部分遮挡：由不透明色块的堆叠构成，但有可能因为遮挡造成信息缺失。

（d）空心：由空心形状的堆叠构成，但空心形状之间的距离可以编码速度等信息。

（e）半透明遮挡：由半透明色块的堆叠构成，但有可能因为半透明造成的色差引起信息误解。

（f）多视觉通道整合：由多个视觉通道的组合（颜色与形状、颜色与大小等）构成。

（g）连续场：由向量场、等值线、高度场等连续场构成，结合周围的视觉元素可以判断方向、大小等信息。

（h）视觉元素的位移：位置p的编码可以移位到p的附近，根据格式塔原则的相近原则依然可以正确解码。

（i）周期性动画：由多帧的周期性动画构成。

（j）先验的知识：领域专家可以正确解码。

（k）学习的知识：一般用户经过一定训练可以正确解码。

（l）视觉的语言：一般用户经过视觉编码规则的学习可以正确解码。

 

图2-3012种视觉多通的组合方式