點贊 + 關注 + 收藏 = 學會了

本文簡介

在數據可視化的世界裏，圖表是我們最常用的語言。但你是否曾被一張圖表的配色誤導？

配色方案的選擇往往被看作是一種藝術，但其實它更是一門科學。

文章將帶你一探究竟，哪些配色選擇實際上會削弱圖表的表達力，甚至誤導讀者。

過於豐富的顏色

我管理着10家酒店。以下是這10家酒店在2023年裏的收入數據。

我想按月對比酒店G和酒店I的收入，並且能直觀的知道這兩家酒店在所有酒店中的收入屬於什麼水平。

如果按下圖這樣展示，對嗎？

粗略一看，這圖的數據還挺豐富的，色彩也挺吸引眼球。但你花了多久才找到酒店G和酒店I ？

我們使用 Echarts 等圖表庫時，通常都會在頁面中展示圖例。如果想看酒店G和酒店I的數據，那我們把其他酒店的數據隱藏掉就行了。

這樣確實能很直觀的看到酒店G和酒店I的收入趨勢和對比。

但把其他酒店的數據隱藏了，又觀察不到這兩家酒店在所有酒店中的收入水平。

更好的做法是將其他酒店的顏色設置為灰色。

灰色是一個不起眼的顏色，非常適合用來展示“背景信息”，它不像其他顏色那樣吸引眼球。

在上面這個例子中，灰色的主要作用是描述“大環境”，用來凸顯想要強調的信息。

但在實際項目中，如果頁面的背景色不是白色，又想做到上面這個例子的效果，那可以在頁面背景色的基礎上往“白色”或者“黑色”方向調色。

比如，圓點是頁面的背景色，紅框部分就是可以選擇的“背景信息”的顏色。

現在回過頭來看看為什麼會出現色彩豐富的圖表。

我猜有兩種可能。

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

二是設計工具或者前端的圖表庫默認提供了豐富的顏色，開發者只管把數據丟給圖表庫使用默認的配色去渲染。

配色始終不如一

同一個數據，在不同頁中使用了不同的配色方案。用户會覺得你的產品很不專業，也很難培養用户習慣和對品牌的認知。

舉個例子，在下方這個圖中，頂部的柱狀圖和下方3個折線圖的配色完全不一樣。

反傳統的配色

我們的產品支持微信和支付寶這兩個支付方式，我們都知道支付寶的主色是藍色，微信的主色是綠色。

在統計支付來源的數據時，如果出現反傳統的配色就會影響用户對數據的理解。

再錯得離譜點的話，可能會將支付寶和微信的主色對掉。

點贊 + 關注 + 收藏 = 學會了