前言:我们都知道颜色在设计中尤为重要,但是在数据可视化中更重要!比如柱状图这个绿色好看,哪一个蓝色好看搭配在一起怎么不好看了?放在环形图中又是“感觉不对”,想必你也会遇到这样的烦恼~ 结合在近期的一些项目中对于HSB色彩模式的应用,在此分享一些配色理论和技巧、以及如何建立自己的可视化色板!

为了让大家对于数据可视化不再那么束手无措,我希望能通过这篇文章和大家一起交流学习,解决一些属于我们共同的问题。

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(1)

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(2)

01色彩模式有哪些?

说到颜色,我们先了解色彩模式RGB、CMYK、HSB;

HSB模式对应的媒介是人眼,在选择色彩这件事上,HSB使用了更贴近人类感官直觉的方式来描述色彩,它把颜色分为色相、饱和度、明度三个因素(将我们人脑的“深浅”概念扩展为饱和度和明度)。

我们平时经常可以看到色轮中相对的颜色是补色,相邻的是邻色,相间的是间色,所以有人会误解以为 2 种颜色互为补色或者间色是因为在色环上的排列,但是真正的逻辑这正好与这相反,并非是颜色在色环上位置决定了色彩的关系,而是色环上颜色的位置是根据色彩关系人为制定的,知道这个,你就能理想为什么会有不同的色环、不同色环上颜色的颜色位置不一样了。

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(3)

我们了解了色彩模式之后会发现每一个色彩模式和我们的生活息息相关,工作中我们通常会使用HSB去配色;下面我会以Sketch为操作工具去呈现。

02 如何搭建我们的色彩体系?

我们在做数据可视化设计时曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型都会用到图表色彩;所以我们在去做的时候要遵循两个原则统一性和辨识度

我们可以根据自己项目的数据类型去使用我们的色板;如有同学想了解可视化数据类型,可查看《数据之美》一书。

数据色板设计包括分类色板,顺序色板,发散色板,叠加色板,强调色板,语义色板;

1.分类辅助色色板

特点:用于分类数据描述,高辨识度,高区分度

我以我们的主题色#4DA1FB为例 根据色环去选择它的类似色:色相差值 30° 以内的颜色为类似色; 15度的颜色区分不大,45度区别过大,所以我们取中间30度颜色为基础颜色的12色环。

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(4)

我们根据色环得出我们的6种辅助色,不过辅助色明度较高,需要进行感官明度上的调整;每一种颜色都有属于自己的“感官明度”,即发光度。所以我们对辅助色进行校正颜色校正。

颜色校正方法:在原来颜色的基础上添加#000000黑色;色彩模式改为色相来确定它的明度值。

校正的原则一:色相差值不能超过15。

色相差值在15以内,能保证校正后的颜色还是为同种色或邻近色,冷暖色调几乎一致,色相也可根据现在的使用场景微整。

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(5)

校正的原则二:尽量保持感官明度一致。我们知道,每一种颜色都有自己的「感官明度」,也就是发光度。根据现有的使用场景,类似色和互补色大都用在同层级的信息展示上,而当我们将最终得到的辅助色摆放在一起之后发现,品牌色以及三个辅助色的发光度不一致,导致视觉上会有明显的明暗差别。因为我们需要通过发光度来进行最终的颜色校正。

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(6)

2.连续色板

顺序色板,一般使用同一或邻近色相,通过明度和饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区新增人口数对比、风险等级变化等。

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(7)

数据可视化图表类型及适用场景(数据可视化基础篇-建立自己的色板)(8)

下次继续介绍其他色板以及应用,欢迎交流!

,