2012.09.18-如何在图表中使用颜色来表达信息.docxVIP

如何在图表中使用颜色来表达信息日期：2010-07-01?|?分类：信息图表设计????在信息图表（或统计图表）中，颜色的使用并不是随性而至的，而是要满足一个基本的原则，就是：????R0:颜色使用必须传递特定的信息；不传递信息的颜色使用是多余的，应该避免。??? 而这条基本原则，在实际应用中被很多人忽视。例如下面的两个柱形图中，左侧的图中的颜色变化是多余的，因为横坐标的标签已经显示了每个柱形的含义，颜色并没有增添其他的信息，反而可能使读者产生疑惑；而右侧的图则是比较专业的做法。???????图1 R0原则的说明图（数据来源：艾瑞咨询）?? ?那么在信息图表中，颜色能传达出什么信息呢？我总结了一下，颜色在图表中主要有信息分类（组）、信息排序和信息强调三种用法。????1. 信息分类（组）????这是颜色最常见的功能。人们在信息设计中经常使用不同色调的颜色来表示不同组或类的数据，例如下面的条形图和散点图。????图2 颜色的信息分类（组）功能??? ?运用颜色表达信息分类时，一般需要遵守一些四个原则：?????R1.1: 使用的颜色种类一般不要超过五种。颜色过多会给读者增加比较大的辨别难度和记忆负担。???? 比如下面的左图，读者将不同的颜色与折线一一对应起来很需要花一番力气，而右图则使折线同时在形状上有所变化（这在工效学中称为“冗余维度编码”），使得读者更容易地进行区分：图3 冗余维度编码增加了各个数据系列的区分度???? 这就引出了下面一条规则：?????R1.2: 当必须使用5种以上的颜色时，可以采用冗余维度编码，即同时变化多个特征维度（如形状）的值对不同数据组进行编码。????例如下图是一组采用了冗余维度编码的视觉编码：图4 一组常用的冗余维度编码（摘自Colin Ware的Visual Thinking for Design）???????? 另外，还需要注意的一点是：?????R1.3: 所选用的各个颜色的色调须尽可能最大间距、均匀地分布在色谱中。????例如图2中所使用的四种颜色都是分散在色谱之中的、完全不同的颜色。这样做的目的一是方便读者的区分辨识，二是更好地突出不同“质”的概念。???? 最后一点是一个补充建议，即：?????R1.4: 所选用的各个颜色的饱和度应尽可能相同或相近。????也就是说，色调须尽可能拉开差距，而饱和度须尽可能相同。之所以提出这条原则有两个原因：一是为了使整个视觉感受更加和谐，二是饱和度隐含着表示信息的重要程度的含义，高饱和度的视觉内容往往被认为重要性更高，如果饱和度不同可能会使读者产生额外的不必要的理解。下面的地铁图中，所有的颜色的饱和度是相同的，这就暗示每条线路的重要性是相同，没有厚此薄彼：?????图4 波士顿地铁线路图????2. 信息排序????颜色在信息图表中的第二个常见用途是表示信息的序列或者量的增减关系,这常常通过同一色调颜色的不同亮度或者饱和度的变化来表示：?????R2.1: 应用同一色调的亮度或者饱和度变化来表示不同重要性程度的数据或者量的变化关系。????比如下面的图就用同一色调的不同亮度和饱和度来表示时间的递进关系：图6：亮度和饱和度的变化表示时间的递进关系?R2.2：应用两种截然不同的色调在亮度或者饱和度上的渐变来表示两级数量关系的变化。????? 在图7中，两种色调的渐变表示了两种对立情绪的程度变化：图7 两种色调的渐变?? 3. 信息强调??? 颜色的第三种功能是强调特定的信息，这体现在规则3.1中：??? R3.1：用自然的、柔和的、饱和度低的颜色表示重要程度低的信息，用强烈的、“突兀的”、饱和度高的颜色表示需要强调的信息。??? 在认知心理学中，颜色的差异被认为能在视觉注意的最初阶段（“前注意”）就被侦测到，因而人对颜色的对比是十分敏感。当图表的大部分元素采用柔和的颜色，而在少量元素中采用强烈的颜色时，人的注意力会在一瞬间就被牵引到强烈的颜色上，因此颜色的对比和反差是用来强调特定信息的最佳方法。具体请参见我在稍早前写的博文：《凸显关键数据的视觉设计》。??? 相关规则3.2：????R3.2: 将低饱和度（并且在大多数情况下较高亮度）的颜色应用于背景或者大面积色块，将高饱和度（并且在大多数情况下较低亮度）的颜色应用于显示目标信息或者小面积色块。????这一规则是基于人的视觉习惯和期望。???? 除了以上介绍的信息分类、排序和强调三大功能外，图表中的颜色使用还需注意以下几点：??? 1. 考虑文字的易读性。?????? R4：使文字易读的关键是文字与背景的亮度对比要明显，即在低亮度背景上呈现高亮度的文字或在高亮度背景上呈现低亮度文字。????? 2. 使背景颜色保持单一。???人对颜色的知觉很大程度上受到该颜色所在背景的影响，比如我们看下面这个图：图8