編輯導(dǎo)語：在數(shù)據(jù)可視化中，色彩可視化有助于區(qū)分?jǐn)?shù)據(jù)類別，描述量化規(guī)律，并起到一定的強(qiáng)調(diào)作用。若想達(dá)到上述作用，可視化色板的設(shè)計(jì)便需要遵循一定原則，以避免混淆不清。本篇文章里，作者結(jié)合實(shí)際經(jīng)驗(yàn)，總結(jié)了可視化色彩的設(shè)計(jì)指南，一起來看一下。

色彩在可視化中是一個(gè)非常重要的要素，幫助可視化圖表更清晰、準(zhǔn)確、豐富地傳達(dá)數(shù)據(jù)。通常色彩在可視化有三個(gè)主要用途：區(qū)分?jǐn)?shù)據(jù)類別、描述量化規(guī)律、強(qiáng)調(diào)。

如下圖所示，顏色在其中身兼二職，同時(shí)起到了區(qū)分類別、量化規(guī)律的作用。

除此之外，色彩的錯(cuò)誤運(yùn)用也容易引發(fā)數(shù)據(jù)的錯(cuò)誤解讀。

一、可視化色彩設(shè)計(jì)原則

數(shù)據(jù)可視化Oteam-TVision經(jīng)過大量的理論研究和項(xiàng)目實(shí)戰(zhàn)，總結(jié)了四條可視化設(shè)計(jì)原則：精確、清晰、舒適、兼容。根據(jù)色彩在可視化中的功能，可視化色彩的設(shè)計(jì)原則可細(xì)化為以下四點(diǎn)：

1. 精確：針對不同類型數(shù)據(jù)進(jìn)行配色，并在色彩的語義定義上確保表意準(zhǔn)確。
2. 清晰：保證在色相的辨識度、色階的均勻度，最大程度地提升圖表數(shù)據(jù)清晰性。
3. 舒適：同時(shí)兼顧配色的舒適美觀，做到審美愉悅，并實(shí)現(xiàn)全局視覺統(tǒng)一。
4. 兼容：最后還要考慮色彩的兼容性，使圖表在各類應(yīng)用場景下（如深色模式、色障人群、極端數(shù)據(jù)場景）能真正有效地使用。

二、如何建立可視化色板

為了找準(zhǔn)配色方向，針對數(shù)據(jù)類型配色，我們首先要去了解可視化的數(shù)據(jù)類型。根據(jù)《數(shù)據(jù)之美》一書，我們可以把數(shù)據(jù)類型劃分成分類數(shù)據(jù)、時(shí)序數(shù)據(jù)和空間數(shù)據(jù)。

分類數(shù)據(jù)

指按照現(xiàn)象的某種屬性對其進(jìn)行分類而得到的反映事物類型的數(shù)據(jù)。例如：按照病例來源，將全國現(xiàn)有確證新冠病例劃分為“本土病例”、“港澳臺病例”、“境外輸入病例”三類，分別進(jìn)行數(shù)據(jù)統(tǒng)計(jì)。

數(shù)據(jù)來源：新浪新聞《新型冠狀病毒肺炎疫情實(shí)時(shí)動(dòng)態(tài)追蹤》，統(tǒng)計(jì)截至2021年2月2日24時(shí)

時(shí)序數(shù)據(jù)

指統(tǒng)一指標(biāo)按時(shí)間順序記錄的數(shù)據(jù)列。數(shù)據(jù)分析的目的一般是通過找出樣本內(nèi)時(shí)間序列的統(tǒng)計(jì)特性和發(fā)展規(guī)律性，構(gòu)建時(shí)間序列模型，進(jìn)行樣本外預(yù)測。例如：網(wǎng)站的一周UV和PV量統(tǒng)計(jì)。

數(shù)據(jù)來源：以上為虛擬數(shù)據(jù)。

空間數(shù)據(jù)

指用來表示空間實(shí)體的位置、形狀、大小及其分布特征諸多方面信息的數(shù)據(jù)，它可以用來描述來自現(xiàn)實(shí)世界的目標(biāo)。

