本篇是針對(duì)數(shù)據(jù)可視化在深色和淺色模式環(huán)境中產(chǎn)生的色彩搭配問(wèn)題進(jìn)行的總結(jié)分析，如有不足，望指正~

目錄：

1、同一套色彩模式無(wú)法套用黑白兩個(gè)版本

2、如何平衡“飽和度”和“明度”

3、色彩的面積與色溫的關(guān)系

4、采用“中度”或“中弱度”對(duì)比配色

一、同一套色彩模式無(wú)法套用黑白兩個(gè)版本

黑白兩版界面最大的痛苦之處在于：需要準(zhǔn)備兩套色值！如果不巧遇到的是數(shù)據(jù)可視化的界面，這個(gè)痛苦會(huì)雙倍放大。

起初只有白版的環(huán)形圖，所有的色彩搭配看起來(lái)都很和諧，但把環(huán)形圖原封不動(dòng)地放入黑色的背景中，色彩突然變得刺眼且具有侵略性。當(dāng)用戶長(zhǎng)時(shí)間的停留在一張圖表上查看與分析時(shí)會(huì)產(chǎn)生視覺(jué)疲勞與不適。

這里我把曾經(jīng)遇到的問(wèn)題匯總為一下幾點(diǎn)：

① “飽和度”和“明度”該如何平衡 ？

② 色彩的“面積”與“色彩溫度”如何分配？

③ 色彩如何搭配才能讓用戶清晰分辨？

二、如何平衡“飽和度”和“明度”

以環(huán)形圖為例，此時(shí)有6種數(shù)據(jù)分類，分別對(duì)應(yīng)6種不同的顏色。當(dāng)我把白版里看起來(lái)和諧的環(huán)圖置入黑版的環(huán)境中時(shí)，以順時(shí)針為順序，第三種顏色“綠色”明度過(guò)高，長(zhǎng)時(shí)間觀看感覺(jué)刺眼；第6種顏色“紫色”明度過(guò)低，不易被識(shí)別。

在黑版中產(chǎn)生的不適感，其實(shí)是“明度差”的作用。明度差其實(shí)是色彩與背景環(huán)境之間產(chǎn)生的一種關(guān)系。這種關(guān)系用來(lái)比喻“人”與“社會(huì)環(huán)境”的關(guān)系我認(rèn)為非常貼切。一個(gè)高明度高飽和度的紅色（活潑熱情的人）放入一個(gè)明亮的背景中（開放民主的環(huán)境），我們會(huì)覺(jué)得這個(gè)鮮艷的紅色在當(dāng)前的背景中非常和諧，但是如果我們把它放入昏暗的背景中（保守沉悶的環(huán)境），不舒服的感覺(jué)開始出現(xiàn)了，但紅色還是之前的那個(gè)紅色沒(méi)有任何改變（如下圖）

當(dāng)背景為白色時(shí)，明度最暗的那個(gè)方塊最易被識(shí)別；換到黑色背景時(shí)，卻是明度最亮的色塊最易被識(shí)別。高明度差的作用能幫助我們快速?gòu)谋尘爸凶R(shí)別色彩，卻并不適用于我們長(zhǎng)時(shí)間觀看。在可視化圖表中，我們需要的是和諧的色彩關(guān)系，要制造和諧的色彩關(guān)系就需要消除高低不平的明度差。

下圖我在修改后的黑版里的環(huán)圖里進(jìn)行的操作：

① “綠色”明度降低↓，飽和度上升↑；

② “紅色”明度上升↑，飽和度降低↓；

③ “紫色”明度上升↑，飽和度降低↓。

整個(gè)色輪的明度和飽和度比修改之前更適應(yīng)用戶長(zhǎng)時(shí)間查看，減少了原稿中高飽和度和明度產(chǎn)生的光影和殘色等不適感。

在配色中，盡量避免“高飽和度&高明度”以及“低飽和度&低明度”的組合。雙高會(huì)使顏色過(guò)于明亮鮮艷使視覺(jué)疲勞，雙低會(huì)使色彩氣氛昏暗較難區(qū)分。在調(diào)色的過(guò)程中需要耐心實(shí)驗(yàn)，找出合適的色彩組合。

三、色彩的面積與色溫的關(guān)系

通常情況下，在面積較大的數(shù)據(jù)分類中使用低色溫；在面積較小的數(shù)據(jù)分類中使用高色溫。

色溫并不是獨(dú)立存在的，是色彩與色彩碰撞后人類產(chǎn)生的主觀感受，就像我們無(wú)法從單個(gè)音符感受到旋律的高低一樣，同樣也無(wú)法在單個(gè)色彩中感受到熱脹冷縮。在同等色彩面積的條件下，看起來(lái)比實(shí)際面積更大的色被稱為膨脹色，反之稱為收縮色。

關(guān)于這個(gè)問(wèn)題有以下幾點(diǎn)規(guī)律：

1、同樣面積的暖色比冷色看起來(lái)面積大；

2、明亮色比灰暗色顯得面積大；

3、在色彩的相對(duì)明度的問(wèn)題上，“底色”的明度越大，“圖”色的面積越小。

如果僅限于純色，可以認(rèn)為暖色的明度比冷色的明度要高，所以暖色比冷色顯得面積大。

還有就是，在黑暗背景上，高明度的色彩面積往往看起來(lái)比實(shí)際面積要大，所有在黑暗背景上作明度不同、面積相等的色彩處理時(shí)，要想取得同等大小的視覺(jué)效果，必須縮小明度大的色彩的面積。

四、采用“中度”或“中弱度”對(duì)比配色

如何能讓用戶既能看清楚色彩分類，又能看的很舒服呢？

1、避開“高強(qiáng)度對(duì)比色”

2、避開“弱對(duì)比色”

在色相環(huán)中120°~150°范圍中的配色（例如：紅綠，黃紫），對(duì)比效果較為強(qiáng)烈，感官刺激太強(qiáng)。10°~30°范圍中的鄰近色（例如：黃橙、青綠），對(duì)比效果較弱，不易分辨。

以下是我參考AntV以及IBM Design色板總結(jié)得出的一套數(shù)據(jù)分類色板↓

以上環(huán)圖所遇到的色彩問(wèn)題同樣適用于柱狀圖，趨勢(shì)圖、地圖等其他可視化圖表。

總結(jié)

黑白版的色彩搭配沒(méi)有現(xiàn)成的公式可以套用，需要長(zhǎng)期練習(xí)，不斷實(shí)驗(yàn)，直到今天我仍然還在不斷改進(jìn)我的分類色板，因?yàn)樗恼Q生夾雜著主觀喜好，需要借用別人眼睛和意見(jiàn)才能獲得一個(gè)更為客觀的結(jié)果！