当我们打开一个页面时,第一眼看到的往往并不是板块布局,也不是详细内容,而是页面的色彩。色彩引导着我们进行阅读,强烈的色彩冲击力很容易给读者留下深刻印象,因此对色彩的运用和搭配,将决定可视化的展现效果。
但多数数据分析师在写可视化报告时,都是“一顿操作猛如虎,一看配色还是土”,因为这不像SQL一样,是能够快速通过学习掌握的,配色往往很依赖于一个人的审美思维。但其实也不用太担心,因为审美思维是可以通过刻意练习来培养的。
今天老李就跟大家分享我写可视化报告时的配色心得,在文中我会列举一些常见配色误区和提高搭配能力的4点技巧,最后再分享一些我珍藏的在线配色工具(觉得自己审美实在差的人,赶紧收藏!)。
一、2点常见的配色误区
①配色过亮
看到什么颜色亮眼,就把这些颜色堆在一起,唯一目的就是闪瞎你的眼睛
②配色过多
颜色无需使用文字就可传达大量信息,但颜色过多时就会造成不和谐,且无法突出重点,最终适得其反。
错误例子
正确例子
二、提高搭配能力的4点技巧
第一点:数值指标一致性
当根据某一个指标的数值大小进行颜色映射时,建议使用生长色系的渐变颜色。
没有生长规律的色系
生长色系的渐变色
如上图所示,统计的是新型冠状肺炎病例每个省份的现存病例人数,第一张图颜色没有色系和生长规律,用户难以理解具体指标数值的含义,而此时如果使用第二张图的生长色系的表达方式,它会传达给用户一种颜色可测量感。
那么用户根据这样的渐变生长色系,就可轻松理解每个省份地区的现存病例分布情况。
第二点: 语义颜色一致性
符合语义的颜色可以帮助人们更快处理信息,所以需要选择符合人类最直观感受的颜色。
1)通过不同颜色表示系统的稳定状况,参考我们的红绿灯,既生动又易于理解:
绿色表示当前进展正常
橙色表示预警需要关注延期原因
红色表示某个项目已经异常,影响线上业务,需要立刻处理
紫色表示暂不需要关注
2)比如在分析股市时,我们可以使用统一的红绿配色,分别代表了股票的上涨和下跌。
3)因为人的视线第一眼就会被一些颜色(比如红色)吸引,那这些东西应该是最需要让用户注意的地方,比如使用红色进行预警:
第三点:指标颜色一致性
在同一仪表板中,对于相同的指标尽量使用同一色系的颜色方案,避免使用过多的颜色对用户造成干扰。
例如我们在做营业额利润分析时,通常分析指标会有成本、利润、利润率,那么即使我们在对同一个指标做不同维度的数据可视化分析时,对于相同指标建议分别使用相同的色系进行配色,如下:
成本:蓝色
利润:绿色
利润率:黄色
我们在遵循这样的指标颜色一致性配色原则之后,用户就能够快速地根据颜色区分来理解当前的数据可视化图表所要表达的指标含义。
第四点:色系颜色一致性
如果我们是自定义配色,就需要避免一些撞色,就如我文章开头所举的第一个常见错误配色,把黄+白、蓝+黑、红+蓝、黄+紫等等色系进行搭配,这样不但从感官上不美观,而且还容易对用户的眼睛造成刺激。
三、在线配色工具
这里整理了一些常用的配色在线工具,懒人必备,懂我意思吧,赶紧收藏吧。
①ColorDrop
网址:https://colordrop.io/
这纯粹是一个懒人网站,网站提供了437种配色方案,如果你不怕挑花眼的话通过这个网站你可以轻松的获取你想要的配色的RGB值与HEX(十六进制形式)值。
②Colours
网址:http://webcolourdata.com/
如果你想分析一个网站的配色,这个工具就很适合你。你只需要把你想要分析的网站的链接丢进这个网站他便可帮你快速高效地分析出网站的配色方案。而且分析的结果会有三种不同的图式来表示,很靠谱很专业。如果你想模仿一个网站的配色,这个工具是一个不错的选择。
③ColorFavs
网址:http://www.colorfavs.com/
同样也是一个懒人配色网站,可以通过你上传的图片或者网络的图片来分析图片的配色构成。并且你可以查看别人的分析结果。对于借助图片来配色的情况可谓是很有帮助的,能省下不少的功夫。
④中国传统色
网址:http://zhongguose.com/
这个网站很多人都知道,主要以中国传统色为主。主要提供一些很经典的传统色,比如胭脂色、朱砂色、鸭蛋青等,而且是根据中科院的一些资料制作的,所以这的颜色都是很正点的,用在与古风相关的设计中最合适不过了。
⑤日本传统色
网址:http://nipponcolors.com/
与上面的网站类似,这个网站提供日本传统的颜色。用在一些日系的设计中也是很有感觉的。
⑥Color Schema Design
网址:
http://www.peise.net/tools/web/
这个网站提供了六种配色模式:单色、互补色、三角形搭配、矩形搭配、类似色搭配、类似色搭配互补色。同时还提供对比度调节,饱和度/明度调节等参数调节,最厉害的是可以直接预览应用配色后的网站的样子,很直观高效。而且网站提供的仪表盘操作也很有专业的感觉。对于有想法,喜欢自己动手实现的人来讲是在合适不过了。
⑦色轮
网址:http://dwz.cn/gome002
这是有Adobe出一款配色工具,提供七种配色规则。虽然界面上操作很简单,但是对于颜色的调节上功能一点都不差。非常靠谱。同时除了支持常见的RGB值、HEX值还支持CMYK值、LAB值、HSB值,非常专业。
网友评论