第2章 视觉感知与认知

2.1 视觉感知和认知

在可视化与可视分析过程中，用户是所有行为的主体：通过视觉感知（Visual Perception）器官获取可视信息、编码并形成认知（Cognition），在交互分析过程中获取解决问题的方法。在这个过程中，感知和认知能力直接影响着信息的获取和进程的处理，进而影响对外在世界环境做出的反应。图2.1呈现了一个用户在客观世界中进行可视分析和事件处理的简化过程：数据①经过自动或手工的分析方法（如机器学习、统计分析等）进行处理②并可视化③后，被用户④所理解，饼状范围⑤表示了由用户、数据处理和可视化三者组成的一个直接交互过程；当多个用户参与这个过程时，相互之间就产生了群组协作⑥的效果。然而人的作用远不止于此，可视化的数据来自现实世界⑦（或模拟仿真），人们利用这些数据做出一些决定⑧，从而影响了他们在世界中的行为⑨，最终对现实世界产生影响⑩ [Keim2010]。

客观世界和虚拟社会中存在并源源不断地产生大量的数据，而人类处理数据的能力已经远远落后于获取数据的能力。众所周知，人眼是一个具有高度并行处理能力的器官，人类视觉具有迄今为止最高的处理带宽 [Keim2010]。视觉分为低阶视觉和高阶视觉，人工智能的发展使得计算机已经能够部分模仿低阶视觉，然而在高阶视觉方面仍然力不从心。另一方面，人类视觉对于以数字、文本等形式存在的非形象化信息的直接感知能力远远落后于对于形象化视觉符号的理解。例如，人们需要顺序地浏览一份数字化报表，才能获悉某一商品各月份的销量，在这个过程中还需要占用一定的大脑记忆进行存储。采用柱状图的方式来可视化销量数据，用户可以快速直观地获得各月份销量的对比和变化趋势。数据可视化技术正是这种将数据转换为易被用户感知和认知的可视化视图的重要手段，这个过程涉及数据处理、可视化编码、可视化呈现和可视交互等流程，每一步骤的设计都需要根据人类感知和认知的基本原理进行优化。

2.1.1 视觉感知和认知的定义

感知指客观事物通过感觉器官在人脑中的直接反映。人类感觉器官包括眼、鼻、耳，以及遍布身体各处的神经末梢等，对应的感知能力分别称为视觉、嗅觉、听觉和触觉等。

认知指在认识活动的过程中，个体对感觉信号接收、检测、转换、简约、合成、编码、储存、提取、重建、概念形成、判断和问题解决的信息加工处理过程。认知心理学将认知过程看成由信息的获取、编码、储存、提取和使用等一系列认知阶段组成的按一定程序进行信息加工的系统。

● 信息获取指感觉器官接受来自客观世界的刺激，通过感觉的作用获得信息。

● 编码以利于后续认知阶段的进行。

● 储存是信息在大脑里的保持。

● 信息提取指依据一定的线索从记忆中寻找并获取已经储存的信息。

● 信息使用指利用提取的信息对信息进行认知加工。

2.1.2 视觉感知处理过程

心理学上的双重编码理论认为，人类的感知系统由分别负责语言方面和其他非语言事物（特别是视觉信息方面）的两个子系统组成。它强调语言与非语言的信息加工过程对于人类认知都具有同等的重要性：人的认知是独特的，它专用于同时对语言与非语言事物和事件的处理。此外，语言系统是特殊的，它直接以口头与书面的形式处理语言的输入与输出，与此同时，它又保存着与非语言事物、事件和行为有关的象征功能。任何一种表征理论都必须适合这种双重功能 [Paivio1986]。此外，存在两种不同的表征单元：适用于心理映像的“图像单元”和适用于语言实体的“语言单元”。前者根据部分与整体的关系组织，而后者根据联想与层级组织。例如，一个人可以通过词语“汽车”想象一辆汽车，或者可以通过汽车的心理映像而想象一辆汽车；在相互关系上，一个人可以想象出一辆汽车，然后用语言描述它，也可以读或听关于汽车的描述后，构造出汽车的心理映像。

通过实验还发现，如果给被试者以很快的速度呈现一系列图画或字词，被试者回忆出来的图画数目远多于字词数目。这个实验说明，非语言信息的加工具有一定的优势，也就是说，大脑对于视觉信息的记忆效果和记忆速度好于对语言的记忆效果和记忆速度。这也是可视化有助于数据信息表达的一个重要的理论基础。

感知心理学家通常将视觉分为低阶视觉和高阶视觉两种类型。低阶视觉与物体的物理性质相关，包括深度、形状、边界、表面材质等。高阶视觉包括对物体的识别和分类，属于人类认知能力的重要组成部分。其中，低阶视觉已经在信息可视化和可视分析的研究中得到了广泛验证。

此外，Ware等人广泛讨论了前注意视觉 [Ware2004]。前注意视觉理论试图解释视觉突出的现象。例如，在图2.2中，后两行复制了前两行的数字，但是后两行中的数字“3”用红色突出，可以让用户在非常短的时间内（通常低于100ms）统计“3”的个数，并且计数所需时间与其他数字的数量没有关系。

2.1.3 格式塔理论

格式塔（Gestalt）简单地翻译成英文，意味着Shape（形状）或Form（构成）。格式塔心理学诞生于1912年，是心理学中为数不多的理性主义理论之一。它强调经验和行为的整体性，反对当时流行的构造主义元素学说和行为主义“刺激-反应”公式。格式塔心理学认为，整体不等于部分之和，意识不等于感觉元素的集合，行为不等于反射弧的循环。如果一个人往窗外观望，他看到的是树木、天空、建筑，而构造主义元素学说认为他应该看到的是组成这些物体的各种感觉元素，例如亮度、色调等。

在格式塔心理学家看来，感知的事物大于眼睛见到的事物；任何一种经验现象，其中每一成分都牵连到其他成分，每一成分之所以有其特性，是因为它与其他部分具有关系。由此构成的整体，并不决定于其个别的元素，而局部过程却取决于整体的内在特性。完整的现象具有完整特性，它不能分解为简单的元素，其特性也不包含于元素之内，如图2.3和图2.4所示。

格式塔心理学感知理论最基本的法则是简单精炼法则，认为人们在进行观察的时候，倾向于将视觉感知内容理解为常规的、简单的、相连的、对称的或有序的结构。同时，人们在获取视觉感知的时候，会倾向于将事物理解为一个整体，而不是将事物理解为组成该事物所有部分的集合。

格式塔法则又称为完图法则，主要包括：

贴近原则（Proximity）

当视觉元素（即一些被人识别的视觉感知对象）在空间距离上相距较近时，人们通常倾向于将它们归为一组。在图2.5中，左下图的10个方形没有相互贴近，因此人们无法将它们归为一组；在右下图的“联合利华公司”图标中，不同花纹颜色一致，由于空间距离贴近，因此被识别为组成一个大写的英文字母“U”。

相似原则（Similarity）

人们在观察事物的时候，会自然地根据事物的相似性进行感知分组，虽然实际上事物本身并不存在分组的意图。通常依据对形状、颜色、光照或其他性质的感知进行分组。例如，在图2.6中，统计图对不同个体着色，使可视化结果自然体现数据中的两个聚类。在图2.7中，对性别用颜色进行编码，可以区分男性、女性在散点图中的分布。不难看出，贴近原则与相似原则的区别是采用空间距离或属性相似性对数据分组。

连续原则（Continuity）

人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体。例如，在图2.8左图中，人眼会认为猫的头和猫的身体属于同一只猫；类似地，在图2.8右图中，由于处于同一延长线的手臂过长（超过我们日常常识），人眼会感知到这是两只手。

闭合原则（Closure）

在某些视觉映像中，其中物体可能是不完整的或者不是闭合的，然而格式塔心理学认为，只要物体的形状足以表征物体本身，人们就会很容易地感知整个物体而忽视未闭合的特征。例如，在图2.9中，人们可以很容易地从轮廓线中获得关于“照片数据分类”和“IBM”图标的视觉感知，而图中未闭合的特征并不影响人们识别这两种事物。

共势原则（Common Fate）

