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

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

本文简介

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

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

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

过于丰富的颜色

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

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

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

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

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

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

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

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

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

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

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

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

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

我猜有两种可能。

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

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

配色始终不如一

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

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

反传统的配色

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

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

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

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