专栏首页量子位数据可视化配色指南:三大配色方法,做出咨询报告一样的图表丨附在线工具资源

数据可视化配色指南:三大配色方法,做出咨询报告一样的图表丨附在线工具资源

做数据图表的时候,只会用Excel里的系统默认颜色?

别别别,大家都用默认配色,千篇一律,毫无特点。

可是学习色彩设计,又是十分费工夫的一件事,不仅要搞明白RGB、CMYK等各种颜色体系,搞懂各种配色方法,重点是还要看大量的案例,培养良好的审美观,防止自己做出来的东西辣眼睛……

不如我们来“一文学会”系列吧,这篇Michael Yi发在Medium上的文章,就简单清晰的介绍了三种数据可视化中的配色方法,让你的图表看起来清晰、翔实、用户体验友好,就像咨询公司的报告一样专业。

另外,还有不少实用技巧和工具~

三种配色方法

根据数据的不同类型,有三种不同的调色方法。

定性调色板

定性调色板主要用在分类展示的数据图中,比如不同国家、不同企业、不同个体分类展示,每个类目没有固定的顺序。

当然,你必须得给每个类目一种专属的颜色,不然重复了或者颜色太接近就分不清了。

实在不行可以给同一种颜色调整明度和饱和度,比如红色有暗红色、大红色、粉红色,不过,最好是同一种色系之间有某种联系,比如浅色是以日为单位,深色是以周围单位。

或者,用最简单粗暴的方式,把数目太小的那些类目打包起来,命名为“其它”。

顺序调色板

如果你的类目是按照一定顺序排列的,或者就是数字,那么可用顺序调色板,用颜色的深浅表示数据。

比如可以用比较浅的颜色表示比较小的数字,用比较深的颜色表示比较大的数字。

分散调色板

分散调色板更像是两个顺序调色板拼起来一样,只不过区别是颜色较暗淡的放在中间部分,两边各选择明亮的颜色。

这样做的意义在于,中间暗淡的部分可以用作中心值或者参考值,比如用蓝色表示正数,用橙色表示负数,中间的灰色则是0;或者用蓝色表示正面,用橙色表示负面,用灰色表示中立。

重点避坑指南

掌握了方法,还要注意规避一些问题。

不要乱用颜色

如果你需要在许多个类目中强调个别几个,那就在颜色上加以区分。

比如在这张图里,如果你只想强调Cobras和Bulls两个类目,那就不要把所有类目都加上颜色,可以选择把其他设计成灰色,给这两个类目加上颜色。

系列配色保持一致

如果你的整份文件里包含很多图表,那么在不同的图表中,同一个类目最好用同一种颜色。

这样当你的读者从头到尾往下看的时候,不会因为颜色所指代的目标变了而感到懵逼。

颜色,是有意义的

另外,在不同情况下,颜色是有不同意义的,比如我们做一个阿里和腾讯对比的图,那么用橙色指代阿里,蓝色指代腾讯就非常合适了,因为他们本身的logo就是这两个颜色。再比如,公司内部的文件,可以用自己公司的品牌色来作图。

而在不同国家不同文化中,同一个颜色的意义也是不同的,比如大红色,在我国往往给人一种过年的感觉,但在一些西方国家则可能意味着热情,也可能意味着危险。所以,配色的时候考虑一下你的受众。

另外非常重要的一点是:

不要用荧光色! 不要用荧光色! 不要用荧光色!

这些高亮度高饱和度的颜色,只会让你的读者感到亮瞎了。

甚至,在必要的时候用灰色展示非重点数据,也可以将重点数据展示的更清晰。

对色盲友好一点

另外,你总会遇到色盲人群,其中红绿色盲最多,所以,在设置颜色的时候,除了调整色相之外,可以稍微调整一下明度和饱和度,这样他们也可以分得清不同颜色代指的类目。

或者,你可以干脆用色盲模拟器,来看看你的配色能否被色盲人群分辨出来:

https://www.color-blindness.com/coblis-color-blindness-simulator/

配色工具

最后,这里有一些在线配色工具可供选用。

ColorBrewer

这个工具的配色非常经典,几乎就是office里的默认配色。

http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

Data Color Picker

用于生成两种颜色的渐变,可以自由选择需要多少种颜色过渡。

https://learnui.design/tools/data-color-picker.html

Chroma.js Color Palette Helper

可以制作顺序调色板或者发散调色板,根据不同需要调整调色板的渐变过程。

https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1

Color Thief

我们知道许多自然情景中的颜色都是让人感到舒服的配色,这款工具就可以帮你把照片中的颜色提取出来。

https://lokeshdhakar.com/projects/color-thief/

Viz Palette

对色盲非常友好的调色工具。

https://projects.susielu.com/viz-palette

传送门

How to Choose Colors for Your Data Visualizations 作者:Michael Yi https://medium.com/nightingale/how-to-choose-the-colors-for-your-data-visualizations-50b2557fa335

本文分享自微信公众号 - 量子位(QbitAI),作者:关注前沿科技

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一架无人机加入警队4个月,墨西哥小城犯罪率下降了10%

    今年,在这座四通八达的海滨城市,警方已经开始让一架大疆Inspire 1协助执法了。注意,是一架。

    量子位
  • 比夏洛克还厉害:人工智能开始协助警方破案

    安妮 编译自 Newscientist 量子位出品 | 公众号 QbitAI “很多人认为,侦查是一门关于连线匹配的学问。其实最困难的部分,是找到需要连接的线索...

    量子位
  • 提前11秒,AI让神经科学家预知了你的决定

    神经科学家的研究来自一项有14名人类受试者参与的实验,当然,这次的选择不是鸡肉饭和牛肉面,而是:

    量子位
  • 数据可视化配色指南:三大配色方法,做出咨询报告一样的图表

    可是学习色彩设计,又是十分费工夫的一件事,不仅要搞明白RGB、CMYK等各种颜色体系,搞懂各种配色方法,重点是还要看大量的案例,培养良好的审美观,防止自己做出来...

    用户2769421
  • 一对一直播开发PHP源码

    一对一源码在php开发中我们经常会遇到一些功能需要二级联动,二级联动就是说我们在选择一级select不同的option,下面的二级option的属性值在进行相应...

    nicai123
  • 腾讯云服务器配置https 部署安装ssl证书

    由于个人目前开发个人小程序应用,发现接口请求地址正式环境必须https请求,顺便就将自己的服务器安装ssl证书。以下简单介绍。

    用户6626030
  • 腾讯云服务器配置https 部署安装ssl证书

    由于个人目前开发个人小程序应用,发现接口请求地址正式环境必须https请求,顺便就将自己的服务器安装ssl证书。以下简单介绍。

    用户2416682
  • 学界 | 顶会见闻系列:ICML 2018(上),表示学习、网络及关系学习

    AI 科技评论按:本篇属于「顶会见闻系列」。每年这么多精彩的人工智能/机器学习会议,没去现场的自然可惜,在现场的也容易看花眼。那么事后看看别的研究员的见闻总结,...

    AI科技评论
  • 下一代分布式消息队列Apache Pulsar

    Apache Pulsar是一个企业级的分布式消息系统,最初由Yahoo开发并在2016年开源,目前正在Apache基金会下孵化。Plusar已经在Yahoo的...

    王知无
  • 【.net+jquery】绘制自定义表单(含源码)

    前言   两年前的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激...

    kmonkey

扫码关注云+社区

领取腾讯云代金券