共势原则指如果一组物体具有沿着相似的光滑路径运动趋势或相似的排列模式，人眼会将它们识别为同一类物体。例如，如果有一堆点同时向下运动，另一堆点同时向上运动，人们自然地分辨出它们是两组不同的物体。图2.10左图显示了一堆杂乱的字母，但是人眼下意识地识别出具有相同布局的字母并自动识别出语句“look at me,follow me,read me!”；右图展示了Hans Rosling的著名可视化工作“各国状态趋势图”的一个实例，每个数据点代表一个国家在某个年份的数据，随时间变化时，人眼自动将具有类似运动趋势的点聚类。

好图原则（Good Figure）

好图原则指人眼通常会自动将一组物体按照简单、规则、有序的元素排列方式进行识别。个体识别世界的时候通常会消除复杂性和不熟悉性，并采纳最简化的形式。这种复杂性的消除有助于产生对识别物体的理解，而且在人的意识中这种理解高于空间的关系。图2.11展现了对五环形状的两种识别：奥运五环标志和割裂的五个圆环。在描述这种形状时，人们倾向于将其描述成一系列圆环，而不是直接描述为一种特殊的形状。

对称性原则（Symmetry）

对称性原则指人的意识倾向于将物体识别为沿某点或某轴对称的形状。因此，将数据按照对称性原则分为偶数个对称的部分，对称的部分会被下意识地识别为相连的形状，从而增强认知的愉悦度。如果两个对称的形状彼此相似，它们更容易被认为是一个整体。图2.12展示了某国男女人口随年龄的分布情况。

经验原则（Past Experience）

经验原则指在某些情形下视觉感知与过去的经验有关。如果两个物体看上去距离相近，或者时间间隔小，那么它们通常被识别为同一类。图2.13左右两图分别将同一个形状放置在两个字母和两个数字之间，造成的识别结果分别是B和13。

由上面的描述不难看出，格式塔（完形理论）的基本思想是：视觉形象首先是作为统一的整体被认知的，而后才以部分的形式被认知，也就是说，人们先“看见”一个构图的整体，然后才“看见”组成这一构图整体的各个部分。可视化设计必须遵循心理学关于感知和认知的理论研究成果。信息可视化指将信息通过图形元素的表达和重组，获得包含原始信息的视觉图像的过程。在信息可视化设计中，视图的设计者必须以一种直观的、绝大多数用户容易理解的数据-可视化元素映射对需要可视化的信息进行编码，其中涉及最终用户对可视化视觉图像的心物感知和认知过程。格式塔心理学是对心理感知和认知进行的一整套完整的心理学研究，并由此而产生的完备理论。尽管格式塔心理学的部分原理对可视化设计没有直接的影响，但是在视觉传达设计的理论和实践方面，格式塔理论及其研究成果都得到了应用。

2.1.4 相关实验

2.1.4.1 变化盲视

在扫视、闪烁、电影剪辑和一些其他的中断中，观察者无法检测到物体视觉细节的实质性变化，这种现象叫作变化盲视（Change Blindness）[Simous2000]。

在变化盲视的实验 [Simons1997]中，观察者观察一个视频中的主人公，第一个镜头主人公从桌子旁起身，第二个镜头主人公去接电话。可视观察者并没有发现，两个镜头中的主人公人物和衣服都发生了变化。

在另一个变化盲视的实验 [Simons1998]中，一个身穿红衣服的人在大街上向一个人问路，在问路的过程中，换成另一个穿绿衣服的人继续问路，来测试被问路的人是否发现异常。在实验中有接近50%的人并没注意到问路的人发生了改变，这项实验指出变化盲视不仅仅出现在实验室中，它在日常生活中也会发生。

2.1.4.2 选择注意

一个众所周知的现象是：当人专心于检查某物时，很难注意到周围发生的一些事情。当人的注意力集中到某个物体上时，在很大程度上人将无法感知放置在视野外围的其他物体，尽管这些物体发出的光线完全到达了大脑皮层的视觉范围内 [Husain1988]。

选择注意实验 [Simons1999]要求192个观察者持续关注一个视频，视频中有3个穿白衣服的人和3个穿黑衣服的人在相互扔2个篮球，要求不同组的观察者统计出穿某种衣服的人扔出球的次数。但是在视频中间，有一只身穿大猩猩衣服的人从画面中走过。在实验最后有46%的观察者未能发现其中的异常。

当某些事物发生变化时，对用户进行引导，可视化这些变化可以有效地减少认知负荷。

2.1.4.3 遗忘进程

在遗忘进程的实验 [Peterson1959]中给被试者（全为大学生）放3个辅音字母的声音，然后再放3位数的声音，要求被试者迅速说出这个3位数连续减3的结果，直到被要求停止再回忆最开始的3个辅音字母，连续减3的运算时间分别为3s、6s、9s、12s、15s、18s。实验进行多次后，结果是当减3的运算时间为3s时，被试者的平均正确率为80%。随着时间的增加，正确率急速下降，6s时正确率为55%,18s时正确率为10%。该实验说明，短时记忆保持信息短暂，如果没有及时复述，将会迅速被遗忘。

记忆在人类的认知中扮演着重要的角色，但是工作记忆是极其有限的，可视化必须为工作记忆的增强而提供外部援助。

2.1.4.4 认知偏差

视觉感知是理解我们所处环境的主要认知信息的来源。可视化有一个假设，即视觉感知的一致性，给予相同的刺激、相同的东西，每一次都应该“看到”一样的东西。然而，视觉感知不是一个自顶向下或由下向上的。低阶视觉和高阶视觉都会影响视觉感知，而向前的刺激也可能会产生视觉感知上的偏差，继而影响我们所“看见”的东西 [Vakdez2018]。

启动（Priming）效应表示人类受到先前感知刺激而影响反应的现象。例如对单词“so_p”进行补全，如果之前看到一张喝汤的照片，那么可能补全为soup；如果看到的是肥皂的照片，则可能补全为soap。锚定（Anchoring）效应表示以前的刺激会提供一个参考框架的现象。例如提前告知胡萝卜的卡路里数，再去判断冰激凌的卡路里数，人们通常会低估后者；提前告知马克•吐温的出生年份，可能会影响人们对密西西比河长度的估计。

2.2 颜色

在信息可视化与视觉设计中，颜色是最重要的元素之一。颜色可以包含相当丰富的信息，非常适合用于对信息编码——即数据信息到颜色的映射。颜色与形状和布局构成了最基本的数据编码手段。另一方面，可视化设计的结果是最终生成一幅能够显示在显示器（或其他输出设备）上的彩色图像，因而可视化结果的表达力与视觉美感依赖于设计者对于颜色的准确使用。

光学理论上的颜色和物理生理学有关，是由可见光（电磁能）经过周围环境的相互作用后到达人眼，并经过一系列的物理和化学变化转化为人脑所能处理的电脉冲结果，最终形成对颜色的感知。颜色感知的形成是一个复杂的物理和心理相互作用的过程，也就是说，人类对颜色的感知不仅由光的物理性质决定，也受到心理等因素的影响。另外，人类对颜色的感知也会受到周围环境的影响。

2.2.1 颜色刺激理论

2.2.1.1 人眼与可见光

可见光指能被人眼捕获并在人脑中形成颜色感知的电磁波，其在整个电磁波波谱上只占很小的一部分。复色光经过色散系统（如棱镜）进行分光后，依照光的波长（或频率）的大小顺序排列形成彩色图案（如图2.14所示）。

历史上，著名的太阳光色散实验由英国科学家艾萨克·牛顿爵士于1665年完成，使得人们第一次接触到光的客观的可定量的特征。通常人眼能够感知的可见光波长为390～750nm[Starr2006]。然而，可见光波谱并未包含人眼所能分辨的所有颜色，某些颜色如粉红、洋红等并未出现在可见光波谱中，这些颜色称为合成色，即它们可以通过不同波长的光谱色（即纯色，也称单色）合成得到。

人眼是人类对于环境中大部分信息的获取通道。从外表看，成年人的眼睛是一个直径约为23mm的近似球状体。如图2.15左图所示的是人眼构造水平截面图，光线依次经过角膜、虹膜、瞳孔、晶状体，最终到达视网膜。人眼由六块运动控制肌肉固定，这些肌肉控制人眼方向以便观察环境中的物体，同时保证眼球在人体头部运动时的稳定性 [Ward2009]。

