数据可视化怎么配色?这些技巧值得一试。
2022-10-4 11:0:33 Author: sspai.com(查看原文) 阅读量:18 收藏

Matrix 首页推荐 

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。 
文章代表作者个人观点,少数派仅对标题和排版略作修改。


你是否也在作图时也遇到过以下情况:

  • 软件默认的颜色千篇一律,没有亮点
  • 想自己选点新鲜的颜色,却调来调去都觉得辣眼睛
左图,Excel 的默认配色很单调;右图,饱和度过高的颜色十分晃眼。

于是心想,与其自己挣扎,不如找点参考。平面设计的配色网站那么多,从中找几个好看的颜色还不是分分钟的事?然而事情似乎也没这么简单。

Color Hunt 网站提供的配色

从网站上找来一组颜色,试了试第一眼还不错。可网站上的颜色都是四个一组,数据多了不够用,东拼西凑起来图还是不好看。而且网站给的颜色经常比较接近,混在一起图的辨识度有所降低,看起来乱糟糟的,什么信息也没有。

配色挺好看,但颜色之间的区分度很差

这是因为平面设计中的一些颜色方案,虽然和数据可视化有共通之处,但是可视化的颜色还有些特殊的要求。为此,我总结了一些进行可视化绘图时选择颜色的注意事项,整理了一些工具和色彩合集,以供参考选择。

TL;DR:本文包含以下部分,可以按需阅读:

  • 人眼的色彩感知与常见的色彩模型,及为什么会有不同的色彩模型
  • 如何根据数据类型,选择适合的色彩组合
  • 打开即用的配色合集与工具
  • 一些额外的注意事项

色彩模型

这部分介绍了人感知色彩的原理,同时介绍了两种色彩模型,及我们为什么会用到不同色彩模型。如果觉得这部分过于枯燥,可以直接跳到下一部分,看看如何根据数据类型选择合适的颜色。

人眼的色彩感知

我们能看到五彩斑斓的颜色,主要与人眼的生理特性有关:视杆细胞和视锥细胞在其中各司其职。视杆细胞主要负责感受光的明暗,视锥细胞负责感受不同波长的光。大多数人有三种不同类型的视锥细胞,它们对不同波长的光敏感度不同,按敏感度的峰值分为红色、绿色和蓝色。当某些视锥细胞缺失或敏感度发生变化,将导致色觉异常。

boxcn67ubwFFEu4JvqHYt5V1TWd
三种视锥细胞对不同光波长的光具有不同的敏感度。来源:Medium

RGB 模型

RGB 模型绝对称得上是数字时代最为常见的色彩模型,它将红色(R)、绿色(G)、蓝色(B)三种颜色的光,按照不同比例混合,得到各种不同的颜色。RGB 模型如此流行,一方面是因为它符合人眼对色彩的感知过程(对应三种视锥细胞),另一方面,屏幕上的每个像素也都是由红绿蓝三个次级像素组成,直接以此方式编码, 极大地方便了在屏幕上进行显示。

boxcnLWoXshOiewpatQL7cBUeGd
RGB 模型采用三种颜色光混合得到其他颜色。来源:RGB vs CMYK

HSB/HSV模型

虽然 RGB 模型符合人感知的生理过程,但它并不符合人对颜色的直观感受。我们看到某个颜色时,不会把它拆分成红绿蓝三个组分,而是直接感知三种视锥细胞叠加后的效果。因此,后来又出现了称为 HSV 的色彩模型(也称 HSB)。

boxcnEAnfHcM4C7QDPfhwAyfhbc
来源:Wikipedia

在软件中使用色轮选择颜色时,你也许遇到过这个模型,它将所有颜色置入了一个倒置的圆锥形空间中,采用三个维度的数值描述颜色:

  • 色相(Hue),圆锥的最外围一圈,即它是什么颜色;
  • 饱和度(Saturation),圆锥上某个点到中轴的距离,离中轴越近饱和度越低,颜色也越接近黑白灰;
  • 亮度(Brightness 或 Value),圆锥上点到尖端的距离,越接近尖端,亮度越低(越黑)。

HSV 相比 RGB 直观在哪里?举个例子,下图中的两个颜色,是不是第一感觉右边比左边的更暗。在基于 HSV 模型调整颜色时,只需要将左边的颜色降低亮度,就可以得到右边的颜色。但要是通过 RGB 来调整,需要同时调整红绿蓝三种颜色各自的含量,一不注意颜色就跑偏了。

boxcncGzJNZxa7vP0u720XVe7So

为什么要有不同的色彩模型

