色彩——常被忽视但潜力极大的可视化模式
文章目录[隐藏]
1.色彩——数据可视化中灰姑娘
灰姑娘的童话想必大家都很熟悉，而灰姑娘（Cinderella）一词在英语中带有“未得到应有注意的人或事”。用灰姑娘比喻色彩，就是为了反映了这样一个事实：色彩是数据可似乎中滥用和忽视最严重的可视化模式，我们经常忽视色彩的作用，即使意识到了也很难做出选择。最普遍的情况是使用颜色仅仅是为了美观。但是事实上我们完全可以用色彩表达更多的数据维度，而且色彩具有其他可视化模式没有的优点——一目了然。
例如，在单词云中，颜色是毫无意义的，它仅仅用来提高单词边界的对比和增加一些美感。毫无疑问，这是对色彩的一种忽视。其实，我们完全可以用色彩在单词云中表示更多的维度——例如将不同类型的词用不同的颜色标识出来，这将使得原来的单词云具有更深刻的含义。
2.色彩的绝对优势
色彩有两个优势，其一是色彩本身是多维的，人可以同时区别色彩的色调（色相）、明度、纯度，即意味这可以将多维数据绑定到编码的色彩上。colin ware 2000年时使用红色、蓝色、绿色作为三个坐标轴，用色彩对数据进行了三维编码，证明理论上这是可行的。但是在实践上，这种方式需要雇佣一帮观察员来评估红、蓝、绿三种颜色的点的数量，很不直观；而且还未考虑色盲问题（后面色盲问题会详细讲到）；以及不同人对色彩的感知是不同的（后面色彩心理学会讲到）。所以通常用色彩对数据编码，维度最好不超过2个。最普遍的方案是，可以用色调表示一个数据维度，明度表示一个数据维度。
而色彩的另一个优势，相比多维这个特性，可以被称为绝对优势：那就是一目了然。色彩的一目了然的特性，可以说是人类在进化过程中沉淀在基因里的视觉处理机制。例如红色代表鲜血，代表火焰，代表危险，代表激情，有强调和突出作用（这些会在之后的色彩心理学中详细讲到），只要不是过于杂乱的环境，用户都可以不假思索地一眼分辨。这种特性在学术上有个专门的名词——“前意识加工(preattentive processing)”：在感觉输入首次由感受器进入大脑的时候，它们在你注意之前就已经被大脑加工。下面这个案例说明了具有前意识加工特征的视觉输入的普遍性和有效性，而且颜色往往更容易被分辨（这个案例摘自http://www.infovis-wiki.net/index.php/Preattentive_processing）。
Detecting the Red Object preattentively.[Healey et al., 1996] One visual variable and very easy to find it.
颜色区分：不同颜色的对象很容易地在注意前就被区分出来。
Detecting the Circle preattentively.[Chipman, 1996] It is more difficult but still preantentiv.
形状区分：比起颜色区分要困难一些，但是还是比较容易。
Examples of two target detection tasks: (a) target can be detected preattentively because it possess the feature “filled”; (b) target cannot be detected preattentively because it has no visual feature that is unique from its distractors.[Healey et al., 1996]
a图颜色区分很明确，故而目标可以在注意前被发现。b图由于颜色和形状同时杂糅，视觉特征区别不单一，故而目标不能在注意前被发现。
Region segregation by form and hue: (a) hue boundary is identified preattentively, even though form varies randomly in the two regions; (b) random hue variations interfere with the identification of a region boundary based on form.[Healey et al., 1996]
A图的色彩边界可以很容易地在注意前被发现，即使内部元素的形状是随机的；B图就没那么明显，观察一会儿就会发现是以形状来区分的。ielun
结论：
Any visual processing of that item prior to the act of selection can be called “preattentive”.[Wolfe, Treisma, 2003]
任何视觉处理过程之前的选择行为可以被称为“前注意”。
Preattentive processing can help to rapidly draw the focus of attention to a target with a unique visual feature (i.e., little or no searching is required in the preattentive case). [Healey, 2005]
前注意加工可以通过一个独特的视觉特征从而迅速地吸引注意力。(即在前注意的情况下只需要很少或根本不需要搜索)。
很明显，色彩较于形状等其他视觉特征，更容易被前注意加工所处理，更容易被发现。
3. 色彩搭配原理
但是，色彩的使用是需要技巧的。不知道怎么用，或者用了弄巧成拙的情况非常普遍。既然要研究色彩在数据可视化中的应用，那么就必须了解美术设计中色彩搭配的原理。我个人认为对于数据可视化可以借鉴三个经典理论：色彩心理学，临近色理论，色盲理论。
3.1 色彩心理学初探
色彩心理学娓娓道来可以讲几本书。有些颜色我们认为是混合色，例如橙色是黄色加红色混合而成，而黄色人们却不认为会由其他颜色混合而成（这只是心理层面的意义）。因此在心理上把红、黄、绿、蓝四种不被认为是混合色的颜色，并称为四原色。通常红—绿、黄—蓝称为心理补色。任何人都不会想象白色从这四个原色中混合出来，黑也不能从其它颜色混合出来。所以，红、黄、绿、蓝加上白和黑，成为心理颜色视觉上的六种基本感觉。而人们对于这6种颜色和其他混色有有先入为主的心理反映，造成这种反映的原因有四个：1.年龄，2职业，3社会流行影响，4共同的色彩感情（由于人类生理构造和生活环境等方面存在着共性，长期累计所致）。根据实验心理学家的研究，主要有下列几个方面：
（1）色彩的冷暖：红橙黄的色调带暖感；蓝青色调带冷感。高明度的色一般有冷感，低明度的色一般有暖感。高纯度的色一般有暖感，低纯度的色一般有冷感。无彩色系中白色有冷感，黑色有暖感，灰色属中。
（2）色彩的轻重感：色彩的轻重感一般由明度决定。高明度具有轻感，低明度具有重感；色调重量的心理感觉：从大到小依次为黑，红， 蓝，绿，橙，黄，白
（3）色彩的软硬感：色彩软硬感与明度、纯度有关。凡明度较高的含灰色系具有软感，凡明度较低的含灰色系具有硬感；纯度越高越具有硬感，纯度越低越具有软感；强对比色调具有硬感，弱对比色调具有软感。
（4）色彩的强弱感：高纯度色有强感，低纯度色有弱感；有彩色系比无彩色系有强感，有彩色系以红色为最强；对比度大的具有强感，对比度低的有弱感。
（5）色彩的明快感与忧郁感：色彩明快感与忧郁感与纯度有关，明度高而鲜艳的色具有明快感，深暗而混浊的色具有忧郁感；低明基调的配色易产生忧郁感，高明基调的配色易产生明快感；强对比色调有明快感，弱对比色调具有忧郁感。
（6）色彩的兴奋感与沉静感：这与色相、明度、纯度都有关，其中纯度的作用最为明显。在色相方面，凡是偏红、橙的暖色系具有兴奋感，凡属蓝、青的冷色系具有沉静感；在明度方面，明度高的色具有兴奋感，明度低的色具有沉静感；在纯度方面，纯度高的色具有兴奋感，纯度低的色具有沉静感。因此，暖色系中明度最高纯度也最高的色兴奋感觉强，冷色系中明度低而纯度低的色最有沉静感。强对比的色调具有兴奋感，弱对比的色调具有沉静感。
（7）色彩的华丽感与朴素感：这与纯度关系最大，其次是与明度有关。凡是鲜艳而明亮的色具有华丽感，凡是浑浊而深暗的色具有朴素感。有彩色系具有华丽感，无彩色系具有朴素感。运用色相对比的配色具有华丽感。其中补色最为华丽。强对比色调具有华丽感，弱对比色调具有朴素感。
了解色彩心理学，可以帮助我们设计作品：不论是插画、工业设计、平面设计还是数据可视化作品。
3.2临近色理论
色彩在数据可视化实践中的一个重要应用就是描述数据维度，前文中也提到色彩具有“前注意加工”的特点，可以令其所表述的数据维度一目了然——但是这种一目了然是有限制的：一方面约占人群10%的色盲不能不考虑（下文会详细分析）；一方面过于混杂的颜色会让人难以分辨色彩，甚至感到恶心。
普遍的情况是我们的数据可视化不会太考虑色彩心理学的问题，一般是就事论事，顺从所描述事物的一般颜色设计方案即可。但是人眼对色调、明度、纯度的分辨是有极限的。例如纯灰度图像，如果对灰度进行编码，但灰度可用编码值一般不超过10个（通常7个以内），否则会造成相邻灰度难以辨认。对于这个问题，有个解决方案是提高对比度，让不相邻的灰度在一起显示，从而提高辨识度。这个办法看着不错，但这又导致了另一个问题。
考虑到这样一种情况：一个散点图，点数很多很密，为了提高辨识度，故意给每个点分配纯度很高的颜色，使互相之间对比度很高，最后结果就是一大摊五颜六色的点点——给人密集恐惧症的感觉不说，还有给人垃圾堆一般的恶心感觉。用前文色彩心理学的知识来分析，这里的色彩对比度、明度、纯度过高，导致明快和兴奋，刺激太大，同时太多的点分散了注意力，所以会看着恶心。那么如何在符合人们一般色彩心理预设的情况下分配颜色呢？就得用临近色理论。
临近色理论我曾在本杰明插画培训班中学习过。我们先来看一幅画：
这幅插画很有趣，有趣在所用颜色纯度都很高，但是却不会让人感觉恶心或者难看，反而给人一种极强的视觉冲击力。这正是本杰明（张彬）在插画圈里能出名的缘故。本杰明有他的一套临近色理论，大致内容如下：
1画面主体需要用邻近色组成。用微色差塑造形体。
2从远到中到近需要有冷暖色系变化。（纯度变化或者色相变化，两者都能造成冷暖的变化）
3全部的亮部和暗部需要有不同的冷暖色系。
4要区分出固有色。
5要把最鲜艳的颜色放在主体物上。
很多人模仿本杰明的画，但坦白说，即使你知道了上面个理论，没个十年八年的绘画实践也是模仿不像的。而且即使你能模仿的一模一样，也没用——艺术家需要的是个性，成功是不可复制的。回到我们的主题，这个临近色理论对于数据可视化实践有什么用呢？
考虑刚才的散点图的例子。按照临近色理论“画面主体需要用邻近色组成。用微色差塑造形体”，我们应该将色彩编码，聚类，让同一种色调的点聚集在一起，而同一颜色的点之间可以靠明度或纯度来区别。这样不仅避免了密集恐惧症，让颜色过渡十分自然，还起到了良好的编码效果，何苦而不为呢？我认为在可视化编码中应该尽量如此，避免色彩的杂糅。（不得不提的一点是杂糅的颜色中是很难同时区别色调和明度）
这里有一个绝妙的案例——网络星球。俄罗斯工程师 Ruslan Enikeev 根据 2011 年底的数据，将 196 个国家的 35 万个网站数据整合起来，并根据 200 多万个网站链接将这些“星球”通过关系链联系起来—— The Internet Map。其中青蓝色代表美国、黄色代表中国、绿色代表印度、深蓝色代表德国、红色代表俄罗斯。每一个“星球”的大小根据其网站流量来决定，而“星球之间”的距离远近则根据链接出现的频率、强度和用户跳转时创建的链接。如果你想了解具体的算法，你可以看看这两篇 PDF 文档，分别 从数学和 工程学角度详细介绍了这个巨型宇宙形成的方式。从临近色的角度分析，该图将同色圆圈聚集使用，相邻的色域使用的是临近色，从而让颜色过度自然，具有极强视觉冲击力。并且，聚集的色彩也可以表示同一种数据源，具有聚类和特征分解的意义。
3.3 色盲问题
艺术插画大可不必关心色盲，因为艺术是给可以欣赏的人看的；但是数据可视化就不能不考虑占人口比例10%的色盲了。坦白说10%这个比例很高，高到很有可能老板就是色盲。故而我们必须考虑这个问题。
色盲有红色盲，绿色盲，蓝绿色盲，全色盲，其中红、绿色盲占了90%以上。facebook的创始人扎克伯格就是红绿色盲，在他眼里红绿都是棕灰色，而蓝色可以分辨，于是乎Facebook网站的主色调就成了蓝色。
面对色盲问题，解决方法有如下几个：
1.在作品中主要使用蓝色系色调，保护红绿色盲放弃其他色盲，保证98%的人能够看懂。
2.使用灰度色阶。保证100%的人能看懂。但是灰阶表现力有限，一方面这样做放弃了色彩中色调这个维度，另一方面灰阶这所能表现的数据值一般不能超过7个，否则正常人也很有可能看不出两个相邻色阶的区别。
可以看到以上两种方法都是以牺牲色彩维度和色彩编码值的数量来保护色盲权益。这也解释了为什么色彩虽然是多维的，但是我们很少用色彩绑定超过两维的数据——因为那样会看不清。人能分辨的颜色和色阶数其实是非常有限的。有时候我们实在不忍心放弃其他色调所带来的编码值，那么还有一种办法：
3.采用全色色调，放弃色盲，只给另外90%的人看。
4.精彩案例
1. house hunting all day, every day http://trends.truliablog.com/vis/tru247/, 该案例用纯度不高的色调表示交通拥挤状况
2.http://greencracker.net/wp-content/uploads/2013/11/final-cafe-press-dimensions-1106.jpg 众人心中的乔治亚州政府的功能，这是一个很大的jpg图片，用不同的颜色代表不同的需求。
3.http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html facebook ipo统计图，该图同时使用色调和明度来表示不同维度
“色彩——常被忽视但潜力极大的可视化模式”有 3 条评论。