人眼的光学系统类似于日常生活中的照相机系统。角膜作为人眼光学系统的最外层，将光线聚焦于晶状体的同时，保护着人眼内部的其他构造；瞳孔由径向肌肉控制其开口大小，光线穿过虹膜后经过瞳孔，可以控制光线的接收量，类似照相机系统中的光圈结构 [Levine1985]；晶状体则是人眼光学系统中的凸透镜，由睫状肌调节其焦距，从而使人能够聚焦所看的物体；最后光线到达视网膜，由视网膜上数以亿计的光感受细胞捕获并通过一条视觉总神经连接大脑，经过复杂的物理和化学变化形成对所观察事物的外观感知（形状、颜色等）。

生理学的研究表明，人眼视网膜上的光感受细胞主要分为两种——杆状细胞和锥状细胞 [Levine1985]，其中杆状细胞的数量达到了75×106～150×106，锥状细胞则有6×106～7×106，它们均匀地分布在眼球后半部靠近中心的位置。在视网膜的中央，有一处黄斑中心凹（见图2.15左图）仅存在锥状细胞，且密度相当高，约达到147000个/毫米 [Glassner1995]，因此，视网膜的这一区域具有最清晰的视觉。由于视网膜包含的两种细胞数量有限，因此在给定的时间内人眼所能接受的视觉信息量也是有限的。

杆状细胞是视网膜上受光刺激最敏感的感受细胞，比锥状细胞对光的刺激要敏感10倍以上，因此其通常具有很强的暗视觉（Scotopic Vision）。杆状细胞被认为是无法感知颜色信息的，因此其视觉一般是灰度视觉，所能感应的可见光范围为400～700nm[Levine1985]。杆状细胞通过成簇工作使其在较弱光照下同样具有很好的敏感性，然而在白天，杆状细胞得到的视觉刺激已经超饱和，因此不对人的视觉感知产生贡献 [Glassner1995]。

相反，锥状细胞仅对明亮光线产生刺激反应，从而形成了明视觉（Photopic Vision）。由于每个锥状细胞单独与一条视觉神经相连，因此其具有清晰的视觉能力。人眼具有三种类型的锥状细胞，分别对不同波长的可见光的刺激表现出不同的敏感性。根据锥状细胞对长波长、中波长和短波长可见光的不同敏感性，这三种类型分别被称为L锥状细胞、M锥状细胞和S锥状细胞，每种锥状细胞对应的最敏感的波长区域分别为564～580nm、534～545nm和420～440nm（如图2.15所示）[Glassner1995]。虽然S锥状细胞的数量要远少于其他两种类型的锥状细胞，但是人眼依然能够分辨可见光波谱上的所有颜色 [Overington1992]。

2.2.1.2 颜色与视觉

从物理学角度而言，光的实质是一种电磁波，本身是不带颜色的，所谓颜色只是人的视觉系统对所接收到的光信号的一种主观的视觉感知。物体所呈现的颜色由物体的材料属性、光源中各种波长分布和人的心理认知所决定，因此存在个体差异。所以，颜色既是一种心理生理现象，也是一种心理物理现象。

关于颜色视觉理论，主要存在两个互补的理论：三色视觉理论与补色过程理论。三色视觉理论认为人眼的三种锥状细胞（L锥状细胞、M锥状细胞和S锥状细胞）分别优先获得相应敏感波长区域光信号的刺激，最终合成形成颜色感知。补色过程理论则认为人的视觉系统通过一种对立比较的方式获得对颜色的感知：红色对应绿色，蓝色对应黄色，黑色对应白色。这两个理论分别阐述了人眼形成颜色感知的过程。

2.2.1.3 颜色视觉障碍

颜色视觉障碍指在正常光照条件下，人眼无法辨认不同的颜色，或者对于颜色辨认存在不同程度的障碍，其分为非正常三色视觉（通常称之为色弱）、二色视觉（即色盲）和单色视觉（非常少见）。颜色视觉障碍人数约占世界人口的8%，其中色盲人数所占比例超过2%。该比例在全球各区域的分布上略有差异 [Gegenfurtner2001]。颜色视觉障碍是一种隐性遗传疾病，其基因由X染色体携带（也有极少部分是后天形成的，如视觉神经或相关脑组织损伤所造成的视觉障碍），因此在男性人口中的发病率要显著高于女性 [Gegenfurtner2001]。

非正常三色视觉（色弱）是颜色视觉障碍中最为常见的（约占人口总数的6%），主要表现为对颜色的辨认准确性下降和对不同颜色的分辨能力下降。该症状主要由视网膜上的某一种类型锥状细胞的功能发生变化或轻微受损引起的，根据锥状细胞的类型可以分为红色弱、绿色弱和蓝色弱三种。红色弱是由于L锥状细胞对光的敏感性发生变化造成的，引起人眼对红-绿色调的分辨障碍，在男性人口中约占1%。绿色弱则是M锥状细胞对光的敏感性发生变化造成的，同样引起了人眼对红-绿色调的分辨障碍，占男性人口的5%。红色弱和绿色弱统称为红-绿色弱。蓝色弱在人群中的比例相当稀少，由于S锥状细胞对光的敏感性变化引起了蓝-黄色调的分辨障碍，研究表明它可能不是性别相关的。

在日常生活中，二色视觉即为通常所说的色盲，其起因为三种锥状细胞中的某一种类型完全无法工作或不存在，从而导致人眼的视觉空间从三维变为二维，影响人眼对颜色的感知。红色盲、绿色盲分别是由L锥状细胞和M锥状细胞无法工作或缺失造成的，它们在具体颜色识别表现上存在一定的差异，但都使得人眼无法分辨红、绿色调，因此通常统称为红绿色盲。蓝色盲出现概率相当小，有时也被称为第三色盲。通过对单眼色盲测试对象进行颜色识别的研究，研究人员已经总结了一些模拟二色视觉的计算模型 [Brettel1997]（模型的模拟效果如图2.16所示），从而在一定程度上方便了颜色相关的设计者在进行配色方案设计时，能够充分考虑到约占总人口2%的二色视觉患者的需求。单色视觉是颜色视觉障碍中最严重的一种情形，日常生活中称之为全色盲，人眼已经几乎无法辨认颜色。

由于颜色视觉障碍人口在总人口中所占比例较高，因此在设计可视化颜色方案时，需要充分考虑可视化结果的用户群体特征，尽可能使用有效的颜色配置方案，使得可视化结果对于所有的用户都能呈现其所包含的信息。

2.2.2 色彩空间

色彩空间（也称色彩模型或色彩系统）是描述使用一组值（通常使用3个或4个值）表示颜色的方法的抽象数学模型。人眼的视网膜上存在三种不同类型的光感受器（即三种锥状细胞），所以原则上只要三个参数就能描述颜色。例如，在三原色加法模型（如常见的RGB色彩模型）中，如果某一种颜色与另一种混合了不同分量的三种原色的颜色表现出相同的颜色，则认为这三种原色的分量是该颜色的三色刺激值。

设计人员或者可视化系统的用户经常需要为一些可视化元素设置适当的颜色，以达到用颜色编码数据信息的目的，这通常就需要一个良好且直观的界面使得用户可以直接操作、选择各种颜色。由于某些历史原因，在不同的场合下存在着不同的颜色定义方式，因而所使用的色彩空间也就不尽相同。比如日常使用的显示器使用的是sRGB色彩空间，而打印机则使用CMYK色彩空间。大部分色彩空间所能表达的颜色数量通常都无法完整枚举人眼所能分辨的颜色数量，不同色彩空间之间通常存在有损或无损的数学转换关系。目前，常用的色彩空间主要包括CIEXYZ色彩空间、CIEL*a*b*色彩空间、RGB色彩空间、CMYK色彩空间和HSV/HSL色彩空间等多种。

2.2.2.1 CIE XYZ/CIE L*a*b*

CIE 1931 XYZ色彩空间是采用抽象数学模型定义的通过实验获得的色彩空间。实验使用2度视角的圆形屏幕，屏幕的一半投影上测试颜色，另一半投影上观察者可调整颜色。可调整颜色是三种原色的混合，它们每个都有固定的色度，但有可调整的明度。标准观察者通过改变三种原色光的明度，得到与测试颜色完全相同的颜色感知；然而并不是所有的颜色都可以通过这种方式进行匹配，当测试颜色没有合适匹配时，测试者可以使用一种原色增加到测试颜色上，然后用余下的两种原色混合与之匹配，在这种情况下，增加到测试颜色上的原色的明度值被认为是负值。上述实验过程就是CIE规定的标准观察者测试。当测试颜色是单色的时候（即光谱上的颜色，具有单一波长），分别记录三种原色的明度值，并将之绘制成关于波长的函数，这三个函数被称为关于这个特定的观察实验的“颜色匹配函数”，记作（如图2.17所示）。在CIE标准观察者实验中，规定这三种原色的波长分别为700nm（红色）、546.1nm（绿色）和435.8nm（蓝色）。

