莫兰迪色系rgb参数_大火的“莫兰迪色系”也可以用于图表博眼球? | 让你的可视化图表颜值倍增~...

585c34f40b01c00dfda2cfa2de505b47.png

还记得延禧攻略里大火的莫兰迪色系吗?大家都觉得好久没有看到配色这么舒服的宫廷剧了!!本期我们就为镝er们准备了一些通用技巧,在数据可视化的过程中,这些小tips能够很好地帮你避免图表配色误区,让你的图表展现最佳状态!

1、多彩配色:喜欢也要学会克制

在数据可视化的过程中,我们常常通过使用配色让图表更好地表达信息。然而,在许多图表中,配色却没有被合理使用。

许多时候,我们容易首先考虑设置多彩的颜色去达到外观的酷炫,而没有考虑到这些颜色是否有实际的意义。显然,多彩的图表可能有助于广告效果,却分散了读者对于真正有价值的数据本身的注意力。

6879b451ae3ed8cbb9397f70294a9228.png

2、色调与明度:让数据更有辨识度

在把数据进行可视化的大多数情况下,我们需要让配色容易辨识与区分,也就是说,它们的明度差异一定要够大。然而,有一组明度跨度大的配色还不够,配色越多样,用户越容易将数据与图像联系起来。如果能善于利用色调的变化,就能使用户接受起来更加轻松。

对于明度与色调,跨度越大,就能承载越多的数据。下图中第二行就是一个反例,颜色之间辨识度太低,容易模糊不同数据系列的界限,你会很难分辨相邻两色的区别。

ded2419562d74daa0de3bb668f562a92.png

3、缺乏灵感:向大自然取取经吧

其实并非所有的规则都是有理论基础或是由经验得来的,有些精美的配色方案可以说是“浑然天成”。试想,为什么鲜花有鲜艳的色彩?显然是为了吸引鸟类和蜜蜂的注意力,从而保证花粉的有效传播和物种的延续。当配色缺乏灵感时,我们不妨向大自然取取经。

下面我们来看一个有趣的例子。“淡黄到深紫的过渡”与“淡紫到深黄的过渡”,这两种方案听起来是否感觉大概相似?但我们在下面可以看到,前者感觉很自然,后者则不是。

7ec1506d3e9639e44d9e448d5ce10d91.png

这是由于我们已经习惯于那些在自然界中随处可见的渐变。在华丽的日落中,我们就能看到明黄色向深紫色的渐变,但却没有哪里能看到淡紫色向深黄色的过渡。

2f12753c385960eac80618a4a425cd9d.png

4、渐变色:配色的万能法宝

色彩理论记不住?take it easy! 有一种方法可以轻松运用彩色,那就是使用渐变。无论你只需要2种颜色,还是需要10种颜色,渐变中都能提取出这些颜色,并让图表看起来和谐而自然,因此不失为一种保险的方法。当然,最深和最亮的颜色用于最需要突出的序列。

正像之前一期中介绍到的《商业周刊》那样,当我们想强调数据的差异性时,我们选择互补色。那么如何来表现数据的相似性?

答案依然是使用渐变。当各组之下还有亚组时,就可考虑用渐变色表示相似的关系。渐变色的色相可以是色环上左右邻近,但更好的是用同一颜色(色相)的不同明度:

1b3055c0b32724ee2676e129c4f6b44c.png

比如下图的各亚组之间就运用了同色相的不同明度。

d5ec0994f18a9e3fee170ed546a4c554.png

而各组之间,图A的橙、绿、紫,在色环中是个等边三角形分布,视觉上的对比更为强烈。而图B的绿、蓝、紫则分布在从绿到紫的1/3弧上,则让人容易想到它们之间是有某种联系。

622edeeb69630d92a75614e89b9e0ba6.png

渐变色有两种常见的调制方式:一种是顺序调色板或连续调色板,即参照单一色相的深浅变化,多用来表示数值的增量变化:

87c4f2461f453f7466b63994dd675e42.png

另一种是离散调色板,或双序调色板,即从一种颜色过渡到另一种颜色,多用于高于或低于某中间值的数据比较。

1a3610208787a6bfa9d0020c8316b767.png

在镝数中,渐变色也可以应用到很多图表中,比如地图、日历图、条形图、柱状图等:

80bc9d6a36b3097a5108c6d949f9a31c.png

5、背景色:影响数据可读性

我们对事物颜色的判断会受其周围颜色的影响,换句话说,视觉系统对颜色的感知是相对的,而不是绝对的。请看下面的四个方块,你是否觉得左边的比右边的暗一些?

0f3f7426ae0184c3bf17a1b9d2155135.png

可实际上它们的RGB值是完全相同的。因此在绘制图表时,背景一般采用纯色,否则背景会干扰读者对图片主体信息的读取。

另外,浅色的背景显然更有利于用户阅读,可以提高数据的可读性。但是在界面内容过少的情况下,我们可以使用深色背景,使其看起来不那么单调。

6、低饱和度:拯救你的配色问题

在配色过程中,有时我们挑选了喜欢的颜色,搭配出来的效果却不如人意。是颜色选的不合适吗?别着急,尝试降低它们的饱和度吧。

6987120a2d581688a3fd713b26e77c96.png

不过仍要注意颜色之间的辨别度,避免不同数据系列的颜色混淆。另外,避免广泛运用艳色的好处是,当你有某个很想要强调的数据时,你可以轻松使用明亮的色彩来表示。

3d1d9a224b2df02e6c24ad9f6bfd2588.png

简单的小技巧即可让数据可视化的颜值倍增,点击登陆到镝数——中国首个数据查找与可视化平台中,免费试用,找到心仪的图表模板,把喜欢的配色拿去试一试,你会发现根本停不下来!

如果还想知道图表的相关知识,可参看往期图表家族:

小镝同学:工作效率低?你的时间到底安排好了没! | 甘特图的巧妙运用​zhuanlan.zhihu.com
a4f81f6d02921cb9e770c4ef2b2f7a86.png
小镝同学:酷炫词云图:教你如何优雅地划重点!​zhuanlan.zhihu.com
ffc16f8252cc0d47be3e3366040d49ab.png
小镝同学:饼图还有多种“变身”?这算是哪块小饼干!(文末附超详细饼图制作tips)​zhuanlan.zhihu.com
a02805250afbf8eb716025b6240488a2.png

或关注我的公众号Dydata镝数(dydata), 后台留言告诉我。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值