2.6 数据可视化Tips

2.6.1 色彩

1.颜色的特性

色彩离不开光。光是具有一定频率和波长的电磁辐射。我们肉眼所能见到的光线（也叫作可见光）是电磁辐射中的一个狭窄的分区，波长范围是0.39～0.77微米。

光波作用于人眼所引起的视觉经验就是颜色。不同频率的电磁波形成了不同的颜色，而我们对色彩的辨认其实就是肉眼受到电磁波辐射刺激后，所引起的一种视觉神经反馈。

颜色具有三个基本特性，即色调（也叫色相）、明度和饱和度（也叫纯度）。色调（Hue）主要取决于光波的波长。波长不同，色调也就不同。明度（Brightness）是指颜色的明暗程度。色调相同的颜色，明暗可能不同。饱和度（Saturation）是指某种颜色的纯度，纯色都是高饱和的，如红、蓝、黄等。不饱和的颜色通常混杂了白色、灰色或其他色调，如淡紫、粉红、黄绿等。

在信息可视化设计中，除形状、布局这两种基本的编码方式外，还有颜色可用来编码大量的数据信息。比如，可以用不同颜色来区分不同的数据，用亮色来表现关键数据，用独特的颜色来表达数据的特性等。

2.色彩模型

色彩模型（也称色彩空间）是一种抽象的数学模型，通常用一组数值（3个或4个值）来表示颜色。常用的色彩模型有HSB、RGB及CMYK三种。

HSB是设计师们较频繁使用的一种色彩模型，也是基于颜色的三个基本特性和人眼视觉细胞而设定的色彩模型，其中，H表示色调，S表示饱和度，B表示明度。

RGB是采用三原色混色原理的一种色彩模型，常用于计算机上。三原色通常指的是红、绿、蓝，将红、绿、蓝按一定的比例混合，便可以产生其他颜色。RGB中的R表示红色（Red）、G表示绿色（Green）、B表示蓝色（Blue）。

CMYK色彩模式常用于印刷，同样采用了三原色混色原理，再加上黑色油墨，总共使用四种颜色进行混合和叠加。四种标准颜色分别是 C（Cyan，青色，又称为天蓝色）、M（Magenta，品红色，又称为洋红色）、Y（Yellow，黄色）、K（Black，黑色）。

在本书中，Python绘图主要用RGB模型。R、G、B的取值范围都是0～255，各有256种取值。通常说的“纯红”用RGB值表示为（255，0，0），“纯绿”用RGB值表示为（0，255，0），“纯蓝”用RGB值表示为（0，0，255），“黄”色用RGB值表示为（255，255，0），“青”色用 RGB 值表示为（0，255，255），“粉红”色用 RGB 值表示为（255，0，255）。任意三个值必定对应一种颜色，比如配套资源第1章中的“科赫曲线.py”源码用以下的语句设置了背景色的颜色：

（59，209，207）表示海蓝色，可以在 RGB 模式上再加上一个值，就是 RGBA （Red，Green，Blue，Alpha），最后一个元素Alpha表示颜色的透明度。Alpha值可以用百分比、整数或用0～1的实数来表示。如果一个像素的Alpha值为0%，那么就是完全透明的（也就是看不见的）；Alpha值为100%意味着完全不透明，也就是没有进行透明度处理；Alpha 值为0～100%，表示像素可以透过背景显示出来，就像透过磨砂玻璃一样，呈现出半透明的效果。在计算机图形学领域，Alpha值常用于Alpha合成（也叫透明合成）。Alpha 合成是一种将图像与背景结合的过程，在渲染图像时，通常会对目标图像中的多个子元素进行单独渲染，然后把多张子元素的图像合成为一张单独的图像，合成完成后就可以产生部分透明或全透明的视觉效果。

RGB 中的三原色除可以使用0～255的数字来表示外，还可以用十六进制符号来表示。每种颜色的最小值是0（十六进制为＃000000），最大值是255（十六进制为＃FFFFFF），这种表达方式又被叫作HTML颜色代码，在网页设计中经常会被用到。

3.色彩的视觉心理

