關於數據可視化設計中色彩的一些思考

在數據可視化設計中，顏色是吸引用戶閱讀最強大的武器之一，但圖表配色常常讓設計師很頭疼。我們在做 AntV 色板的時候，也遇到了類似的問題。這裡指的色彩是指可視化設計中的分類色板，分類色板是通過不同的顏色區分數據對象，且不代表任何特定語意。

為了得到更好的配色方案，我們開始對市面上現有的可視化工具、產品進行色彩探索。在探索過程中，我們帶著以下四個問題對競品進行分析：

• 我們的用戶是誰，他們在做圖表或看圖表時核心訴求是什麼？
• 同類產品顏色搭配方案中哪些是用戶認可的方案？為什麼？
• 通過對這些方案的剖析，好的顏色配色方案應該具備哪些要素？
• 如何實際操作？

用戶是誰有何訴求

可視化圖表常用於需要展示數據分析結果的場景中，如數據監控、分析、個人工作台等。且此類產品多面向 B 端用戶：如數據分析師（BI）、運營、產品經理（PD）等。如果按使用場景維度分，大致可分為圖表閱讀者、圖表製作者兩類。閱讀者通過圖表監測產品的健康度，或查看用戶訪問趨勢等用戶行為數據，幫助業務決策等；而圖表製作者會對數據進行加工處理幫助業務完成數據分析、報表搭建，如 Tableau、Power BI 以及螞蟻產品 DeepInsight 都是數據分析型工具。通過對用戶的了解，我們將他們對色彩核心訴求歸納為以下三點：

• 色彩需豐富，滿足複雜數據場景下的展示（儘管我們不建議大量使用顏色）
• 因需長時間閱讀，色彩儘可能柔和不刺眼
• 分類色彩需不具傾向性，清晰可辨且和諧

配色方案哪家強

色彩作為可視化視覺通道之一，對用戶獲取信息產生較大影響。雖然色彩是人眼對於不同頻率的光線的不同感受，但它既是客觀存在又是主觀感知的，每個人對色彩都存在認識差異。

我們收集了幾組配色方案，包括數據分析產品 Tableau、Power BI、BDP，和開源圖表庫 Highcharts，他們也是為數不多的為複雜圖表和數據可視化而設計的可視化配色方案。

Tableau：

Power BI：

BDP：

Highcharts：

我們將收集到的幾組色板做了次小範圍的內部調研，讓用戶通過主觀判斷選擇他認為覺得最舒服的色板方案，結果半數以上的同學更傾向灰頭土臉的 Tableau 色板，認為它雖然不靚麗，但可辨識度高，色彩和諧，易長時間閱讀。

Tableau 色板具備哪些核心要素

色相、飽和度、明度會造成視覺感官上的差異，不同配色方案會讓用戶形成不同的視覺感受。通過對 Tableau 的色板分析，我們總結了其三個核心要素。

• 空間感

不同明度、色相會給用戶帶來心理上不同的感受，高明度暖色會有靠前和脹大的作用，相反低明度冷色有後退、縮小的作用，從而造成不同的前後「空間感」。如折線圖中，同時存在紅色與深藍色，紅色會有更靠前的趨勢，深藍色會有退後的傾向，第一時間色彩反饋給大腦的訊息是「紅色數據好像比深藍色數據重要級更高」，在分類色板中，無法避免冷暖色同時出現的情況，所以建議在無特定語意的場景下，盡量避免明度有太大差異而造成的太強的前後空間差異感。相比其他色板， Tableau 色彩「空間感」更平衡；

• 和諧度

高飽和度、高明度的色彩，天然更受關注、奪人眼球。如 Highcharts 的熒光綠、熒光粉均屬於高明度的顏色，個別顏色的突兀會造成整體的不和諧感，尤其在堆疊柱狀圖或餅圖中尤為明顯；而新版本 Tableau 的色彩飽和度相對偏低，雖然各個「灰頭土臉」，卻剛好成就了商務感、柔和感，長時間閱讀不易產生視覺疲勞感；

• 辨識度

Tableau 通過選擇更全的色相方式來增強色彩的獨特性，再通過增強明度差異來增強相色彩之間的辨識度，一明一暗的方式巧妙的排列組合色彩，從而增強兩兩色相間的辨識度。而相比其他配色方案，如 BDP 使用在如「堆疊柱狀圖」或者「堆疊面積圖」中時，明顯紫、藍色之間的色調過於接近，可能會造成辨識度不高而不那麼「友好」（不易被色障人群辨別）；

如何設計色板

CIELab 是用 L*、a*、b* 三個互相垂直的坐標軸來表示一個色彩空間，使用 CIELab 可視化調色板的美妙之處在於通過調整 L/C/H 值的去選擇顏色，可以很好的控制三者之間的關係。a*、b* 值越接近色相會越相似，a*、b* 值離得越遠色相差異度就越大，同理 L* 值差異度越大，明度差異度就越大。

如何通過 CIELab 做到均衡的 「空間感」 、「和諧度」 、 「辨識度」

• 確定明度範圍 L* 值，L* 的可取值範圍為 0 到 100 ，值越大，明度越高，L* 值越小，明度越低。過高或過低的明度都不利於閱讀，建議 L* 值應盡量在 25 至 85 區間取值。
• 確定色域範圍 C 值，在該範圍內進行選擇，越靠近中心點，飽和度越低，越遠離飽和度越高，新 Tableau 配色方案的做法是縮小 C 值範圍圈（下圖虛線區域），這樣色彩飽和度可有效控制在一定範圍內，使顏色更柔和。
• 在圈定好 C 值與 L* 值的範圍後，明確顏色順序，兩兩相鄰的顏色除了盡量在色相上拉開差異度外，在明度上也需要拉開差距，L* 值差距越大，可辨識度就越高，照這個規律選擇顏色不太容易出錯。

Tableau 最新調整過的顏色整體明度更高、飽和度更低，更柔和、和諧、易閱讀。

情感化：色板冷暖色選擇，可以通過定位 a*b* 坐標系象限來決定： a*b* 坐標系第一象限（右上方區域）的色彩偏暖，第三象限（左下方區域）偏冷，Tableau 默認色板整體偏暖。

總結

• 顏色飽和度和明度，取決於產品定位和特定用戶人群的喜好，飽和度過高或過低都會影響閱讀，但在企業級產品可視化設計中，低飽和度色彩搭配方案更易長時間閱讀，不容易產生視覺疲勞感；
• 增強可讀性和辨識度，方法可以是拉大明度的差異，也可以是加強兩兩色相的變化，或者兩者結合；
• 色相屬於定性的視覺通道，色相較明度、飽和度具有更多的可區分層次，用戶通常可以分辨多達 6-12 色，所以設計的時候建議 8 色或 10 色為基礎，但為了儘可能滿足複雜場景的使用，可以設計 16 色或 20 色做為輔助；
• 在驗證色彩方案時，需充分驗證色板在不同狀態下的辨識度：如大小面積、線、圖例、文字等。點、線是典型的小面積，適合以高飽和度、更明亮的顏色填充；柱狀圖、面積圖時典型的大面積，適合以低飽和度顏色填充，以確保它們比較容易辨識。

TIPS:

1. 「藍色」是對色障人群最友好的顏色，所以它被很多主流產品定義為主色；

2. 色彩是為了突出圖表的重要信息，請有選擇、有策略的使用顏色，切勿濫用；

3. 配色沒有絕對的好壞，只有在當前場景下是否適合，另外 AntV 的配色方案正在升級中，敬請期待：）

相關鏈接：