数据可视化色彩篇-颜色的秘密

用户头像
北京/UI设计师/5年前/685浏览
数据可视化色彩篇-颜色的秘密

本文重点向大家介绍数据可视化调色板的类型,分享色彩搭配时的常规技巧和实践总结并推荐几款生成可视化色彩板的工具。


 一、调色板的类型


三种主要类型的调色板:定性调色板;顺序调色板;发散调色板(可视化中使用调色板的类型取决于数据的性质。)


1、定性调色板

三种主要类型的调色板:定性调色板;顺序调色板;发散调色板(可视化中使用调色板的类型取决于数据的性质。)

 

 

在定性调色板中,每组颜色都不同。 根据经验,最好将颜色数量控制为10种或更少。如果数值过多,则应尝试将这几个数值合并在一起展示,因为颜色越多,越容易造成认知混乱。如下图将几个最小的类别合并为“其他”。

 

                                     左侧的最小切片会造成调色板中颜色的重复使用,视觉区分困难

 

我们在调整颜色的亮度和饱和度时,表示同类型数值的颜色差异不要太大,过大的差异可能表明这种颜色比其他颜色更重要。除非两个数值之间有相关性,否则请避免使用具有相同色调但亮度和饱和度不同的两种颜色。例如下图折线图所示为错误示范,每日数值浅色线条,而每周数值为深色。

 

2、顺序调色板

如果变量是具有固有顺序的数值,则可以使用顺序调色板进行可视化描述。通常以亮度和色相变化为基础,将数值与色彩一一对应。

 


 

顺序调色板的主要维度是色彩亮度。通常在浅色背景上,较低的值与较亮的颜色关联,较高的值与较暗的颜色关联。而在深色背景上,情况则相反,用较亮的颜色表示较高数值。

 

顺序调色板的次要维度是色相。只需将单个恰当的色相用于色彩映射即可,大多数情况下,通过改变亮度来表示不同数值。


3、发散调色板

如果我们的数值变量是具有特殊意义的中心值,例如零,那么我们可以用发散调色板进行可视化描述。发散调色板本质上是两个顺序调色板的组合,中心值位于共享端点,大于中心值的数值使用一侧的颜色,而小于中心值的数值则采用相对侧的颜色。



 


通常,每组顺序调色板都使用两种色相差异较大的颜色,以便于区分相对于中心值的正值和负值。与顺序调色板一样,通常为中心值设置为浅色,越深的颜色表示距中心值的距离越大。

 

4、离散与连续调色板

顺序调色板和发散调色板可以通过两种不同的方式与数值相关联:一是作为一组离散的颜色(每个颜色与一个数字范围相关联),二是作为数值和颜色之间的连续函数。

 

相较于位置或长度,颜色与数值的关联性更弱,值的离散化可以通过展现数据的广泛模式来减轻认知负担。另外,我们通过设置离散调色板的值范围来展示数据范围,使用离散调色板意味着我们可以通过创建大小不等的范围,以更好地表示数据中的差异。

 

 

离散调色板的一个主要缺点是,我们无法比较同一范围内两者的精确值(例如,在上面的示例中,在德克萨斯州和加利福尼亚之间,是无法进行比较的);而连续调色板会通过颜色展示数据的差异。

 

二、一些常规技巧


1、避免使用过多色彩

尽管颜色是数据可视化的重要组成部分,但要注意避免过多使用颜色,并非创建的每个图表都需要多种颜色。如果仅要绘制两个变量,除了两个变量采用不同颜色,其余可以用面积大小进行展示;一般仅在有三种及以上的变量时才使用多种颜色。

 

     左侧彩虹条颜色没有意义,避免使用。右侧推荐方案,为了显示两个彩色条,其他用中性灰色展示

 

2、保持颜色一致












如果报表中包含多个图表,相同的类型用同一种颜色表现。因为同一种颜色在图表有不同的含义,会造成理解上的歧义。

 

3、明确颜色的含义

 不同颜色寓意不同,我们可以合理利用颜色的感知来增强可视化效果。如果绘制的图表具有明显的色彩约定(如:政党,国家),则要选用符合用户色彩认知的颜色,可以在原有品牌色彩的基础上创建可视化色板。

 

为了减少视觉疲劳,一般要避使用饱和度和亮度较高的色彩。此外,可以使用不同形状来强调突出的部分。

 

这里要注意的是,在不同文化背景下,人们对色彩理解也不同。例如在有些西方国家,白色象征纯洁、高雅、正直,是西方文化中的崇尚色;而在其他文化的国家则不同。

 

4、考虑色盲患者的需求

据统计,色盲患者占全球总人口的4%,其大多数是男性患者。色盲患者中最常见的是红色盲和绿色盲。由于这些原因,最好尝试改变色调以外的其他表现形式来表示与颜色相关的值,例如亮度和饱和度。我们还可以使用诸如Coblis之类的色盲模拟器来了解最终的可视化效果是否对色盲患者也同样友好。


三、色彩工具推荐

1、ColorBrewer(色彩大师

ColorBrewer调色板的经典参考,某些调色板可能对色盲友好性有疑问,因此需要开启色标窗格上方的眼睛图标,来查阅颜色。


2、Data colour generator (数据颜色选择器

 

 

 

数据颜色选择器是一个快速且易于使用的工具,主要用于生成顺序调色板和发散调色板。默认的“调色板”选项卡最适合用于生成多色相继的调色板,而不是定性调色板,因为端点之间的插值会在色轮中遗漏某些色相部分。

 

3、Chroma.js调色板助手

 

chroma.js调色板帮助器比数据颜色选择器要复杂一些,它提供了用于校正亮度和贝塞尔曲线插值的选项,并且输入颜色值的难度略高。但是,在为算法尝试设置调色板以设置多个停止点时,它提供了一些额外的自由度。该应用程序还在同一页面上设置了一个色盲模拟器,突出显示可能出现问题的最常见缺陷类型。


4、Color Thief

它可以从上传的图片中自动提取出相应调色板,主要用于建立色彩库。


 5、Viz Palette

Viz Palette是也是一个广泛使用的调色板工具。

 

总结

本文简要概述了可视化图表中调色板的选择、颜色的使用技巧及可视化工具的推荐,我们应该根据不同的数据类型选用合理的调色板(定性、顺序或发散),并注意颜色不同特性含义以及是否对色盲患者友好。

展示可视化结果时,务必仔细考虑颜色选择,因为一组好的颜色更容易用户理解,提高信息传达的有效性。 



1
阅读原文
|
Report
|
4
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in