色彩本身并没有冷暖、轻重、软硬、前后及大小之分。人的眼睛感受到了光，在大脑中就会唤起记忆、产生联想，再由联想引起一系列不同的色彩心理反应，这些反应其实只是人类的一种心理错觉。

比如，红色会让人联想到太阳、火焰，黄色会让人联想到阳光、光明，蓝色会让人联想到星空、海洋，绿色会让人联想到草、树木，紫色会让人联想到紫罗兰、水晶。明亮的颜色会让人联想到蓝天、白云，暗沉的颜色会让人联想到泥土、钢铁，明亮但纯度不高的颜色会让人联想到动物柔软的皮毛，不同的联想给予了人们对不同的色彩关于冷暖、轻重、软硬的感受。

不同的色彩会在人眼视网膜的不同位置上成像。在视网膜后面成像的，有红色、橙色等长波长的颜色，会让人感觉比较靠前；在视网膜外侧成像的，有蓝色、紫色等短波长的颜色，会让人感觉比较靠后。由于视觉上有前后，所以色彩也会有大小的感觉。靠前的、暖色的、明亮的颜色就会显得大，而靠后的、冷色的、暗沉的颜色则会显得小，这些其实都是一种错觉。

4.中国传统颜色

本书中的部分图形颜色采用中国传统颜色。中国传统颜色来自大自然，以天然植物、动物、矿物作为原料，色彩范围广，并融合了中国传统的自然哲学思想，温润柔和、不张扬，蕴涵着其独有的特色和魅力。

《中国国家地理》杂志社曾推出一款叫作“中国美色”的明信片，明信片中的色卡罗列了98种中国传统颜色，这些传统颜色来源于中国古代相关文物的经典配色，表2-2是其中一部分颜色的RGB值。

2.6.2 配色方案

在可视化作品的设计中，配色是至关重要的一环，配色方案的好坏将直接影响可视化结果的表现力。和谐、美观的配色方案可以吸引用户去探索可视化所包含的信息，而不恰当的配色方案则会导致用户迷惑及对可视化的抵触。在设计配色方案时，通常要考虑许多方面，比如需要可视化的数据是什么样的类型？这些数据拥有哪些定性或定量的属性？将这些数据可视化的目的是什么？所面向的又是怎样的用户群体？等等。

颜色的运用和搭配并不是一件容易的事，需要大量地学习和实践。下面介绍一些基本的配色原理。

1.色彩对比

色彩对比有色调对比、明度对比、饱和度对比、综合对比等。色彩之间由于色调不同、明度不同、饱和度不同而形成的对比效果，分别称为色调对比、明度对比、饱和度对比。色调对比的强弱程度取决于对比的色调在色环上的距离，距离越小对比越强，距离越大对比越弱。不同的对比效果可呈现出大方、高雅、活泼、清晰、模糊、柔和、强烈、华丽、古朴、粗俗、含蓄等多种感觉。

色彩对比与位置有着密切的关系。距离越近，对比的效果越强；距离越远，对比的效果越弱。当一种颜色包围住另一种颜色时，对比效果是最强的。

多种色彩组合后，对色彩的各个单项（包括色调、明度、饱和度、位置等）进行的对比，叫作综合对比。在实际设计过程中，一般都采用这种多层次、多角度的综合对比，这样的对比虽然复杂，但更能够达到预期的效果。

2.色彩调和

色彩调和有两种类型：第一类是配置的色调性质相近，通过改变饱和度和明度，使整体深浅不一、浓淡有致、统一协调；第二类是配置的色调性质相远，特别是补色（色环中位置相对的两种颜色），通过某些方法使整体达到统一、协调。

色彩调和的方法有面积法、色彩间隔法、色彩统调法、削弱法等。面积法是让色彩的一方占有大面积，而让另一方占小面积，采用一方主导、另一方从属的方式来减少对比的强度。色彩间隔法是在色调之间，特别是在对比强烈的色调之间，嵌入金、银、黑、白、灰等线条或色块，用来分隔对比的色调，从而使色彩的对比有所缓冲，降低色彩的对比强度。色彩统调法是在色彩的组合中，加入某个共同的要素，让统一的色调去支配全体色彩，特别是对比强烈的色彩，比如嫩绿、粉红、浅黄、天蓝、银灰等组合，可以加入白色，让白色来统一支配全体色彩。削弱法是为对比强烈的色调设置不同的明度和饱和度，从而起到减少视觉冲突的作用。

