前言
后台产品常常使用图表为用户直观呈现用户访问、机器性能等数据，辅助用户对数据进行分析，判断业务运行状况。在图表中必然少不了通过颜色来更加直观、有效地传递信息。但图表实际应用中，却存在颜色任意或者无意义地使用，造成噪音干扰。
那么，在图表中添加颜色时，如何正确地运用颜色来传递信息，帮助用户更好理解数据？本文将从以下几点进行陈述：
- 颜色传递特定信息
- 信息可视化原理
- 图表颜色应用
- 图表颜色使用建议
- 总结
颜色传递特定信息
在了解图表颜色该如何正确使用之前，先思考一个问题：在看图表中的颜色时，我们究竟能从中获取什么信息？举个例子，如下图中1990年和2015年人均预期寿命和 GDP 统计（图01）中，红色和蓝色向我们传递了什么信息？
图01 1990年和2015年人均预期寿命和GDP （来源：echarts）
其实，结合图例我们很容易从图中读出：红色和蓝色分别对应1990年、2015年的人均预期寿命和 GDP 统计数据，即所呈现的数据按照1990年和2015年分成了两类。用户在看图时，就很容易知道同一颜色是同一组数据，不同颜色分别对应不同年份的统计数据。
再来看下图全球人口密度统计（图02），通过图表中的颜色我们又可以获取到什么信息？
图02 全球人口密度热力图 （来源：Highcharts）
在全球人口密度热力图中，我们通过颜色可以从中直观地获知人口分布的整体情况：哪些片区人口密集（颜色深的区域），哪些片区人口稀疏（颜色浅的区域）。图中很直接地通过颜色的深浅来对应人口的疏密，直观呈现数据。
从上述两个案例中可以知道，图表中颜色都传递了具体的信息，是具有实际使用意义的。那么，在图表中颜色用来传递什么信息？该如何正确地使用？这就需要进一步了解在信息可视化中，颜色与数据特征是如何相互映射的。
信息可视化原理
在信息可视化中，往往会将数据特征（属性、量值等）映射到可视化图形上，做形式的转换。比如，商品价格的高低，可以用线条的长短来表示，也可以用颜色的深浅来表示等，经过形式转换后，用户可以直观地从图形元素的视觉特征去感知、理解数据的特征。
常用于形式转换的可视化基本图形有：形状、长度、面积、角度、位置、色相、饱和度、明度等。如下图03：
图03 常用的可视化基本图形
而我们所提到的图表“颜色”，在信息可视化中可以传递丰富的信息，常常被用来做形式转换，更好帮助用户理解、获取数据的特征。颜色被用于传递数据特征，那一般用于传递数据的哪些特征？
图表颜色应用
做可视化处理的数据，往往具有”定性（数据类型）、定量（数值大小）和定序（先后排序）等不同属性“的特征。在《数据可视化》一书中指出：数据图表中，使用不同的颜色（即色相）来表示定性的数据，通过颜色的深浅（即饱和度/明度）传递数据中定量或定序的特征。
首先，该如何理解数据定性、定量和定序的特征呢？假设，你正在逛超市买些水果，那么种类万千的水果（如香蕉、苹果、榴莲等）就是定性的数据，而每种水果的价格（如香蕉12.00元/斤、苹果20.00元/斤等）就是定量的数据，如果再按照价格高低将水果进行排序（如排序结果1、2、3等）就是定序的数据。如下表01：
表01 水果价格表
在信息可视化中，颜色往往用于传递上述所提到的数据定性、定量和定序特征：
1、区分数据的类型
在信息可视化中，往往使用不同颜色（即色相），来区分不同类型的数据。如下图04中磁盘 IOPS 统计，两种不同的颜色指代不同类型的数据。
图04 磁盘 IOPS 统计
2、表示数值的大小或顺序
使用颜色的深浅（即不同的饱和度/明度）表示某一区间内数值大小和排序。如下图05中，使用不同饱和度的蓝色来表示不同时段用户访问量的大小，从中可以直观获知用户不同时段访问情况。
图05 用户访问统计（来源：google分析）
除了上面所说的两种基本图表颜色的使用方式外，也会混合在一起使用。如下图06关于2012年USA 人口量预测热力图中，使用不同的颜色红、黄、蓝来区分不同的数值范围区间：高（密集）、中（拥挤）和低（稀疏）。同时，使用每一种颜色的深浅来表示数值的大小和排序。
图06 2012年USA 人口量预测（来源：echarts）
图表颜色使用建议
在图表中使用颜色，务必确保颜色用于传递特定的信息，如果不是或者有其他的方式能够更有效传递该信息，那就避免使用颜色。在我们实际使用场景中，颜色的使用也需要注意以下细则：
1、避免将颜色用于装饰
颜色用于传递特定信息，如数据的分类等，而不是使用颜色来做视觉上的装饰。如图07中，轴标签已标注条目类型，这种情况下再对条目做颜色上的差异处理，会让用户困惑图中不同颜色表达什么信息。
图07 避免将颜色用于装饰
2、避免在背景中使用渐变颜色
使用渐变的背景色，会让图表中相同颜色看起来不一样。如下图08所示，同一个灰色矩形在渐变的背景中，在视觉上会觉得每个位置的小方块看起来是不同的，存在偏差。
图08 避免在背景中使用渐变颜色
3、使用亮色或深色强调信息
在实际的场景应用中，往往存在需要强调某一特定数据的场景，使用亮色或深色强调这一特定数据。如下图09中，使用饱和度更高的绿色来突出云拨测告警短信配额使用情况。
图09 短信配额统计
4、使用浅灰色呈现非数据类元素
图表中非数据类元素（如轴线、边界线等）使用浅灰色显示，以削弱其视觉影响从而避免分散用户对数据的关注。如轴线可以使用细灰线，图表边界线也建议使用细灰线等。如下图10，轴线、边界线等非数据类元素，都使用浅灰色。
图10 使用浅灰色显示非数据组件
5、需考虑颜色感知障碍群体
颜色感知障碍会让部分人群无法很容易识别特定的颜色，为了提升图表颜色的普适性，需要有策略性地避免使用某些容易出现感知偏差的颜色。如下图11中，为了更好帮助红绿色感知障碍群体别图表信息，尽量避免同时显示红色和绿色（特别在热力图中），可以使用红色和蓝色代替。
图11 使用红蓝代替红绿
总结
颜色应该有意义地使用，与图表其他元素应相得益彰。除了上述提到图表颜色基本应用和需要注意的一些建议外，也还需要更多结合图表的使用场景（如监控大屏、夜间模式等），选择更贴近用户视角的颜色。在选择颜色也不可过于随意，尽量避免在同一个图表中使用过多颜色而造成混乱。
另外，颜色的使用也可以结合品牌策略，让图表中使用的每一种颜色最终都表达特定的信息，让数据传递更清晰，让用户浏览更友好。
参考资料：
- 数据可视化- 浙江大学，陈为
- Practical Rules for Using Color in Charts
- Antv颜色使用原则
- 最简单的图形与最复杂的信息
- echarts可视化色彩理论基础
