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个折线图的配色完全不一样。
反传统的配色
我们的产品支持微信和支付宝这两个支付方式，我们都知道支付宝的主色是蓝色，微信的主色是绿色。
在统计支付来源的数据时，如果出现反传统的配色就会影响用户对数据的理解。
再错得离谱点的话，可能会将支付宝和微信的主色对掉。
点赞 + 关注 + 收藏 = 学会了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