我們接觸的更多是地理空間數(shù)據(jù)，它是空間數(shù)據(jù)的一種類型，指帶有地理坐標(biāo)的數(shù)據(jù)，包括經(jīng)濟(jì)、社會、資源、環(huán)境等一切領(lǐng)域，是地理實(shí)體的空間特征和屬性特征的數(shù)字描述。

例如：統(tǒng)計(jì)全國新冠核酸檢測機(jī)構(gòu)分布數(shù)據(jù)。

數(shù)據(jù)來源：騰訊新聞《全國核酸檢測機(jī)構(gòu)速查》，統(tǒng)計(jì)截至2021年1月29日18時(shí)

針對這些數(shù)據(jù)類型，通常配色需求也相應(yīng)可以分為3大類，并且它們的要求各自有所不同：

分類色板（Qualitative）

分類色板常見于描述分類數(shù)據(jù)。常采用不同色相來區(qū)分?jǐn)?shù)據(jù)類別，所以要求色相之間具有高辨識度、高區(qū)分度。

例如上圖中，用黃色表示UC瀏覽器的使用者數(shù)據(jù)，用玫紅色表示Chrome瀏覽器的使用者，用藍(lán)色表示Safari瀏覽器的使用數(shù)據(jù)。

連續(xù)色板（Sequential）

連續(xù)色板通常用于表示同一事物中的數(shù)值大小、梯度的變化。常采用同色相顏色的不同明度和飽和度來表示，所以要求顏色具備高均勻度、大跨度。

例如上圖中，美國各周人口的顏色用紫色由淺到深表示連續(xù)的變化。

發(fā)散色板（Diverging）

發(fā)散色板通常用于展示數(shù)據(jù)從負(fù)數(shù)到0再到正數(shù)的連續(xù)變化。常采用從一種顏色經(jīng)過一個(gè)淺色再均勻過渡到另一種對立顏色的表現(xiàn)方式，所以同樣要求顏色具備高均勻度、大跨度。

例如上圖，使用藍(lán)色表示偏冷的地區(qū)，使用橙色表示偏熱的地區(qū)，顏色的深淺表示冷熱的程度。所以根據(jù)這些不同的設(shè)計(jì)需求和設(shè)計(jì)要求，我們在下文中，將依次分析各類色板的定義方法，并提出可行的設(shè)計(jì)建議。

1. 分類色板如何定義？

分類色板常見于描述分類數(shù)據(jù)。常采用不同色相來區(qū)分?jǐn)?shù)據(jù)類別，要求色相之間具有高辨識度、高區(qū)分度。

1) 競品分析

業(yè)界競品如何定義分類色板呢？這里主要關(guān)注了兩個(gè)問題：分類色板的顏色如何選?。繑?shù)據(jù)量超出色板數(shù)量如何處理？帶著這樣的問題我們挑選了不同類型的競品進(jìn)行考察分析，分析的競品包括如下3類：開源圖表庫、數(shù)據(jù)產(chǎn)品、設(shè)計(jì)體系。

① 分類色板的顏色，競品如何選??？

在提取出這些競品的分類色板進(jìn)行對比之后，可以歸納出以下3種不同的選色邏輯。

選取顏色跨越色環(huán)

色板內(nèi)色色相覆蓋整個(gè)色環(huán)，色相間大約30度間隔，用更全的色相方式來增加色彩的獨(dú)特性。再通過增加明度差異來拉大色彩間的區(qū)分度。

• 優(yōu)點(diǎn)：顏色有區(qū)分度，飽和度適中，閱讀舒適。
• 缺點(diǎn)：明暗差異有時(shí)會造成空間感和語義傾向。使用少量顏色時(shí)，界面暗淡單一。

選取顏色色相鄰近

色板內(nèi)色相覆蓋半個(gè)色環(huán)，以主題色為原點(diǎn)，延色環(huán)相鄰色相采集配色。

• 優(yōu)點(diǎn)：顏色和諧統(tǒng)一。
• 缺點(diǎn)：顏色區(qū)分度低。

選取顏色延續(xù)品牌

從品牌設(shè)計(jì)體系色板中，選擇不同明度的色彩作為可視化色板使用。