由于实际上不会存在负的光强，1931年国际照明委员会（法语的缩写为CIE）根据CIE RGB颜色空间的规定，通过定义三种假想的标准原色X（红）、Y（绿）、Z（蓝）构造了CIE XYZ颜色系统，使得到的颜色匹配函数都是正值。

CIE 1931 XYZ色彩空间的一个问题是它没有给出估算颜色差别的直接方式，也就是说，在该色彩空间中，两种颜色的X、Y、Z之间的相互欧式距离不代表两种颜色的感知差异。它的改进版本CIE L*a*b*色彩空间完全基于人类的视觉感知而设计，致力于保持感知的均匀性，特别地，它的L*值的分布紧密匹配人类眼睛关于亮度的感知，允许人们通过修改a*和b*分量的色阶对颜色做出精确的调节。CIE L*a*b*色彩空间的色域（一个技术系统能够产生的颜色总和）比人类视觉还要大，因此其所表示的某些“颜色”不能在物理世界中找到对应的客观存在。

2.2.2.2 RGB/CMYK

RGB色彩模型采用笛卡尔坐标系定义颜色，三个轴分别对应红色（R）、绿色（G）和蓝色（B）三个分量。在该空间中，坐标原点代表黑色，任一点代表的颜色都用从坐标原点到该点的向量表示。RGB色彩空间是迄今为止使用最广泛的色彩空间，几乎所有的电子显示设备，包括计算机显示器、移动设备显示组件等，都使用RGB色彩空间。RGB色彩空间是设备相关的色彩空间，即同一组R、G、B分量的值在不同设备上所展现的颜色不一定相同。另外，RGB色彩模型是一种加法原色模型，也就是说，颜色可以通过在黑色背景上混合不同强度的红色、绿色、蓝色获得，如图2.18（a）所示。在目前主流的电子显示设备LCD（Liquid Crystal Display）或OLED（Organic Light-Emitting Diode）中，像素由三个红、绿、蓝的子像素组成，通过电路控制子像素的亮度实现颜色的显示（如图2.18（b）所示）。

CMYK通常用于印刷行业中，在硬拷贝、照相、彩色喷墨打印等系统中具有广泛的应用。CMYK四个字母分别表示青色（Cyan）、品红色（Magenta）、黄色（Yellow）和黑色（Black）。在实际的印刷环境中，理论上C、M、Y三种颜色的合成可以得到黑色，但是通常由于油墨中含有杂质或其他因素，得到的黑色往往呈现出深褐色或深灰色的现象。另外，三种颜色的打印也不利于输出纸张的立即干燥且需要非常精确的套印技术，而使用黑色油墨代替可以极大地节省成本。与RGB色彩模型相反，CMYK色彩模型是一种减法原色模型（如图2.18（c）所示），通过在白色背景上套印不同数量的三种油墨，通过吸收光源中相应波长的方法得到反射颜色。根据不同的油墨、介质和印刷特性，存在多种CMYK色彩空间。

由于印刷和计算机屏幕显示使用的是不同的色彩模型，计算机一般使用RGB色彩空间，所以在计算机屏幕上看到的影像色调和印刷出来的有一些差别（如图2.18（d）所示），主要原因是这两种色彩模型所能表示的色域不同。在进行可视化设计的过程中，如果可视化的结果需要被打印到纸质媒介上，则必须考虑颜色在不同色彩空间之间转换所带来的色彩畸变，从而尽量避免这种现象。

近年来，鉴于传统RGB技术呈现纯白色时不够光亮及较为耗电，不少公司纷纷研发出没有颜色过滤物料的子像素，形成纯白色，并把有关技术称为RGBW，如三星的PenTile和索尼的WhiteMagic。

2.2.2.3 HSV/HSL

RGB色彩空间和CMYK色彩空间分别使用了加法原色模型和减法原色模型，以原色组合的方式定义各自色彩空间所规定的所有颜色，然而这样的方式没有遵循人类的感知方式。一般来说，人类对于颜色感知的方式通常包括三个问题：是什么颜色？深浅如何？明暗如何？另一方面，艺术家通常也不偏好使用这些无法用语言描述的原色模型，正是因为这些色彩模型对于颜色的定义方式不符合人类对颜色认知的思维过程。例如，在图2.19左图所示的RGB色彩空间立方体中，当（r,g,b）=（1/5,3/5,4/5）时，所呈现的颜色是天空蓝，然而人类却很难记住所有的原色组合所形成的颜色感知；反过来，给定某一测试颜色，人们也很难给出该颜色的三个具体的分量值。

在艺术创作中，画家一般采用色泽、色深、色调等概念进行配色，通过在给定颜色中掺入白色获得色泽，掺入黑色获得色深，同时调节则可以获得不同的色调。为此，Alvy Ray Smith于1978年开发了HSV色彩空间，同时Joblove和Greenberg共同开发了HSL色彩空间。在1979年的ACM SIGGRAPH（美国计算机协会计算机图形专业组）年度会议上，计算机图形学标准委员会推荐将HSL色彩空间用于颜色设计。这两个色彩空间在计算机图形学领域中非常有用，不仅仅是因为它们比RGB色彩空间更加直观且符合人类对颜色的语言描述，同时也是因为它们与RGB色彩空间的转换非常快速。如图2.19右图所示的就是一个常见的Windows操作系统中画图程序的颜色选择的交互界面，在交互界面上进行颜色选择比在图2.19左图所示的RGB色彩空间中选择颜色更容易且直观。

HSV/HSL色彩空间是两个不同的色彩空间。在HSV色彩空间中，H指色相（Hue）,S指饱和度（Saturation）,V指明度（Value）。降低饱和度相当于在当前颜色中加入白色，而降低明度相当于在当前颜色中加入黑色。在HSL色彩空间中，L表示亮度（Lightness）。HSV色彩空间和HSL色彩空间可以用圆柱体坐标系表示，如图2.20所示。在圆柱体坐标系中，角度坐标代表色相，从0°表示的红色开始，经过120°表示的绿色，240°表示的蓝色，最终回到360°（=0°）表示的红色，60°、180°和300°分别表示第二主色—— 黄色、青色和品红色。在HSL和HSV圆柱体中，中轴由无色相的灰色组成，明度值或亮度值从0表示的黑色到1表示的白色。在HSV色彩空间中，具有饱和度值1和明度值1的颜色在HSL色彩空间中的亮度值为1/2。

注意到在HSL色彩模型中，非常亮的颜色和非常暗的颜色具有同样的饱和度。例如，用HSL描述的颜色＜0,1.000,0.102＞和＜300,1.000,0.965＞都具有相同的饱和度值1（用RGB色彩模型可以分别描述为＜51,0,0＞和＜255,238,255＞），而这与人类关于颜色纯度的直观感知略有违背。因此，可以引入一个称为色度（Chroma）的概念，然后使用双圆锥体表示HSL色彩空间。因此，上述两种颜色的色度值都小于1。相应地，用圆锥体表示HSV色彩空间（如图2.21所示）。

2.2.2.4 绝对色彩空间与相对色彩空间

绝对色彩空间是指不依赖于外部因素就可以准确地表示颜色的色彩空间，而相对色彩空间无法通过一组值准确地表示颜色，即相同的值未必能使人得到相同的色彩感知。

CIE L*a*b*定义的是一个绝对色彩空间，一组＜L*,a*,b*＞值就能定义一种精确的颜色，也就是说，只要在这个色彩空间规定的观察条件下，这一组＜L*,a*,b*＞所代表的颜色就是确定的。

非绝对色彩空间的例子有RGB色彩空间。虽然RGB色彩空间通过红、绿、蓝的混合生成各种颜色，但这些颜色没有精确的定义。也就是说，在两个不同的计算机显示器或其他RGB设备上，同一个RGB图像可能看起来会非常不同。将RGB色彩空间转换为绝对色彩空间的一种方法是定义一个International Color Consortinum（ICC）色彩配置文件，以规定R、G、B的精确属性。这种做法已成为业界的标准方法，目前被广泛采纳的绝对RGB色彩空间有sRGB色彩空间、Adobe RGB色彩空间等。

