数据可视化设计-色彩篇
色彩在可视化中是一个非常重要的要素，帮助可视化图表更加清晰，准确，丰富的传达数据。
在以往的可视化图表设计中，我们大多数设计师是利用自己的个人美感和色感在对图表进行设计，没有一个相对科学的方法论支撑我们做图表的色彩设计。最近研究图表的时候接触到了色彩的选择，于是想利用自己项目来做一次科学的颜色的实验和验证，并重新去利用到项目里面，让自己的设计更加有说服力。也希望帮助到看到这个文章的设计师。
一、可视化色彩设计原则
色彩在可视化中是一个非常重要的要素，帮助可视化图表更加清晰和准确，并且丰富的传达数据。通常色彩在可视化中有3个重要的用途：区分数据类别、描述量化规律、强调。观察下面的配图就能看出图表有配色的重要性，左边没有颜色的图表，看不出图表数据的重要性，没有强调数据，没有数据类别的区分。
设计原则
数据可视化在Oteam-TVision经过大量的理论研究和项目实践，总结了4条可视化设计原则：精准、清晰、舒适、兼容。我们可以归纳为以下四个原则：
精准：针对不同类型的数据进行配色，并在色彩的语义定义上确保表意准确
清晰：保证在色相的辨识度、色阶的均匀度，最大程度地提升图表数据清晰性
舒适：同时兼顾配色的舒适美观，做到审美愉悦，并实现全局视觉统一
兼容：考虑色彩的兼容性，使图表在各类应用场景下（深色模式、色障人群、极端数据场景）能真正有效的使用
2.如何建立可视化色板
为了找准配色方向，针对数据类型配色，首先需要去了解可视化的数据类型。我们可以大致把数据类型划分为分类数据，时序数据，空间数据（如图）
在这里不做过多的数据怎么分类的介绍，我下一篇文章会讲怎么分类。
二、分类色板的定义
1.分类色板的定义
分类色板：常见于描述分类数据，经常采用不同色相来区分数据类别，要求高辨识度、高区分度
在界面应用中，在有主题色或者品牌色的前提下，配色最不可控，特别是辅助色众多的分类色板，下面主要介绍定制分类色板
2.关于色轮与HSB模式介绍
接下来介绍下HSB的色相模式。以色相表示分类是很简单直接的，也是大家普遍认可的方式，在众多色彩模式中，能最直接控制色相，饱和度，亮度的模式就是HSB，因此我们今天选择HSB模式进行实验。（这里对HSB模式的详细介绍，不做更多介绍了）直接进入色轮的建立。
3.建立色轮
我们先默认自己的主题色是品牌色，以这个颜色的色值为原点，在HSB色环上，每隔15度取一个色值（具体方法就是，在亮度B和饱和度S不变的情况下，对H值进行加减15的计算得到的数）得到基于这个主色的24色轮（这里大家可以自己做实验，观察下自己得出的这个色轮的色相区分度。我这里先是得出了24色轮，但是我发现色值太过相似，肉眼观察不出变化，于是删除了15度的色值，留下了30度的色值，得到了基于主色的12色轮（配图）
4.怎么确定其余颜色
这里我们需要给自己的选择的这12个颜色，进行颜色的术语定义（定义规则在这里不做赘述）
这里介绍一种取色思路叫分组取色：
第一组：相似色，邻近色；（选1个）
第二组：中差色，对比色；（选1个）
第三组：邻近互补色，互补色，反向邻近互补色（选1-2个）
第四组：反向对比色，反向中差色，反向邻近色（选1-2个）
需要注意的取色原则：
在B端设计图表中，尽量不要使用过多的红色作为辅助色，保证有一个红色调就可以
不同色相相同色相差的区分度不同，要考虑我们所选颜色间的视觉区分度，就是说相邻颜色间肉眼已经很难分辨，就二选一
优先选择色彩干净，明快，柔和的颜色，保证视觉上的美观
取色的数量，一般我们人类能叫出名字的颜色一般是7种，就是红橙黄绿青蓝紫，所以我们在这里选出5种颜色即可
5.12色轮中选出所需的颜色结果
6.色彩校正（这是最重要的一步，也是我花了很多时间研究的一步）
由于我们的每种颜色都有自己的“感官明度”，不同颜色在视觉上会有明显的明暗差异，感受也不一致。为了得到更加和谐的色板，我们可以对部分颜色的明度和饱和度进行校正（注意，不是所有的颜色都需要校正，也不是均要与品牌色完全保持一致，最终效果以我们设计师的视觉感受而定，这里我走了很多弯路，一直以为这个校正一定有个标准公式，搜遍全网关于色彩校正的文章，后来去研究蚂蚁的可视化颜色，发现其实很多产品的色彩也不一定非要和品牌色的感官明度保持一致）我在做实验中，运用了一个我们公司的新的品牌色，这个颜色完全是高饱和高明度的色值，完全找不出能与它搭配的辅助色。差点放弃此次验证。所以中途替换成了以前的移动端的一个主色。
这里介绍下，怎么知道自己的朱色是否和我们所选的颜色感官明度一致呢？
新建一个全黑的色块，放在我们选好的色值色块上，把黑色的色块图层样式改为色相，就能得到如下图一样的情况。以第一个色主色为基调的话，紫色和蓝紫色的感光度都较高，中间3个颜色就低很多。这样的颜色运用在可视化中是不和谐的。
下面我们就来介绍怎么做色彩校正
7.如何校正色彩及校正规则
校正规则：通常情况下，保证H值不变，去调整饱和度和亮度
浅色色调：降低饱和度，增加亮度
深色色调：增加饱和度，降低亮度
H值校正：校正前后这个值不超过15度，色相必须保持是同类色（色相环中15°夹角内的颜色）
保持感官明度同频
保证视障群体的识别度
下图就是对我们选中的其中一个颜色进行的校正
8.校正结果
这里还可以增加一步是对色彩区分度的验证。验证有一个公式，我没搞明白，就不写上来了，直接在一个网站验证就好了。
工具地址：https://projects.susielu.com/viz-palette（这里我也不讲网站的验证结果了）
如果验证结果不合格，需要会要色彩校正这一步，重新调整色值。下图就是我校正的色彩结果。总体来说都是没有变它的色相，而是去改变颜色的饱和度
9.用色顺序
可视化图表的用色顺序，是实际影响我们界面中的颜色配比的重要因素。一般遵循的配色原则是：6:3:1。60%的主色，30%的次要颜色，10%的点缀色
在前期分类色板的清晰度得以保障的情况下。任意两两颜色之前的色彩都要复合清晰度的验证标准。我实验了2种可行的方法：
方法一：按邻近色顺序使用
使用方法：将分类色板内的颜色，按照色环排序，然后按顺序优先使用邻近色相。
方法二：按照分裂互补色跳跃使用
使用方法：将分类色板的颜色，按照色环排序，优先使用分裂互补色。
三、连续色板的定义
连续色板：通常是用于表示同一事物中的数值大小，梯度的变化，常采用同色相颜色的不同明度和饱和度来表示
要求：高均匀度、大跨度
连续色板的定义，有很多种方法，我这里实验了2种方法配图。
方法一：实际工作中推荐使用工具（工具链接：https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1）
工具其实也是有缺点的，部分色彩在亮度高时，会饱和偏色过多。这个时候需要我们人工调整。
方法二：photoshop
在拾色器中，固定A.B值不变，等差调节L值
这里主要调节L值，我是在主色调的L值的基础上，加减数值5，得到了有图的色板。其他辅助色也可以用这个办法。
四、发散色板的定义
发散色板通常用于表现数据从负数到0再到整数的连续变化，常采用的表现方式是由一个颜色过度到一个浅色，再均匀过渡到另一种对立颜色。
取色建议：通常是两种对立的颜色，互补色或者对比色。红-蓝（一般是指温度冷热相关的数据）/橙-蓝/紫-绿（中性色，通常用于表现性能和销售数据）
注意：不建议使用红绿。黄蓝的互补。。。因为这2组不能兼容我们色觉障碍用户。
（工具链接：https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1）
如下图，我在左边选择了我们的主色红色，右边选择一个我们已经调整好的蓝色的色值
结语：以上就是我在对可视化颜色的一些探索过程。希望能给大家提供一些帮助。接下来，我会用这一次的配色运用到我自己的项目里，再写一篇文章。