• 優(yōu)點(diǎn)：顏色有區(qū)分度，品牌關(guān)聯(lián)強(qiáng)。
• 缺點(diǎn)：由于明度差異大，亮暗模式顏色不同。顏色暗沉，平面感強(qiáng)烈。擴(kuò)展性不足。

總結(jié)：縱觀競品的分類色板的選取顏色方式，我們可以得到的啟示是，通過色相跨越全色環(huán)、并適當(dāng)增加顏色間明暗差異的方式能獲得更好的色彩辨識度，但需對顏色數(shù)量、比例、明度差異進(jìn)行平衡。

② 數(shù)據(jù)量超出色板數(shù)量，競品怎么做？

通常各競品的分類色板只包括6～14種顏色，但在極限情況下，數(shù)據(jù)量會超出色板數(shù)量，這時(shí)競品是怎么處理的呢？大致也分為三類。

重復(fù)使用基礎(chǔ)顏色

缺點(diǎn)：顯然是不可取的方法，沒有區(qū)分度。

基礎(chǔ)顏色擴(kuò)展色階，深淺交替使用

• 優(yōu)點(diǎn)：區(qū)分度高；
• 缺點(diǎn)：視覺上容易形成歸類感和斷裂感。

基礎(chǔ)色相擴(kuò)展色階，循環(huán)使用

• 優(yōu)點(diǎn)：區(qū)分度足夠，極限情況可用；
• 缺點(diǎn)：區(qū)分度不如方案2。

總結(jié)：極限情況采用基礎(chǔ)色相擴(kuò)展色階使用的方案（即2、3方案），都能保證辨識度和擴(kuò)展性。

2）理論研究

從競品的情況看來，分類色板的數(shù)量不定，從6～14色都有，通常具體場景具體分析，難以得出一個(gè)確定的結(jié)論。那分類色板顏色數(shù)量為多少更合理呢？

帶著這樣的問題我查找了論文進(jìn)行了一些理論研究。關(guān)于分類數(shù)據(jù)要取多少種不同的顏色，目前也尚無公認(rèn)的定論，有論文建議選取5-10個(gè)不同的顏色（Healey & Christopher, 1996）。然而如何使得色彩的辨識度和區(qū)分度最大，我們也許可以借鑒如下兩個(gè)理論研究的結(jié)論：人類可命名的有彩色數(shù)量僅為8～9種。

根據(jù)David L. Post 和 Frances A. Greene1985年調(diào)查，給出色盤讓人們對色盤上不同顏色命名，看哪些區(qū)域的顏色會被命名為一種顏色。結(jié)果如下圖所示，除白色以外共8種顏色。(Post & Frances, 1985)

Colin Ware在《 Information Visualization: Perception for Design》基于關(guān)于在人類歷史文明中的不同種族是如何定義描述顏色的研究與調(diào)查，總結(jié)了在大多數(shù)文明中都會出現(xiàn)的顏色。除黑、白、灰以外共9種顏色。

總結(jié)：由此我們得到啟示，遵循人類可命名的8種顏色進(jìn)行可視化配色，能最大程度提高色彩區(qū)分度。

3）讓分類色板更「清晰」的配色建議

①?數(shù)量建議

根據(jù)以上競品分析和理論研究，我們建議分類色板的基礎(chǔ)顏色數(shù)量為8個(gè)，符合人類可識別顏色的閾值。當(dāng)所需顏色數(shù)量超出8個(gè)時(shí)，可按基礎(chǔ)色相擴(kuò)展色階循環(huán)使用，保證擴(kuò)展性和視覺舒適度。

② 取色建議

我們建議包含主題色在內(nèi)，在色環(huán)上每個(gè)色域中僅選取一種顏色，這樣能最大程度確?；A(chǔ)色板的辨識度，盡可能提升色相區(qū)分度。

③ 清晰度驗(yàn)證建議

我們可以利用CIELab色彩空間的特性，來準(zhǔn)確衡量色彩是否具備足夠的辨識度和區(qū)分度。