2.3 视觉编码原则

可视化将数据以一定的变换和视觉编码原则映射为可视化视图。用户对可视化的感知和理解通过人的视觉通道完成。在可视化设计中，对数据进行可视化（视觉）元素映射时，需要遵循符合人类视觉感知的基本编码原则，这些原则跟数据类型紧密相关。在通常情况下，如果违背了这些基本原则，将阻碍或误导用户对数据的理解。

2.3.1 相对判断和视觉假象

人类感知系统的工作原理决定于对所观察事物的相对判断。例如在日常生活中（专业领域除外），人们通常会选取一个参照物，而将另外一个物体的尺寸描述为其相对于参照物的尺寸的变化量，并将比较结果描述成“A比B长大约2厘米”或“C比D要大一些”这样的形式。Weber定律描述了这一现象：人类感知系统将可察觉的刺激强度的变化δl表达为一个目标刺激强度l的一个固定的百分比K，即K=δl/l。然而，精确地进行相对判断是有条件的，即如果物体使用相同的参照物或者相互对齐进行判断，则会有助于人们做出准确的相对判断。当两条线段被随意地放置在一个平面中时，很难判断它们的长短，因为它们既没有相同的参照物，也没有进行端点的对齐以便比较长短（见图2.22（a））。当在它们附近各放置一条相同长度的线段，并与它们进行对齐时，判断原先两条线段就会变得容易。新添加的线段充当了参照物的作用，并转移了读者进行比较的目标：此时读者会倾向于比较图中A、B线段分别和C线段之间的差异长度，并以此推断A、B线段的本身长度差异（见图2.22（b））。同样的，当把两条线段的一个端点对齐且平行放置后，这两条线段将互为参照物，它们之间的长度比较也就变得容易了（见图2.22（c））。图2.23则展现了一个可视化实例：将美国政府的1万亿美元债务以100美元现金形式表现，这些现金占用的场地。

视觉假象（Visual Illusion）是指人们通过眼睛所获得的信息被大脑处理后形成的关于事物的感知，与事物在客观世界中的物理现实并不一致的现象。相对判断给用户提供了一种定性判断的有效手段，然而不合理地设定事物的上下文环境，会导致判断真实性的失效。在图2.24中，线段A和线段B具有完全相同的长度，然而由于透视的上下文环境的设置，在感知上人们更容易得到A比B短的伪结论。

另外，一些视觉实验表明，感知系统对于亮度和颜色的判断完全是基于周围环境的，即人眼是通过与周围亮度和颜色的对比获得对焦点处亮度和颜色的感知的，因此在这种情况下，视觉假象将更加突出。例如，如图2.25（a）所示为美国麻省理工学院教授Edward Adelson发布的一个阴影假象图像，被标记的两个正方形格子A和B看上去具有明显不同的灰度（B比A亮）。然而，通过增加一个灰色条带连接A和B（见图2.25（b））或覆盖图中除正方形A和B以外的区域（见图2.25（c）），可以发现，正方形A和B实际上具有相同的亮度。这主要是因为，人们对于色块A和B的亮度的判断完全是基于它们的周围色块进行的。人们对于颜色的判断也会受到周围环境的影响，图2.26左图展示了经过两种不同颜色滤镜处理的色彩魔方，右图则展示了将左图中色彩魔方的部分色块遮盖后的结果，不难发现，左图中给大脑形成了两种不同颜色的色块（深蓝色和暗黄色），它们实际上是一样的灰色。

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

2.3.2 标记和视觉通道

可视化编码（Visual Encoding）是信息可视化的核心内容，是将数据信息映射成可视化元素的技术，其通常具有表达直观、易于理解和记忆等特性。数据通常包含了属性和值，因此，类似地，可视化编码由两方面组成：标记（图形元素）和用于控制标记的视觉特征的视觉通道。前者是数据属性到可视化元素的映射，用于直观地代表数据的性质分类；后者是数据的值到标记的视觉表现属性的映射，用于展现数据属性的定量信息，两者的结合可以完整地对数据信息进行可视化表达。

在可视化中，标记通常是一些几何图形元素，如点、线、面、体等（如图2.27上图所示）；标记具有分类性质，因此不同的标记可用于编码不同的数据属性。视觉通道则用于控制标记的展现特征，从定量的角度描述标记在可视化图像中的呈现状态。通常可用的视觉通道包括标记的位置、大小、形状、方向、色调、饱和度、亮度等（如图2.27下图所示）。视觉通道不仅具有分类性质，也具有定量性质，因此一个视觉通道可以编码不同的数据属性（如形状），也可以用于编码一个属性的不同值（如长度）。另外，作用于一个标记的多个视觉通道结合则可以用于编码多个属性或一个属性的多个子属性。

标记可以根据空间自由度进行分类，比如点具有零自由度，线、面、体分别具有一维、二维和三维自由度。视觉通道与标记的空间维度之间是相互独立的，视觉通道在控制标记的视觉特征的同时，也蕴含着对数据的数值信息的编码。人类感知系统则将标记的视觉通道通过视网膜传递到大脑，处理并还原其中包含的信息。

图2.28中列举了一个应用标记和视觉通道进行信息编码的简单例子。图2.28（a）表示了三个不同班级的数学平均分，该数据可以简单地使用柱状图表示，柱（矩形标记）编码了数学平均分这一属性，高度（视觉通道）编码了数学平均分这一属性的数据值。现在，需要增加语文平均分这一属性的可视化展示，我们可以通过一个竖直位置和一个水平位置分别编码数学平均分和语文平均分这两个属性（如图2.28（b）所示），从而形成了一个散点图（Scatter Plot）。散点图通过控制点在二维空间的精确位置，很好地展现了数据属性的值。然而，注意到事实上班级也是数据的一个重要属性，而这一属性在图2.28（b）中被忽略了，因此我们引入颜色作为第三个视觉通道，用于编码班级这一属性（如图2.28（c）所示）。如果此时需要展示班级的人数，我们可以引入尺寸这一视觉通道控制点的大小以编码班级人数的属性，结果将可能如图2.28（d）所示。在这里，我们通过这个例子解释了标记和视觉通道的简单应用，但它本身并不是一个很好的可视化，事实上在图2.28（a）中直接增加表示不同属性的柱状图的方式进行可视化可以得到更加直观的可视化结果。另外，本例仅示例了标记和视觉通道的简单实用，从完整角度而言，这个例子也缺少了必要的标注，希望读者注意。

图2.28所示的例子采用一个视觉通道编码一个数据的属性，多个视觉通道同样可以为展示一个数据属性服务。虽然这样做可以让用户更加容易地接收到可视化所包含的信息，但在可视化设计时能够利用的视觉通道是有限的，过度地使用视觉通道编码同一个数据属性可能会导致视觉通道被消耗完而无法编码其他数据属性。

标记的选择通常基于人们对于事物理解的直觉感知。然而，不同的视觉通道在表达信息的作用和能力上可能具有截然不同的特性，例如人们在理解长度上能够比理解面积更精确。为了更好地分析视觉通道编码数据信息的潜能并将之利用以完成信息可视化的任务，可视化设计人员首先必须了解和掌握每个视觉通道的特性，以及它们可能存在的相互影响，例如，在可视化设计中应该优选哪些视觉通道？具体有多少不同的视觉通道可供使用？某个视觉通道能编码什么信息，能包含多少信息量？视觉通道表达信息能力的区别？哪些视觉通道互不相关而哪些又相互影响？等等问题。只有熟知视觉通道的特点，才能设计出有效解释数据信息的可视化。

2.3.3 视觉通道的概念

视觉感知系统是迄今为止人类所知的具有最高处理带宽的生物系统。人眼具有很强的模式识别能力，对可视化符号的信息获取能力远高于对文本和数字的直接识别。将数据信息以可视化视图进行呈现，其关键步骤是对数据信息进行编码，即将数据属性以标记呈现后，通过视觉通道控制标记的呈现方式。本节主要描述视觉通道的重要概念。