要理解不同颜色与色彩模型的关系,一个很好的例子是不同地图投影下的航班路径图。我们将色彩模型视为地图投影方式,把两个颜色当做航班的出发点和终点。根据选择地图类型(色彩空间)的不同,同样的飞行路径(颜色变化过程)可能看起来大不一样。

boxcnwvp4r69xcXCvlDwkzrhEvc
左,墨卡托投影地图上从洛杉矶到莫斯科的飞行路线;右,正射投影。

因此,不同的色彩模型有助于我们以不同的方式理解颜色,选择恰当的色彩模型也能让得到理想颜色的过程变得更为简单直观。

根据数据类型选择颜色

类别色阶(Categorical color scales

橘子、葡萄、山楂,就像这些水果没有好坏的分别,类别型的数据没有直接的顺序关系。因此,在展示类别型数据时,需要使用没有顺序关系的颜色进行区分。诸如不同实验材料,或是不同的国家,这样的数据都属于类别数据,要用类别色阶Categorical color scales)。

何为类别色阶?红色、黄色、蓝色、绿色,没有顺序的颜色对应没有顺序的类别,这些颜色中,某种颜色并不比另一种颜色更为重要。

boxcngMHTzkYTKgRyHXawftoTxe
对类别数据使用类别色阶。

单向色阶(Sequential color scales)

如果用颜色表示一组有顺序的数值,情况会稍微复杂一些。一些情况下,数值单向地发生变化,比如从 0 增加到 100,这样的数值应当采用单向色阶(Sequential color scales)进行表示。

boxcnkBmNs6fk4K93f3rMHLfyRg
对有序数据使用有序的色阶。

单向顺序色阶是从暗到亮 (从亮到暗)的颜色渐变,它们适合展示从低到高变化的数值数据,比如温度、质量或浓度。通常这样一组颜色中,亮度、饱和度与色相同步发生变化,给人一种更直观的顺序关系。

boxcnDpgndKHkOXHsvOl8osFWHg

应注意:

  • 在单向的顺序色阶中,只能使用一到两种色调,比如从浅蓝色到深蓝色(单色,蓝色),或是从浅黄色到深蓝色(双色,蓝色和黄色)。
  • 好的顺序色阶中,变化的并不只是颜色的色相,颜色的亮度与饱和度也在同步变化。
  • 最好对低值使用浅色,对高值使用深色(亮度更低、饱和度更高的颜色)。对于多数人来说,这将更加直观。
boxcnokR3RmPXWNbzAxRLbUKx2d