因?yàn)镃IELab具有人類視覺感知下顏色均勻變化的特性，所以在其色彩空間內(nèi)，兩種顏色的直線距離Delta E可以用來描述兩種顏色的色差。并且根據(jù)研究，當(dāng)Delta E的值>=30時(shí)，是人眼能區(qū)分的色差值。

所以，我們只需要驗(yàn)證，分類色板中每兩兩顏色之間的Delta E值均>=30，就能判定辨識度足夠了。

實(shí)際應(yīng)用中我們可以用網(wǎng)絡(luò)工具IWantHue（https://medialab.github.io/iwanthue/）進(jìn)行驗(yàn)證。

以TVision的分類色板為例，檢驗(yàn)每兩兩顏色之間的區(qū)分度，均大于30。

④ 色障友好度建議

世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾——他們在識別部分或者全部顏色時(shí)有困難。我們通?；\統(tǒng)的稱這類人群為“色盲(Color Blindness)”（也稱為道爾頓癥、色覺缺失、色覺辨認(rèn)障礙、色弱等）。

面對如此龐大的特殊受眾，設(shè)計(jì)師也理應(yīng)關(guān)注他們的需求。在面向色覺障礙者進(jìn)行設(shè)計(jì)時(shí)，可以遵循這樣幾個(gè)思路尋找解決方案：

• 不完全依賴色彩區(qū)分信息，同時(shí)使用多種視覺變量如形狀、紋理來編碼信息；
• 不完全依賴色彩區(qū)分信息，使用文字注解；
• 選擇更安全的配色方案。

前兩個(gè)思路都是通過增加其他元素來輔助識別，這實(shí)際是一種更可靠的方式，目前echarts已經(jīng)在這一塊有嘗試，不過由于這篇文章更聚焦于可視化的色彩方案，所以我就不在此贅述了。

更多相關(guān)信息，可以查看CDC博客的一篇舊文《信息圖形中的顏色探討—面向色盲人士友好的設(shè)計(jì)解決方案》。

那如何選擇更安全的配色方案呢？經(jīng)過考察，有如下兩個(gè)建議：

1. 避免選擇明度、飽和度完全一致的配色；
2. 應(yīng)用時(shí)交替使用暖色和冷色。

直接使用研究得出無障礙配色組（http://jfly.iam.u-tokyo.ac.jp/color/#pallet）

出于時(shí)間成本考慮，我更建議大家在配色后，通過驗(yàn)證工具對配色進(jìn)行驗(yàn)證，然后進(jìn)行微調(diào)。

這里推薦幾種模擬色盲色覺的工具，方便設(shè)計(jì)師們發(fā)現(xiàn)問題進(jìn)行校正。

Adobe自帶的校樣設(shè)置

Photoshop和Illustrator提供了模擬紅色盲和綠色盲的校樣設(shè)置，對視覺設(shè)計(jì)師來說，這是最簡便的方法之一。選擇“視圖—>校樣設(shè)置—>紅色盲型/綠色盲型”。

在線工具VIZ PALETTE

在用過的幾個(gè)在線校驗(yàn)工具里，我推薦VIZ PALETTE（https://projects.susielu.com/viz-palette），因?yàn)橥耆槍梢暬O(shè)計(jì)，可以實(shí)時(shí)預(yù)覽圖表效果，并針對配色輸出分級評估報(bào)告，即哪些顏色是在大面積、中面積、小面積下不易區(qū)分的。

4) 讓分類色板更「美觀」的配色建議

① 限定安全范圍

為避免顏色過深、過淺而造成區(qū)分度降低、對比度降低的問題，以及顏色過于艷麗造成的感官不舒適的問題，我們建議在選取配色時(shí)，優(yōu)先排除掉明度、飽和度過低、過高的色彩，將每個(gè)色相的明度和飽和度都限制在安全范圍內(nèi)。

② 關(guān)聯(lián)/統(tǒng)一色調(diào)

在清晰的基礎(chǔ)之上，我們可以對美觀進(jìn)行一些追求了。我最贊同的一個(gè)關(guān)于配色的觀點(diǎn)是：“最好的色彩美是有賴于多樣性的正確的巧妙的統(tǒng)一”。里面有兩個(gè)核心關(guān)鍵詞是“變化”與“統(tǒng)一”。