视觉通道的类型。数据通常以有序的和分类的两种形式存在，而视觉通道在表现上也存在两种不同的功能，例如，颜色的色调通常用于表现分类而无序的数据，而同一颜色的不同亮度却更多地用来表现顺序性。因此，合理使用不同的通道展现数据所包含的信息，对于数据可视化而言是非常重要的基础。

视觉通道的表现力。视觉通道的表现力主要定义为视觉通道在编码数据信息时，需要表达且仅表达数据的完整属性。一般而言，可以从视觉通道编码信息时的精确性、可辨性、可分离性和视觉突出等方面衡量不同视觉通道的表现力。

视觉通道的有效性。不同的视觉通道具有不同的表现力，而一个好的可视化设计需要根据每个数据属性的重要性，使用合适的视觉通道进行编码，即利用具有高表现力的视觉通道编码更重要的数据属性，从而使用户可以更容易地获取数据中的相对重要信息。

根据表现力和有效性对视觉通道的排序。由于视觉通道在编码数据信息时所表现的不同特性，将视觉通道按照它们的表现力和有效性进行排序后，将有助于用户在设计信息可视化时方便、快速地选择合适的视觉通道，以及它们的组合，完整地展现数据包含的信息。

2.3.3.1 视觉通道的类型

人类感知系统在获取周围信息的时候，存在两种最基本的感知模式。第一种感知模式得到的信息是关于对象的本身特征和位置等，对应于视觉通道的定性性质或分类性质，即描述对象是什么或在哪里。第二种感知模式得到的信息是关于对象的某一属性在数值上的程度，对应于视觉通道的定量性质或定序性质，即描述对象某一属性的具体数值是多少。例如，形状是一种典型的定性视觉通道，即人们通常会将形状分辨成圆、三角形或矩形，而不是描述成大小或长短；另一方面，给定这三种形状，人们也无法给出一个确切的顺序。长度则是典型的定量视觉通道，用户显然会直觉地用不同长度的直线描述同一数据属性的不同值，而很少用它们描述不同的数据属性，因为长线、短线都是直线。

在可视化设计中，一些视觉通道被认为属于定性的视觉通道，例如形状、颜色的色调、空间位置，而大部分的视觉通道更适合于编码定量的信息，例如直线长度、区域面积、空间体积、斜度、角度、颜色的饱和度、亮度等。然而，视觉通道的两类性质不具有明确的界限，例如，当把空间中的两个点到某一选定点的距离编码数据信息时，空间位置也能用来描述定量的数据属性。

视觉通道的第三种性质是分组性质。分组通常是针对多个或多种标记的组合描述的。最基本的分组通道是接近性，根据格式塔原则（参见2.1.3节），人类的感知系统可以自动地将相互接近的对象理解为属于同一组。在图2.29（a）和图2.29（b）中，人们总是会试图根据这些点的相对位置对它们进行分组；很显然，在图2.29（b）中，这一分组期望被实现了，人们很少会将它们看成独立的10个点。除了利用位置上的接近性，视觉通道的分组性质还可以通过颜色的相似性、显式连接、显式包围等方法实现，分别如图2.29（c）、（d）、（e）所示。

从方法学上而言，定性的视觉通道适合编码分类的数据信息，定量或定序的视觉通道适合编码有序的或者数值型的数据信息，而分组的视觉通道则适合将存在相互联系的分类的数据属性进行分组，从而表现数据的内在关联性。

2.3.3.2 表现力和有效性

视觉通道的性质类型（定性、定量、分组）基本决定了不同的数据所采用的视觉通道，而视觉通道的表现力和有效性则指导可视化设计者如何挑选合适的视觉通道，对数据信息进行完整而具有目的性的展现。简单地说，用表现力更高的视觉通道编码数据中更重要的数据属性，将有助于提高可视化结果的有效性。

视觉通道的表现力要求视觉通道仅仅编码数据包含的所有信息。也就是说，视觉通道在对数据进行编码的时候，需要尽量忠于原始数据所包含的信息。例如，对于有序的数据，为了利用人类感知系统的自然而本能的感知能力，使用定序的而非定性的视觉通道对数据进行编码，反之亦然。如果随意使用视觉通道编码数据信息，不仅无法利用视觉通道的表现力，反而会使用户无法理解或错误理解可视化结果。

人类感知系统对于不同的视觉通道具有不同的理解与信息获取能力，因此可视化设计者就应该很自然地使用高表现力的视觉通道编码更重要的数据信息，从而使得可视化的用户可以在更短的时间内更加精确地获取数据信息。例如，在编码数值的时候，使用长度比使用面积更加合适，因为人们的感知系统对于长度的模式识别能力要强于对于面积的模式识别能力。读者不妨试一试，在一张纸上分别画一个10厘米长度的线段和一个20平方厘米的矩形，然后比较一下精确度。视觉通道的有效性要求具有高表现力的视觉通道用于更重要的数据属性编码。如图2.30所示是可视化领域内专家总结的比较通用的视觉通道的表现力排序 [Munzer2012]。需要特别指出的是，这个顺序仅代表了在大部分情况下的正确性，而根据实际数据的特点和可视化设计的方法，各个视觉通道的表现力顺序也有可能存在相应的变化。

2.3.3.3 表现力判断标准

精确性

精确性标准主要描述了人类感知系统对于可视化的判断结果和原始数据的吻合程度。来自心理物理学的一系列研究表明，人类感知系统对不同的视觉通道感知的精确性不同，总体上可以归纳为一个幂次法则，其中的指数与人类感觉器官和感知模式相关。

表2.1列举了根据心理物理学的史蒂文斯幂次法则 [Stevens1986]所描述的一些视觉通道的幂次，用数学公式可以描述为S=In。其中，S表示大脑所得到的感知结果，I表示感觉器官所感受到的刺激值，n的范围从亮度的0.5到电流值的3.5不等。当n值小于1时，刺激信号被感知压缩，也就是说，改变刺激人体感觉器官的物理强度值并不能使得人对信号的感知得到成比例的响应。例如，亮度变化是典型的次线性物理信号，对亮度加倍后，人们并不能感到相应的两倍的亮度变化，这在一定程度上是因为人眼具有很高的宽容度和环境适应能力；相反，（通过人体指尖的）电流值则是超线性物理信号，加倍通过人体的电流值会带来超过三倍的感知上的变化；长度是线性的物理测量，也就是说，长度的测量值变化量与人类对长度的主观感知变化存在线性的联系。视觉通道的不同精确性影响了可视化对数据信息的还原程度，因此在表达定量数据的时候，通常会优先采用例如一端对齐的射线的长度或柱状的高度进行表示。

可辨认性

视觉通道可以具有不同的取值范围，然而如何调整取值使得人们能够区分该视觉通道的两种或多种取值状态，是视觉通道的可辨认性问题。换句话说，这个问题相当于如何在给定的取值范围内，选择合适数目的不同取值，使得人们的感知系统能够轻易地区分它们。

某些视觉通道只有非常有限的取值范围和取值数量。例如直线宽度，人们区分不同直线宽度的能力非常有限，而当直线宽度持续增加时，会使得直线变成其他的视觉通道——面积。图2.31显示了直线宽度仅能编码几种不同的数据属性值。当数据属性值的空间较大时，正确的做法是将数据属性值分为相对较少的类，或者使用具有更大取值范围的视觉通道。

可分离性

在同一个可视化结果中，设计者通常会同时表达数据的多个属性以方便对数据的分析及比较，而一个视觉通道的使用可能会影响人们对另外视觉通道的正确感知，从而影响用户对可视化结果的信息获取。例如，在使用横坐标和纵坐标分别编码数据的两个属性的时候，良好的可视化设计就不能使用点的接近性对第三种数据属性进行编码，因为这样的操作对前两种数据属性的编码产生了影响。

视觉通道的可分离性特征描述了其在被用于表达数据属性的时候，两两之间的干扰现象。一般而言，视觉通道的类型决定了它们之间在定义上的可分离性，然而由于人类视觉系统的特点，两个视觉通道的干扰现象会在某些条件下被放大而显现出来。例如，人们能更容易地区分适当尺寸的形状通道上的颜色，而难以区分较小尺寸的形状通道上的颜色，如图2.32所示。在左图中，相对于图像尺寸和人眼的感知能力，圆的尺寸比较合适，因此圆的颜色也比较容易区分（紫色和蓝色）；而在右图中，圆的尺寸被缩小后，其颜色的区分度也相应地受到干扰。因此，在可视化设计原则中，对于一个可视化结果中的不同数据属性的展现，应尽量选择可分离性好的视觉通道进行可视编码。