双向色阶(Diverging color scales

上面说到单向递增(递减)的数据用单向色阶,可数据只能单向变化,为什么会有双向的色阶?这取决于你的数据有没有明确且有意义的中间值

双向色阶通常用于:

  • 正值和负值这样两端有明确对立关系的值
  • 中间点有意义,比如 0、50%、平均值或是选定的阈值
boxcnOetBkM6xx0J8NY4OeI1DOj

双向色阶(Diverging / bipolar / double-ended color scales)与单向色阶类似,但是它不再是亮度或饱和度的从低到高变化,它通常中间亮度更高,从中间向两侧饱和度与亮度同时变化。

boxcn63rnzhoBoIM01hqXWGblCe
中间颜色的亮度更高,饱和度更低。

从色彩合集中选择颜色

最初,每当我要选择颜色时,都直接从调色板中随便点一个,可调来调去总感觉缺乏美观。于是我找来了不少平面设计的配色网站,但这些网站给出的配色通常只有四个颜色,且与我的数据也好像总也合不来。我继续找,发现还有些配色是专门适用于数据可视化的。这里介绍以下几个工具。

Data Viz Color Picker

The Data Viz Color Picker 可以根据你输入的起始颜色,生成一组渐变色。并且有单向与双向色阶的不同选项可供使用。

boxcncDYhR55ty9uqHzTO8PYMIe
单向渐变色阶
boxcnebxKGf9uWU3hrXbZwGiA3n
双向渐变色阶

Leonardo

Adobe 出品的开源工具,可基于对比度创建设计用的颜色系统。其中有一个部分,Color scales,专门为数据可视化生成配色集。Leonardo 同样可以选择不同的色阶类型,并提供了多种分析工具,可以查看颜色间的对比度,并确认是否适合色觉异常人士。

Leonardo 的 Color scales 部分可以生成可视化用的颜色集合

CARTOColors

CARTOColors - CARTO 按照数据的类型,给出了三类不同的配色,点击颜色可以查看效果,遇到满意的颜色也可以直接复制对应的颜色值。

boxcnHvQoskPzz2U6MiCeoTcUKb
Sequential schemes
boxcntKdRFFVsvJkGv9czD8oZMd
Diverging schemes
boxcnSrSBCvyaegnczO29lUDHpe
Qualitative schemes

Colorpicker for data

相比于前面提到的三个网站,Colorpicker for data 很直接,把调色板怼在脸上,拖动线段的起点和终点,就可以生成均匀的渐变色。它有更高的自由度,更灵活的同时也更难以驾驭。如果厌倦了前面网站给出的颜色,也可以从这个网站开始,调出一套属于你自己的配色方案。

boxcnrUhLE6ixv4gyAJATSWcOWg

Chroma.js Color Palette Helper

在上面的工具之外,还有 chroma.js palette helper,可以在你拿到一组颜色后,分析它们的色相、饱和度与亮度的变化趋势,借此判断这组颜色是否合适,同时它也提供了不同色觉异常人群看到颜色后的实际效果。

boxcniQls1cTyhiBk7XMNLp1CXP
Chroma.js Color Palette 可以对颜色的属性进行分析。

注意事项

除了根据数据的类型选择颜色,还有以下方面,也是在选择颜色的时候需要考虑的。

色觉异常

开头提到,由于三种视锥细胞的存在,我们可以感知红绿蓝三种颜色的组合。如果其中某种视锥细胞的灵敏度不足,将会导致色弱;如果某种细胞完全不起作用,就会引起色盲。因为有三种类型的视锥细胞,因此有三种类型的色弱,和三种类型的色盲。

在人群中,色弱相比色盲更加常见,约 6-7% 的男性有某种色弱,而大约 2–3% 的男性是色盲。

boxcnvgddQv1T2aOVdbKIcH85Lw
不同色觉异常在人群中的发生比例。来源:Wikipedia

因此,应当尽量避免某些颜色的组合,比如红色-绿色-棕色的组合,在红绿色盲的眼中,它们长得都差不多。

boxcnucPB7l5MMQ9qZP3xI6Zl8g
色觉异常人群眼中的红绿蓝会有所不同。

此外,在选择颜色时,不仅选择不同的色相(Hue),让饱和度和亮度同时变化,有助于增加色彩的区分度,这也能让一般人对颜色的辨别更加高效。有些工具可以给出相同配色在不同色觉异常人士眼中的效果:

boxcnDkCntPRiuKM2b7vqGaN4xh
Chroma.js Color Palette Helper 

另一方面,采用颜色和模式同时进行区分,比如加上不同的线段或阴影,也能增加颜色的辨别度。

boxcn6gqGVpmNIOs2fQY545GzBd
为颜色增加填充模式,能一定程度上提高色块的辨识度。

少即是多

如非必要,勿增实体,这在选择颜色时也成立。某些情况下,不需要使用太多的颜色,就足以达到想要的效果。这些情况下,就该考虑是否有必要选择那么多颜色了。

能不用,就不用。有时候,并不需要使用颜色,就可以区分不同的样本:

  • 是否有替代颜色的分组表示方式,比如采用坐标轴上的位置;
  • 尽量用颜色来代表「一组数据」,而非某个特定的数据。
boxcndpOwdwvgy4vsLDgAGLAL8g
克制地使用颜色。来源:Adobe Spectrum

能少用,不多用,避免同时使用过多颜色。颜色本身是帮助区分类别的,但是颜色越多,就越难快速阅读和理解,在读图时将不得不反复在图例和图形间来回查阅,使图片直观性有所下降。如果图中使用了超过七种颜色,可能要考虑其他的图表类型,或是将类别进行组合;

boxcneh5kA9NIjCVJNCZB8f4pvs
恰当分组减少颜色数量。来源:Adobe Spectrum

更好地分配颜色

在文章中多次对相同类别进行作图时,对同样的类别使用相同颜色,可以帮助读者简化理解过程,也能让整体更加清晰直观。

boxcnF5fsTjL5cydiD95dCNzSpb
合理复用颜色来表达相同的概念。来源:Adobe Spectrum

关联阅读

上面我简单总结了一些在可视化过程中,选择颜色时的一些注意事项,还有很多遗漏之处。对此如果感兴趣,这里提供一些比较好的资料和文章:

可视化工具 Datawrapper blog 中关于选择颜色的建议:

Adobe Spectrum 给出的可视化颜色选择建议:

参考资料

> 下载 少数派 2.0 客户端、关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀

© 本文著作权归作者所有,并授权少数派独家使用,未经少数派许可,不得转载使用。

Yorkson

All those moments will be lost in time. Like tears in rain.


文章来源: https://sspai.com/post/75989
如有侵权请联系:admin#unsafe.sh