可視化的分類色板由于清晰度的要求，所需色相數(shù)量多，在色相上已構(gòu)成足夠的變化性，所以在色調(diào)上需要增加色調(diào)的關(guān)聯(lián)性和共性，才能夠更好地達(dá)成色彩和諧。

借助CIElab/HCL色彩空間，設(shè)計(jì)師可以以主題色的C、L值為參考值，調(diào)整其他配色的C、L值，將其控制在與主題色一致的色調(diào)（近似的飽和度和亮度）范圍內(nèi)，讓色彩之間形成更一致的色調(diào)關(guān)系和風(fēng)格調(diào)性。

參考日本PCCS色彩體系，我們把常見色調(diào)劃分為3大類，它們分別對應(yīng)著不同的心理感受。

1. 明清色調(diào)：清新、輕快、年輕。
2. 中間色調(diào)：中性、沉穩(wěn)、經(jīng)典。
3. 暗清色調(diào)：復(fù)古、藝術(shù)、成熟。

以TVision為例，基于主色騰訊藍(lán)的中明度、高飽和的特性，我們的分類色板選擇了中間色調(diào)進(jìn)行配色，中性、沉穩(wěn)的氣質(zhì)符合定位。

經(jīng)過一些實(shí)驗(yàn)，我們分別找到三類色調(diào)在CIELab色彩空間的C、L范圍值，供設(shè)計(jì)師在選取色相時(shí)輔助參考，便于統(tǒng)一分類色板的色調(diào)。在其基礎(chǔ)之上開發(fā)的智能配色工具，目前工具已對騰訊內(nèi)部開放。

③ 色板使用順序

在前期分類色板的清晰度得以保障，任意兩兩顏色之間的色差都符合清晰度驗(yàn)證標(biāo)準(zhǔn)的基礎(chǔ)下，我們可以對色板使用順序進(jìn)行調(diào)整，使得可視化圖表內(nèi)存在的顏色始終維持在和諧范圍之內(nèi)。有兩種可行的方法。

按鄰近色順序使用

使用方法：將分類色板內(nèi)顏色，按色環(huán)排序，然后按順序優(yōu)先使用鄰近色相。

推薦場景：

• 期望整個(gè)UI界面的視覺感受更和諧統(tǒng)一；
• 自動(dòng)化配色場景。

按分裂互補(bǔ)色跳躍使用

使用方法：將分類色板內(nèi)顏色，按色環(huán)排序，然后優(yōu)先使用分裂互補(bǔ)色。

推薦場景：

1. 期望整個(gè)UI界面的視覺感受更活躍、豐富；
2. 希望最大程度的增強(qiáng)相鄰顏色之間的對比度；
3. 大量圖表含有對比語義（如男女占比、正負(fù)情感、蝴蝶圖等）。

2. 連續(xù)色板怎么定義？

連續(xù)色板通常用于表示同一事物中的數(shù)值大小、梯度的變化。常采用同色相顏色的不同明度和飽和度來表示，所以要求顏色具備高均勻度、大跨度。

1）原有方法問題分析

我們過去在連續(xù)色板的生成上，經(jīng)歷了多種方法的嘗試，總結(jié)了一些經(jīng)驗(yàn)和問題。

2）基于CIELab的連續(xù)色板配色方法建議

① 原理及方法

以上三種方法都無法簡單獲得均勻且可量化的連續(xù)色板，究其原因，是因?yàn)镠SB直觀但是并不符合感知均勻，人類感知色彩的度量在其物理空間上不是線性變換的。經(jīng)過調(diào)研后，我們再次引入CIELab色彩空間。

CIELab空間中使用 L、a、b三個(gè)維度來表示色彩，其中L表示亮度。

我們前面提到過CIELab是最接近人類視覺感知的色彩空間，具有人類感知下顏色均勻變化的特性。在CIELab中物理距離就等于感知距離，數(shù)值差異就等于感知差異。所以，只要顏色在CIELab空間中，L值均勻變化，這組顏色就是均勻的。