视觉突出

视觉突出是指仅仅在很短的时间内（200～250ms），人们可以仅仅依赖感知的前向注意力（Preattentive）直接发觉某一对象和其他所有对象的不同。这里所说的前向注意力是指人的一种无意识的信息积累和处理。在信息可视化中，视觉突出效果使得人们对特殊对象的发现所需要的时间不会随着背景对象的数量变化而变化。我们通常所说的“万绿丛中一点红”，仅从字面意义上理解就是指从颜色这一视觉通道而言，人们可以非常快速地从绿色的干扰物体中发现红色的目标物体。例如，在图2.33的左边两个例子中，人们通常可以根据图中圆的颜色，在很短的时间内发现红色的目标圆点，并且不管红色的圆在图像中的位置如何，或者绿色的圆的数量如何，前向注意力都能起作用。因此，颜色通常被用于需要视觉突出的可视编码。同时，颜色也并非是唯一的可被用于视觉突出的通道。在图2.33的右边两个例子中，人们仍然可以根据图中形状元素的曲率的区别（圆和正方形），从干扰元素（圆）中找到目标元素（正方形）。但是我们可以发现，当干扰元素的数量增加后，视觉突出的效果会被削弱，因为在这个例子中，色调视觉通道的表现力往往要大于形状通道的表现力。

2.3.4 视觉通道的特性

在可视化设计中，相同的数据属性可以使用不同的视觉通道进行编码，然而，由于各个视觉通道特性的差异，当可视化结果呈现给用户时，被用户的感知与认知系统处理并获取的信息不尽相同。合理地使用视觉通道是设计优秀的信息可视化的关键因素，因此，本节主要讨论各个视觉通道的一些特性，以指导设计者在设计信息可视化时能够合理地利用视觉通道对数据信息进行编码。

2.3.4.1 平面位置

平面位置是图2.30中唯一的既可用于编码分类的数据属性，又可用于编码定序或定量的数据属性的视觉通道。另外，对象在平面上的接近性也可以用于编码分组的数据属性。平面位置是所有视觉通道中最特殊的一个。由于可视化设计大多在二维空间，平面位置对于任何数据都非常有效，甚至是最有效的。因此，使用平面位置编码哪种数据属性是设计者首先面临并需要解决的问题，其结果甚至将直接主导用户对于可视化结果图像的理解。

水平位置和垂直位置属于平面位置的两个可以分离的视觉通道，当需要编码的数据属性是一维时，可以仅选择其一。水平位置和垂直位置的表现力与有效性的差异比较小，但也有不少研究指出，受真实世界中重力效应的影响，垂直位置会比水平位置具有略高的优先级，即在相同条件下人们更容易分辨出高度的差异。基于此考虑，显示器的显示比例通常被设计成包含更多的水平像素，从而使水平方向的信息含量可以与垂直方向的信息含量相当。

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

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

2.3.4.2 颜色

在所有的视觉通道中，颜色是最复杂的，也是可以编码大量数据信息的视觉通道之一，因此在可视化设计中也最常用。关于颜色的感知原理和基本理论，已在前面的章节中讲述了，这里主要关心其作为视觉通道的一些特性。

从可视化编码的角度对颜色进行分析，可以将颜色分为亮度、饱和度和色调三个视觉通道，其中前两个可以认为是定量或定序的视觉通道，而色调属于定性的视觉通道。在使用一般术语“颜色”时，通常指的是这三个独立的视觉通道的结合整体，因此可以认为“颜色”既是分类的也是定量的视觉通道。

亮度

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

饱和度

饱和度是另一个适合于编码有序数据的视觉通道。作为一个视觉通道，饱和度与尺寸视觉通道之间存在非常强烈的相互影响，在小尺寸区域上区分不同的饱和度明显要比在大尺寸区域上区分困难得多。和亮度一样，饱和度识别的精确性也受到对比度效果的影响。

在大块区域内（如背景），标准的可视化设计原则是使用低饱和度的颜色进行填充；对于小块区域，设计者需要使用更亮的、饱和度更高的颜色填充，以保证它们可以比较容易地被用户辨认。点和线是典型的小块区域的标记，因此使用饱和度编码具有不同意义的点和线时能够容易被辨认的饱和度层次较低，通常只有三层；对于大区域的标记，如面积，可以使用的饱和度层次则会略多。

色调

色调非常适合于编码分类的数据属性，并且也提供了分组编码的功能。虽然在表现力排序上（见图2.30）处于“位置”之后，但可以为可视化增加更多的视觉效果，在实践中被广泛使用。

然而，色调和饱和度都面临着与其他视觉通道相互影响的问题。例如，在小尺寸区域中人们难以分辨不同的色调。同样地，在不连续区域中的色调也难以被准确地比较和区分。一般情况下，由于色调属于定性的视觉通道，因此色调具有比亮度和饱和度更多的可区分层次，人们在不连续区域的情况下通常可以分辨多达6～12种色调，在小尺寸区域着色的情况下，可分辨的层次数量受到视觉通道相互影响而略有下降。如图2.36左图所示（与右图一样包含了21种色调），人们虽然可以通过比较而容易地区分相邻区域的不同色调，然而在总体上，由于相同和相近的色调在多个不连续的区域内出现，人们在归类相同色调的同时，也倾向于将相近的色调（如图中的一些绿色色调）划归入同一个范畴，也就是说，人们通常无法正确说出左图中包含的不同色调的数量。而图2.36右图所示的例子，由于同一色调在一个连续的区域内，因此正常色觉的用户都能对这21种不同的色调进行区分。不同的设计参考书提供了多种颜色的选择准则 [Levkowitz1997]。

配色方案

在信息可视化设计中，配色方案关系到可视化结果的信息表达和美观性。好的配色方案的可视化结果能带给用户愉悦的心情，有助于用户更有兴趣地探索可视化所包含的信息；反之，则会造成用户对可视化的抵触。另外，和谐的配色方案也能增加可视化结果的美观性 [Itten1960]。在设计可视化的配色方案时，设计者需要考虑很多因素：可视化所面向的用户群体、可视化结果是否需要被打印或复印（转为灰阶）、可视化本身的数据组成及其属性等。

由于数据具有定性、定量的不同属性，因此将数据进行可视化的时候需要设计不同的配色方案。例如，对于定性的分门别类的数据类型，通常使用颜色的色调视觉通道进行编码，因此设计者需要考虑的是如何选择适当的颜色方案，使得不同的数据能容易地被用户区分（有时候还需要考虑到视觉障碍用户的需求）；如果是定量的数据类型，则通常使用亮度或饱和度进行编码，以体现数据的顺序性质。在进行可视化设计的过程中，设计者还可以应用一些软件工具辅助配色方案的设计，例如较流行的ColorBrewer配色系统 [Harrower2003]（http://colorbrewer2.org/）（见图2.37）和Adobe公司的Kuler配色系统（http://kuler.adobe.com）。在ColorBrewer配色系统中，用户首先选择数据的分类数量（定性数据的类别数量，或定量数据的层次级别数量），然后选择数据类型（定性数据、顺序的定量数据，或发散的定量数据），选择配色方案，最后在左下角显示相应的配色方案。另外，用户在选择配色方案的时候，可以限制选择色盲友好的、打印一致的或可复印的配色方案。ColorBrewer系统能够根据定制选择出用色方案。而CARTOColors系统（https://carto.com/carto-colors/）（见图2.38）则能更加方便、快捷地给出各种不同的配色方案。

Kuler在线配色方案工具加入了社交功能，允许用户上传、下载、评价配色方案，受到不少用户的青睐。

2.3.4.3 尺寸

尺寸是定量/定序的视觉通道，因此适合编码有序的数据属性。尺寸通常对其他视觉通道都会产生或多或少的影响——尺寸变小的时候，其他视觉通道所表达的视觉效果会被抑制，例如，人们可能无法区分很小尺寸的形状，或者如前面的例子所示（见图2.32），尺寸与色调存在较强的影响。

长度是一维的尺寸，包括垂直尺寸（或称高度）和水平尺寸（或称宽度）。面积是二维的尺寸，体积则是三维的尺寸。由于高维的尺寸蕴含了低维的尺寸，因此在可视化设计中应尽量避免同时使用两种不同维度的尺寸编码不同的数据属性。

