黑白模式下数据可视化的色彩搭配

暗黑模式是指把所有 UI 换成黑色或者深色的一个模式。

需要说明的是，暗黑模式不只夜间模式。

暗黑模式更多的目的是希望使用者更加专注自己的操作任务，所以对于信息内容的表达会更注重视觉性；而夜间模式则更多是出于在夜间或暗光环境使用下的健康角度考虑，避免在黑暗环境中长时间注视高亮光源带来的视觉刺激，所以在保证可读性的前提下，会采用更弱的对比来减少屏幕光对眼睛的刺激。

同时，从使用场景上来说，暗黑模式既可以在黑暗环境，也可以在亮光环境下使用，可以理解为是对浅色主题的一种场景化补充，而夜间模式只建议在黑暗环境下使用，在亮光环境使用时很可能并不保证信息可读性。

暗黑模式与浅色模式最大的不同就在色彩的处理上，希望在色彩上有一定延续和关联，而不是毫不相关的两套色板，一是避免开发及后续的维护成本，二是实际切换和使用时，可以保证一致性，这意味着需要借助一定规则。

今天跟大家分享下一些色彩搭配的处理思路：

1、黑白模式需要两套色彩搭配

2、如何平衡“饱和度”和“明度”

3、色彩的面积与色温的关系

4、采用“中度”或“中弱度”对比配色

一、黑白模式需要两套色彩搭配

黑白两版界面最大的痛苦之处在于：需要准备两套色值！如果不巧遇到的是数据可视化的界面，这个痛苦会双倍放大。

在白版的外观下，所有的色彩搭配看起来都很和谐，但在黑色的外观中，色彩突然变得刺眼且具有侵略性。当用户长时间的停留在一张图表上查看与分析时会产生视觉疲劳与不适。

设计师经常会遇到以下几点问题：

① “饱和度”和“明度”该如何平衡 ？

② 色彩的“面积”与“色彩温度”如何分配？

③ 色彩如何搭配才能让用户清晰分辨？

二、如何平衡“饱和度”和“明度”

以环形数据图为例，绘制了6种数据分类，以及6种不同的颜色。白版里看起来很和谐，置入黑色背景中，顺时针第三个颜色“绿色”明度过高且刺眼，第六个颜色“紫色”明度过低且不易识别。

在黑版中产生的不适感，其实是“明度差”的作用。明度差其实是色彩与背景环境之间产生的一种关系。

当背景为白色时，明度最暗的那个方块最易被识别；当背景为黑色时，明度最亮的色块最易被识别。高明度差的作用能帮助我们快速从背景中识别色彩，却并不适用于我们长时间观看。

在可视化图表中，我们需要的是和谐的色彩关系，要制造和谐的色彩关系就需要消除高低不平的明度差。

最后对黑版颜色的明度、饱和度进行了以下调整：

① “绿色”明度降低↓，饱和度上升↑；

② “红色”明度上升↑，饱和度降低↓；

③ “紫色”明度上升↑，饱和度降低↓。

整个色轮的明度和饱和度比修改之前更适应用户长时间查看，减少了原稿中高饱和度和明度产生的光影和残色等不适感。

在配色中，尽量避免“高饱和度&高明度”以及“低饱和度&低明度”的组合。

双高会使颜色过于明亮鲜艳使视觉疲劳，双低会使色彩气氛昏暗较难区分。在调色的过程中需要耐心实验，找出合适的色彩组合。

三、色彩的面积与色温的关系

常规情况下，在面积较大的数据分类中使用低色温；在面积较小的数据分类中使用高色温。

色温并不是独立存在的，是色彩与色彩碰撞后人类产生的主观感受。在同等色彩面积的条件下，看起来比实际面积更大的色被称为膨胀色，反之称为收缩色。

关于色彩面积有以下几点规律：

1、同样面积的暖色比冷色看起来面积大；

2、明亮色比灰暗色显得面积大；

3、在色彩的相对明度的问题上，“底色”的明度越大，“图”色的面积越小。

如果仅限于纯色，暖色的明度比冷色的明度要高，所以暖色比冷色显得面积大。

在黑暗背景上，高明度的色彩面积往往看起来比实际面积要大，所有在黑暗背景上作明度不同、面积相等的色彩处理时，要想取得同等大小的视觉效果，必须缩小明度大的色彩的面积。

四、采用“中度”或“中弱度”对比配色

如何能让用户既能看清楚色彩分类，又能看的很舒服呢？

方法有以下两点：

1、避开“高强度对比色”

2、避开“弱对比色”

在色相环中120°~150°范围中的配色（例如：红绿，黄紫），对比效果较为强烈，感官刺激太强。10°~30°范围中的邻近色（例如：黄橙、青绿），对比效果较弱，不易分辨。

以下是参考AntV以及IBM Design色板总结得出的一套数据分类色板↓

以上环图所遇到的色彩问题同样适用于柱状图，趋势图、地图等其他可视化图表。

总结

黑白版的色彩搭配没有现成的公式可以套用，需要长期练习，不断实验，它的诞生夹杂着主观喜好，需要借用别人眼睛和意见才能获得一个更为客观的结果！

希望上述内容能对大家在数据可视化设计有所帮助～～