到底怎样配色才能降低图表的可读性？

点赞 + 关注 + 收藏 = 学会了

本文简介

在数据可视化的世界里，图表是我们最常用的语言。但你是否曾被一张图表的配色误导？

配色方案的选择往往被看作是一种艺术，但其实它更是一门科学。

文章将带你一探究竟，哪些配色选择实际上会削弱图表的表达力，甚至误导读者。

过于丰富的颜色

我管理着10家酒店。以下是这10家酒店在2023年里的收入数据。

	1月	2月	3月	4月	5月	6月	7月	8月	9月	10月	11月	12月
酒店A	13450	13600	13200	13500	13700	13350	13650	13400	13800	13200	13600	13700
酒店B	6800	7100	7300	6900	7200	7400	7000	7300	7500	7600	7100	7200
酒店C	15200	14900	15100	14800	15000	14700	15200	14900	15100	14800	15000	14700
酒店D	8300	8500	8100	8400	8600	8200	8500	8300	8600	8400	8500	8600
酒店E	11800	12000	12200	12100	11900	12100	12200	12000	11800	12100	11900	12000
酒店F	7900	8100	7700	8300	7800	8400	8000	8200	8100	8300	8400	8200
酒店G	14650	14400	14700	14500	14800	14400	14600	14700	14500	14400	14600	14800
酒店H	5500	5700	5800	5600	5900	5750	5800	5950	5600	5900	5700	5800
酒店I	14300	14000	14200	14100	14300	14200	14000	14100	14300	14200	14100	14300
酒店J	9600	9400	9800	9500	9700	9600	9900	9400	9800	9500	9700	9600

我想按月对比酒店G和酒店I的收入，并且能直观的知道这两家酒店在所有酒店中的收入属于什么水平。

如果按下图这样展示，对吗？

粗略一看，这图的数据还挺丰富的，色彩也挺吸引眼球。但你花了多久才找到酒店G和酒店I ？

我们使用 Echarts 等图表库时，通常都会在页面中展示图例。如果想看酒店G和酒店I的数据，那我们把其他酒店的数据隐藏掉就行了。

这样确实能很直观的看到酒店G和酒店I的收入趋势和对比。

但把其他酒店的数据隐藏了，又观察不到这两家酒店在所有酒店中的收入水平。

更好的做法是将其他酒店的颜色设置为灰色。

灰色是一个不起眼的颜色，非常适合用来展示“背景信息”，它不像其他颜色那样吸引眼球。

在上面这个例子中，灰色的主要作用是描述“大环境”，用来凸显想要强调的信息。

但在实际项目中，如果页面的背景色不是白色，又想做到上面这个例子的效果，那可以在页面背景色的基础上往“白色”或者“黑色”方向调色。

比如，圆点是页面的背景色，红框部分就是可以选择的“背景信息”的颜色。

现在回过头来看看为什么会出现色彩丰富的图表。

我猜有两种可能。

一是项目需求，比如做To G的大屏项目，通常需要炫酷的特效和丰富的色彩去吸引甲方眼球。

二是设计工具或者前端的图表库默认提供了丰富的颜色，开发者只管把数据丢给图表库使用默认的配色去渲染。

配色始终不如一

同一个数据，在不同页中使用了不同的配色方案。用户会觉得你的产品很不专业，也很难培养用户习惯和对品牌的认知。

举个例子，在下方这个图中，顶部的柱状图和下方3个折线图的配色完全不一样。

反传统的配色

我们的产品支持微信和支付宝这两个支付方式，我们都知道支付宝的主色是蓝色，微信的主色是绿色。

在统计支付来源的数据时，如果出现反传统的配色就会影响用户对数据的理解。

再错得离谱点的话，可能会将支付宝和微信的主色对掉。

---

点赞 + 关注 + 收藏 = 学会了