人们对于一维尺寸的判断是线性的（见表2.1），而对多维尺寸的判断则随着维度的增加而变得越来越不精确，因此在可视化设计时可以使用一维的尺寸（高度或宽度）编码重要的数据属性的值，例如柱状图等。

Alexander等人进行了一系列针对英文单词的长度、字体大小和高度的认知偏差相关实验 [Alexander2017]。通过实验发现，长度和高度会影响用户对字体大小的感知；同时相比长度而言，宽度对偏差的影响更大（见图2.39）。尽管很少有可视分析任务对字体的相关因素有像素级的高要求，但这个实验表明字体的相关参数比之前人们认为的更有用处。

2.3.4.4 斜度和角度

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

2.3.4.5 形状

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

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

2.3.4.6 纹理

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

作为一种特殊的纹理效果，点画图案在可视化中也较为常见。点画图案通常被用作区分类别型数据属性的编码方式。在二维空间的视觉通道上，点画图案与亮度视觉通道存在较为严重的影响。在传统的打印技术中，灰色可以使用不同密度的点画图案进行模拟近似，因为人们在识别点画图案和亮度的时候可能存在分歧，从而会导致一个失败的可视化结果。然而，由于彩色打印的低廉成本和流行趋势，点画图案在图像领域的应用也逐渐减少，但是在图形学和可视化领域作为一种艺术表达形式仍然具有长久的生命力（见图2.45）。

应用纹理可以避免在可视化设计中使用过多的色彩，同时也可以照顾到色盲、色弱用户的理解。Textures.js（http://riccardoscalco.github.io/textures/）是一个JavaScript的数据可视化库，用于制作纹理，如图2.46所示。

2.3.4.7 动画

计算机动画指由计算机生成的连续播放的静态图像所形成的动态效果的图画作品。动画的原理利用了人的生理上的视觉残留现象和人们趋向将连续类似的图像在大脑中组织起来的心理作用。人的大脑将这些视觉刺激能动地识别为动态图像，使两个孤立的画面之间形成顺畅的衔接，从而产生视觉动感。

动画作为视觉通道的一种，也可以用于可视化表达。以动画形式作为视觉通道包括了运动的方向、运动的速度和闪烁的频率等。其中，运动的方向可以编码定性的数据属性，而后两者则通常用于编码定量的数据属性。然而，动画的优势和缺点都在于其完全吸引了用户的注意力，因此在突出可视化的视觉效果的同时，用户通常也无法忽略动画所产生的效果。视觉通道的可分离性保证了用户可以自主地选择需要观察的那一部分可视化，动画与其他视觉通道具有天然的分离性。然而，在动画可视化中，用户观察非动画的视觉通道可能会变得困难。因此，可视化设计者在使用动画作为视觉通道时必须慎重考虑其对可视化结果产生的不利影响。

2.3.4.8 视觉多通

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

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

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

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

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

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

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

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

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

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

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

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

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

参考文献

[Alexander2017]Alexander E C,Chang C C,Shimabukuro M,et al.Perceptual Biases in Font Size as a Data Encoding[J].IEEE transactions on visualization and computer graphics,2017

[Brettel1997]Hans Brettel,Françoise Viénot,John D.Mollon.Computerized Simulation of Color Apperance for Dicharmats.Journal of Optics Society American,14（10）,1997:2647-2655

[Cao2012]Nan Cao,Yu-ru Liu,HuaminQu et al.Whisper: visual analysis tool for information diffusion monitoring in micro-blogs.IEEE Transactions on Visualization and Computer Grapohics.2012

[Chen2014]Chen M,Walton S,Berger K,et al.Visual multiplexing[C].Computer Graphics Forum.2014,33（3）:241-250

[Collins2009]Collins C,Penn G,Carpendale S.Bubble sets: Revealing set relations with isocontours over existing visualizations[J].IEEE Transactions on Visualization and Computer Graphics,2009,15（6）:1009-1016

[Fortune]http://money.cnn.com/magazines/fortune/fortune500/2011/full_list

[Gegenfurtner2001]Karl R.Gegenfurtner,Lindsay T.Sharpe.Color Vision: From Genes to Perception.CambridgeUniversity Press.2001

[Glassner1995]Andrew S.Glassner.Principles of Digital Image Synthesis.Morgan Kaufmann.1995

[Hansen2004]Chuck Hansen,Chris Johnson.The Visualization Handbook.Academic Press.2004

[Harrower2003]Mark Harrower,Cynthia A.Brewer.ColorBrewer.org: An Online Tool for Selecting Colour Schemes for Maps.The Cartographic Journal.40（1）,2003:27-37

[Heer2007]JeffreyHeer and George G.Robertson.Animated transitions in statistical data graphics.IEEE Information Visualization 2007

[Husain1988]Husain M,Stein J.RezsoBalintand His Most Celebrated Case[J].Archives of Neurology,1988,45:89-93

[Itten1960]J.Itten.The Art of Color.New York: Van Nostrand Reinhold Company.1960

[Keim2010]Daniel Keim,JörnKohlhammer,Geoffrey Ellis,Florian Mansmann.Mastering the Information Age Solving Problems with Visual Analytics.Eurographics Association.2010

[Kuang2012]XiaoleKuang,Haimo Zhang,Shengdong Zhao,Michael J.McGuffin.Tracing Tuples Across Dimensions: A Comparison of Scatterplots and Parallel Coordinate Plots.Computer Graphics Forum.31（3）,2012

[Levine1985]Martin D.Levine.Vision in Man and Machine.Mcgraw-HillCollege.1985

[Levkowitz1997]H.Levkowitz.Color theory and modeling for computer graphics,visualization,and multimedia applications.Kluwer Academic Publishers.1997

[Munzer2012]Tamura Munzner.Information visualization.Draft.2012

[Overington1992]Ian Overington.Computer Vision: A Unified,Biologically-Inspired Approach.Elsevier Science Ltd.1992

[Paivio1986]Allan Paivio.Mental representations: a dual coding approach.OxfordUniversity Press.1986

[Peterson1959]Peterson L,Peterson M J.Short-term retention of individual verbal items[J].Journal of experimental psychology,1959,58（3）:193

[Robertson2008]George Robertson,Roland Fernandez,Danyel Fisher,Bongshin Lee,and John Stasko.Effectiveness of animation in trend visualization.IEEE Transactions on Visualization and Computer Graphics.14（6）,2008:1325-1332

[Simous2000]Simons D J.Current approaches to change blindness[J].Visual cognition,2000,7（1-3）: 1-15

[Simons1997]Simons D J,Levin D T.Change blindness[J].Trends in cognitive sciences,1997,1（7）: 261-267

[Simons1998]Simons D J,Levin D T.Failure to detect changes to people during a real-world interaction[J].Psychonomic Bulletin&Review,1998,5（4）:644-649

[Simons1999]Simons D J,Chabris C F.Gorillas in our midst: Sustained inattentional blindness for dynamic events[J].Perception,1999,28（9）:1059-1074

[Starr2006]Cecie Starr,Christine A.Evers,Lisa Starr.Biology: Concepts and Applications.Thomson,Brooks/Cole.2006

[Stevens1986]S.S.Stevens.Psychophysics: Introduction to Its Perceptual,Neural,and Social Prospects.Transaction Publishers.1986

[Svetachov2010]P.Svetachov,M.H.Everts,T.Isenberg.DTI in Context: Illustrating Brain Fiber Tracts In Situ.Proceedings of the 12th Eurographics /IEEE-VGTC conference on Visualization.2010:1023-1032

[Tufte2001]Edward R.Tufte.The Visual Display of Quantitative Information.Graphics Press.2001

[Tversky2002]Tversky,Barbara,Julie B.Morrison,and MireilleBétrancourt.Animation: Can it facilitate? International Journal of Human-Computer Studies.57,2002:247-262

[Vakdez2018]Valdez A C,Ziefle M,Sedlmair M.Priming and anchoring effects in visualization[J].IEEE transactions on visualization and computer graphics,2018,24（1）: 584-594

[Ward2009]Matthew Ward,Georges Grinstein,Daniel Keim.Interactive Data Visualization:Foundations,Techniques,and Applications.A K Peters Ltd.2009

[Ware2004]C.Ware.Information visualization: perception for design.Morgan.2004