綜上，我們建議使用CIELab色彩空間進(jìn)行連續(xù)色板配色，能簡單有效地配出均勻、可量化驗(yàn)證的顏色組。

具體方法為：以主題色為中心，等差加、減L值，L值加大則顏色變亮，L值減小則顏色變淺。

例如，TVision以騰訊藍(lán)為主題色，基于CIELab配色，得到L值變化均勻的連續(xù)色板。

② 工具推薦

實(shí)際工作中，我們可以如何配合工具來生成連續(xù)色板呢？這里介紹兩種工具。

在線工具Chroma.js

Chroma.js（https://gka.github.io/palettes）可以基于CIELab生成連續(xù)色板。它主要的原理在《可視化色彩空間解析指南》文中有詳細(xì)說明，建議在使用時(shí)關(guān)掉「亮度矯正」功能，以保證輸入的主題色包含在最終的結(jié)果中。

工具也有一個(gè)缺點(diǎn)，部分色彩在亮度高時(shí)，會過飽和以及偏色過多。這時(shí)候我們可以人工對其調(diào)優(yōu)，保證亮度的情況下，調(diào)整a、b值。

Photoshop

PhotoShop的拾色器集成了CIELab，是現(xiàn)階段最方便的取色方式。在拾色器中固定 a、b 值不變，等差調(diào)節(jié) L 值，可以為選定的顏色生成均勻的色階。

3. 發(fā)散色板怎么定義？

發(fā)散色板通常用于表現(xiàn)數(shù)據(jù)從負(fù)數(shù)到0再到正數(shù)的連續(xù)變化。常采用的表現(xiàn)方式是由一種顏色過渡一個(gè)淺色，再均勻過渡到另一種對立的顏色，同樣要求顏色具備高均勻度、大跨度。

1）基于CIELab的發(fā)散色板配色方法建議

① 原理及方法

從本質(zhì)上看，發(fā)散色板是兩組數(shù)量均等的連續(xù)色板的組合，在中心共用同一個(gè)端點(diǎn)。從下圖中能夠直觀地看到發(fā)散色板在空間中的位置，是兩種不同的顏色到中心淺灰色點(diǎn)的均勻色階變化。所以我們可以復(fù)用連續(xù)色板的創(chuàng)建方法，同樣基于CIELab來獲取色板。

② 顏色選取建議

那發(fā)散色板的兩端要選取什么顏色呢？通常選用的是兩種對立的顏色，可以是互補(bǔ)色，也可以是對比色。最常見的發(fā)散色板顏色是紅-藍(lán)、橙-藍(lán)、紫-綠，其中由于顏色意義不同，也會帶來應(yīng)用場景的不同。

如下圖所示，是Tvision中的發(fā)散色板，定義了紅-藍(lán)、紫-綠兩類發(fā)散色板，其中紅-藍(lán)色板由于有明確的冷暖色關(guān)系，規(guī)范其用于與溫度、冷熱有關(guān)的數(shù)據(jù)，紫-綠色板由于為中性色，所以規(guī)范其用于和溫度沒有直接關(guān)聯(lián)的數(shù)據(jù)，如表現(xiàn)性能、銷售數(shù)據(jù)。

為什么不建議選擇紅-綠、黃-藍(lán)這兩類常用互補(bǔ)色呢？這是因?yàn)橄Ｍ芗嫒萆X障礙用戶，由于色覺障礙者缺少某種cones，導(dǎo)致的紅-綠 / 黃-藍(lán)通道的感知弱化。

③ 工具推薦

工具Chroma.js也提供了生成配色的快捷方式。

4. 語義色板怎么定義？

語義色板是可視化設(shè)計(jì)中的特殊場景色，對有特殊含義的數(shù)據(jù)，通過使用公認(rèn)的顏色，來傳達(dá)含義。

以上就是我們在數(shù)據(jù)可視化Oteam-TVision中的探索、定義、應(yīng)用過程中輸出的一些可視化色彩設(shè)計(jì)建議，希望能給大家提供一些小小的幫助。

微信公眾號：騰訊CDC體驗(yàn)設(shè)計(jì)

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@騰訊CDC

題圖來自Unsplash，基于CC0協(xié)議