theme: smartblue
点赞 + 关注 + 收藏 = 学会了
本文简介
在数据可视化的世界里，图表是我们最常用的语言。但你是否曾被一张图表的配色误导？
配色方案的选择往往被看作是一种艺术，但其实它更是一门科学。
文章将带你一探究竟，哪些配色选择实际上会削弱图表的表达力，甚至误导读者。
过于丰富的颜色
我管理着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个折线图的配色完全不一样。
反传统的配色
我们的产品支持微信和支付宝这两个支付方式，我们都知道支付宝的主色是蓝色，微信的主色是绿色。
在统计支付来源的数据时，如果出现反传统的配色就会影响用户对数据的理解。
再错得离谱点的话，可能会将支付宝和微信的主色对掉。
点赞 + 关注 + 收藏 = 学会了