3.色彩形式美

色彩均衡是指将各种色彩要素（比如色彩的面积、色彩的强弱等）进行适当的布局，从而构建出一种稳定的视觉感受。这种形式是配色时最常用的一种方案。色彩比例是指色彩组合中各部分的比例关系，它随着形态、位置的变换而有所不同，可以直接影响整幅作品的风格和美感。色彩节奏是指通过色彩的重复、推移、变换、堆叠，令人体验到一种有节奏的、有韵律的秩序美。色彩重点是指在作品的某个部位强调、突出某种色彩，以起到吸引读者注意力的作用。

4.经典配色作品

对于初学者来说，学习经典作品无疑是最适宜的一种方法，下面是笔者推荐的一些经典配色。

● 中国古典配色：中国古典配色的优秀素材有瓷器、国画、壁画、服饰、建筑、影视剧等。其中，最经典的配色之一当属敦煌配色。敦煌配色来自古老的民族瑰宝—敦煌壁画，其出色的原因不仅是经历了千年的沉淀，更是其所包含的颜色有百余种，例如胭脂、雄黄、铅丹、石黄等，色彩极为丰富，就像把天地万物、宇宙星辰都融入其中。有兴趣的读者可参看《中国传统敦煌图案与配色》一书。

● 莫兰迪配色：莫兰迪色据说是世界上最舒服的高级配色，它来自意大利艺术家乔治·莫兰迪的一系列静物作品，并以其名字命名。莫兰迪配色指的是一种色彩关系，在所有的颜色中都加入了适度的白色和灰色进行调和，将原本鲜艳的色彩转化成优雅的灰色调，仿佛蒙上了一层灰，从而产生一种柔和的、不张扬的平衡美感。

● 蒙德里安配色：蒙德里安配色是世界上公认的最经典的配色之一，已经持续流行了100多年，一直广受设计师、艺术家们的青睐。在三种原色中，黄色象征着阳光，蓝色象征着天空，红色则是中性的。将这三种原色和格子、几何图案进行组合、搭配，画面呈现出一种轻快、协调、有序的整体之美。三种原色的搭配简洁却不简单。当读者注视着画面时，颜色映在眼中，仿佛调色板一般，可以让人身临其境地感受三原色所混合调配出来的五彩斑斓。

5.可视化配色注意事项

在信息可视化的配色中，除参考以上经典配色外，还有下面一些情况需要注意。

● 应尽可能避免配色过于鲜艳。配色过于鲜艳会干扰人的注意力，甚至会让人眼产生难受的“震颤效应”（Color Vibration）。

● 配色的对比度不能过低。文字（如标签、注释等）越小，与背景的对比度就要设置得越高，从而增强文本的可读性。

● 配色有可能受到色彩的环境互动效应（Interactive Contextual Effects）的影响，也就是说，两个颜色一样的色块在不同颜色的背景下可能显得不一样，两个不同颜色的色块在不同颜色的背景色下也可能显得一样，所以，在表现复杂的数据时，要加上形状、大小等可视化元素来增加辨识度，而不是只依赖于颜色的变化。

● 颜色在特定的场景中是有一定语义的，在设计时，需要考虑用户的背景。例如，红色通常代表“危险的”，但在股票市场的 A 股中代表“涨”；绿色通常代表“安全的”，但在股票市场的A股中代表“跌”。

● 当同一个数据项（指标）出现在多个不同的图表中时，该指标的颜色要保持一致，否则用户容易混淆，难以快速地识别该指标。

● 配色要符合人的认知习惯。比如，通常采用浅色代表小的数值，用深色代表大的数值。如果反过来，采用深色表示小的数值，采用浅色表示大的数值，就会容易让人困惑。

● 分类数据的配色使用的颜色最好少于6种，否则读者将无法区分颜色，也就无法理解每一个颜色的具体含义。如果类别过多，可以尝试使用其他视觉编码，例如位置、大小等，这样可以使图表更容易被阅读。