首页 首页 大数据 查看内容

拒绝买家秀,让数据可视化作品炫酷到没朋友的配色三原则

木马童年 2018-9-15 00:25 6 0

对于大数据公司来说,这个问题更明显,因为他们不是需要一套专业的数据可视化配色方案,而是需要成百上千套适用于不同行业的、不同场景的、不同类型的、针对不同客户的、能够和不同图表布局兼容的配色方案。存在的问 ...

对于大数据公司来说,这个问题更明显,因为他们不是需要一套专业的数据可视化配色方案,而是需要成百上千套适用于不同行业的、不同场景的、不同类型的、针对不同客户的、能够和不同图表布局兼容的配色方案。

存在的问题

以笔者(Graphiq 设计主管 Samantha Zhang女士)的经验来讲,我们团队并非从一开始就埋头设计我们自己的配色方案,而是先对网络上已经存在的配色方案进行研究。遗憾的是,我们并没有在网上发现非常适用于复杂图表展示和数据可视化的配色方案。

通过研究,我们觉得已有的配色方案并不适用于数据可视化的原因有以下几点:

1.可用性差

我们看过的许多配色方案并不是为数据可视化设计的,它们不仅在亮度上没有足够的变化,而且通常不会考虑到可读性。扁平化的风格是我们见过的网络上使用最广泛的配色方案之一,原因很简单:颜值高。但是,扁平化颜色(Flat UI Colors)是为用户交互界面设计的,对于那些色盲的人来说,他们可能很难分辨扁平化风格的数据可视化作品。

扁平化颜色的3种模式:

全色模式:

红色盲模式:

灰度模式:

2.颜色太少

许多现有的配色方案中颜色很少,在做Graphiq的可视化作品时,我们一套配色方案至少要有6种颜色(通常在8~12种),以确保有足够的颜色来阐释我们的数据。

以下是几个Color Hunt网站上的配色示例:

虽然这些配色方案很好,但不够灵活,还不足以阐释复杂的数据。

3.难以辨别

有的配色方案采用了渐变色,理论上讲,采用渐变色可以从一个颜色里创建无数颜色,但是这些颜色的亮度通常没有足够的变化,很多时候几乎难以区分,就像下面这些。同样来自Color Hunt。

如果我们选择第一个方案,然后把它扩展为10种颜色来表达10组数据,那就会变成下图这种情况。如果真用这10种颜色做可视化作品,你要是能区分开前3种颜色算我输。

在Graphiq工作,我们无时无刻不在跟数据打交道,我们投入了很多精力,设计了很多好的配色方案来确保我们的可视化作品的质量。在这个过程中我们学到了很多,现在给大家分享一下我们总结的三个原则,帮助大家设计出既颜值高又灵活的配色方案。

原则1:在色调和亮度上留足够的范围

为了确保配色方案中的颜色既接近又容易区分,它们在亮度上的变化必须足够大。同时,要测试在不同的亮度下,你所选择的颜色在红色盲、绿色盲和灰度模式下是什么样子,以便尽量让所有读者都能区分。

浅蓝色的全色模式:

浅蓝色的红色盲模式:

浅蓝色的灰度模式:

然而,仅在亮度上有变化的配色方案还远远达不到要求,在配色版中增加别的颜色,读者可以更容易地接收到数据可视化作品所要表达的信息。对于非色盲人群来讲,如果我们可以利用更多的色调,他们可能更喜欢。

对于亮度和色调,取值的范围越大,能支持的数据组越多。

原则2:遵循自然的颜色模式

从纯粹的数学观点来看,从浅紫色转变为深黄色的过程应该类似于从浅黄色到深紫色的转变。但是看看下面的图例,我们会很明显地感觉到前者显得很自然,而后者显得不自然。

这是因为我们一直在自然界中接收的颜色变化梯度是:在日落时,明亮的黄色慢慢过渡到深紫色,但是很少看到一个由浅紫色转变成深黄色的过程。

在可视化中使用符合自然渐变的色调变化时,读者会感觉熟悉和愉悦。

原则3:使用渐变而不是选择静态颜色集

包含不同色调的渐变配色方案非常适用于数据可视化。无论你需要2种颜色还是10种颜色,你都能够从渐变色中有规划地挑选颜色,并且在亮度、色调和符合自然规律上都能满足要求。

在数据可视化的设计里,渐变色的上手并不简单,不过有一个好的练习方法:

在Photoshop里用网格线标记不同的渐变色调,不断测试渐变和进行调整。

这是我们在完善我们的渐变方案时的截图:

我们的取色板

冷色:

暖色:

霓虹色:

作品示例:

原作者为Graphiq设计主管 Samantha Zhang女士。

在不久的将来,多智时代一定会彻底走入我们的生活,有兴趣入行未来前沿产业的朋友,可以收藏多智时代,及时获取人工智能、大数据、云计算和物联网的前沿资讯和基础知识,让我们一起携手,引领人工智能的未来!

大数据 数据可视化
0

聚焦多智时代,引领智能变革

© 多智时代(www.duozhishidai.com)版权所有 / 工信部备案 豫ICP备15012664号-1