可視化色彩設(shè)計(jì)指南

可視化色彩設(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)過(guò)大量的理論研究和項(xiàng)目實(shí)戰(zhàn)，總結(jié)了四條可視化設(shè)計(jì)原則：精確、清晰、舒適、兼容。根據(jù)色彩在可視化中的功能，可視化色彩的設(shè)計(jì)原則可細(xì)化為以下四點(diǎn)：精確：針對(duì)不同類型數(shù)據(jù)進(jìn)行配色，并在色彩的語(yǔ)義定義上確保表意準(zhǔn)確。清晰：保證在色相的辨識(shí)度、色階的均勻度，最大程度地提升圖表數(shù)據(jù)清晰性。舒適：同時(shí)兼顧配色的舒適美觀，做到審美愉悅，并實(shí)現(xiàn)全局視覺(jué)統(tǒng)一。兼容：最后還要考慮色彩的兼容性，使圖表在各類應(yīng)用場(chǎng)景下（如深色模式、色障人群、極端數(shù)據(jù)場(chǎng)景）能真正有效地使用。二、如何建立可視化色板為了找準(zhǔn)配色方向，針對(duì)數(shù)據(jù)類型配色，我們首先要去了解可視化的數(shù)據(jù)類型。根據(jù)《數(shù)據(jù)之美》一書(shū)，我們可以把數(shù)據(jù)類型劃分成分類數(shù)據(jù)、時(shí)序數(shù)據(jù)和空間數(shù)據(jù)。分類數(shù)據(jù)指按照現(xiàn)象的某種屬性對(duì)其進(jìn)行分類而得到的反映事物類型的數(shù)據(jù)。例如：按照病例，將全國(guó)現(xiàn)有確證新冠病例劃分為“本土病例”、“港澳臺(tái)病例”、“境外輸入病例”三類，分別進(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ù)分析的目的一般是通過(guò)找出樣本內(nèi)時(shí)間序列的統(tǒng)計(jì)特性和發(fā)展規(guī)律性，構(gòu)建時(shí)間序列模型，進(jìn)行樣本外預(yù)測(cè)。例如：網(wǎng)站的一周UV和PV量統(tǒng)計(jì)。數(shù)據(jù)：以上為虛擬數(shù)據(jù)?？臻g數(shù)據(jù)指用來(lái)表示空間實(shí)體的位置、形狀、大小及其分布特征諸多方面信息的數(shù)據(jù)，它可以用來(lái)描述來(lái)自現(xiàn)實(shí)世界的目標(biāo)。我們接觸的更多是地理空間數(shù)據(jù)，它是空間數(shù)據(jù)的一種類型，指帶有地理坐標(biāo)的數(shù)據(jù)，包括經(jīng)濟(jì)、社會(huì)、資源、環(huán)境等一切領(lǐng)域，是地理實(shí)體的空間特征和屬性特征的數(shù)字描述。例如：統(tǒng)計(jì)全國(guó)新冠核酸檢測(cè)機(jī)構(gòu)分布數(shù)據(jù)。數(shù)據(jù)：騰訊新聞《全國(guó)核酸檢測(cè)機(jī)構(gòu)速查》，統(tǒng)計(jì)截至2021年1月29日18時(shí)針對(duì)這些數(shù)據(jù)類型，通常配色需求也相應(yīng)可以分為3大類，并且它們的要求各自有所不同：分類色板（Qualitative）分類色板常見(jiàn)于描述分類數(shù)據(jù)。常采用不同色相來(lái)區(qū)分?jǐn)?shù)據(jù)類別，所以要求色相之間具有高辨識(shí)度、高區(qū)分度。例如上圖中，用黃色表示UC瀏覽器的使用者數(shù)據(jù)，用玫紅色表示Chrome瀏覽器的使用者，用藍(lán)色表示Safari瀏覽器的使用數(shù)據(jù)。連續(xù)色板（Sequential）連續(xù)色板通常用于表示同一事物中的數(shù)值大小、梯度的變化。常采用同色相顏色的不同明度和飽和度來(lái)表示，所以要求顏色具備高均勻度、大跨度。例如上圖中，美國(guó)各周人口的顏色用紫色由淺到深表示連續(xù)的變化。發(fā)散色板（Diverging）發(fā)散色板通常用于展示數(shù)據(jù)從負(fù)數(shù)到0再到正數(shù)的連續(xù)變化。常采用從一種顏色經(jīng)過(guò)一個(gè)淺色再均勻過(guò)渡到另一種對(duì)立顏色的表現(xiàn)方式，所以同樣要求顏色具備高均勻度、大跨度。例如上圖，使用藍(lán)色表示偏冷的地區(qū)，使用橙色表示偏熱的地區(qū)，顏色的深淺表示冷熱的程度。所以根據(jù)這些不同的設(shè)計(jì)需求和設(shè)計(jì)要求，我們?cè)谙挛闹?，將依次分析各類色板的定義方法，并提出可行的設(shè)計(jì)建議。1.分類色板如何定義？分類色板常見(jiàn)于描述分類數(shù)據(jù)。常采用不同色相來(lái)區(qū)分?jǐn)?shù)據(jù)類別，要求色相之間具有高辨識(shí)度、高區(qū)分度。1)競(jìng)品分析業(yè)界競(jìng)品如何定義分類色板呢？這里主要關(guān)注了兩個(gè)問(wèn)題：分類色板的顏色如何選??？數(shù)據(jù)量超出色板數(shù)量如何處理？帶著這樣的問(wèn)題我們挑選了不同類型的競(jìng)品進(jìn)行考察分析，分析的競(jìng)品包括如下3類：開(kāi)源圖表庫(kù)、數(shù)據(jù)產(chǎn)品、設(shè)計(jì)體系。①

分類色板的顏色，競(jìng)品如何選??？在提取出這些競(jìng)品的分類色板進(jìn)行對(duì)比之后，可以歸納出以下3種不同的選色邏輯。選取顏色跨越色環(huán)色板內(nèi)色色相覆蓋整個(gè)色環(huán)，色相間大約30度間隔，用更全的色相方式來(lái)增加色彩的獨(dú)特性。再通過(guò)增加明度差異來(lái)拉大色彩間的區(qū)分度。優(yōu)點(diǎn)：顏色有區(qū)分度，飽和度適中，閱讀舒適。缺點(diǎn)：明暗差異有時(shí)會(huì)造成空間感和語(yǔ)義傾向。使用少量顏色時(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é)：縱觀競(jìng)品的分類色板的選取顏色方式，我們可以得到的啟示是，通過(guò)色相跨越全色環(huán)、并適當(dāng)增加顏色間明暗差異的方式能獲得更好的色彩辨識(shí)度，但需對(duì)顏色數(shù)量、比例、明度差異進(jìn)行平衡。②數(shù)據(jù)量超出色板數(shù)量，競(jìng)品怎么做？通常各競(jìng)品的分類色板只包括6～14種顏色，但在極限情況下，數(shù)據(jù)量會(huì)超出色板數(shù)量，這時(shí)競(jìng)品是怎么處理的呢？大致也分為三類。重復(fù)使用基礎(chǔ)顏色缺點(diǎn)：顯然是不可取的方法，沒(méi)有區(qū)分度?；A(chǔ)顏色擴(kuò)展色階，深淺交替使用優(yōu)點(diǎn)：區(qū)分度高；缺點(diǎn)：視覺(jué)上容易形成歸類感和斷裂感?；A(chǔ)色相擴(kuò)展色階，循環(huán)使用優(yōu)點(diǎn)：區(qū)分度足夠，極限情況可用；缺點(diǎn)：區(qū)分度不如方案2?？偨Y(jié)：極限情況采用基礎(chǔ)色相擴(kuò)展色階使用的方案（即2、3方案），都能保證辨識(shí)度和擴(kuò)展性。2）理論研究從競(jìng)品的情況看來(lái)，分類色板的數(shù)量不定，從6～14色都有，通常具體場(chǎng)景具體分析，難以得出一個(gè)確定的結(jié)論。那分類色板顏色數(shù)量為多少更合理呢？帶著這樣的問(wèn)題我查找了論文進(jìn)行了一些理論研究。關(guān)于分類數(shù)據(jù)要取多少種不同的顏色，目前也尚無(wú)公認(rèn)的定論，有論文建議選取5-10個(gè)不同的顏色（Healey&Christopher,1996）。然而如何使得色彩的辨識(shí)度和區(qū)分度最大，我們也許可以借鑒如下兩個(gè)理論研究的結(jié)論：人類可命名的有彩色數(shù)量?jī)H為8～9種。根據(jù)DavidL.Post和FrancesA.Greene1985年調(diào)查，給出色盤(pán)讓人們對(duì)色盤(pán)上不同顏色命名，看哪些區(qū)域的顏色會(huì)被命名為一種顏色。結(jié)果如下圖所示，除白色以外共8種顏色。(Post&Frances,1985)ColinWare在《InformationVisualization:PerceptionforDesign》基于關(guān)于在人類歷史文明中的不同種族是如何定義描述顏色的研究與調(diào)查，總結(jié)了在大多數(shù)文明中都會(huì)出現(xiàn)的顏色。除黑、白、灰以外共9種顏色?？偨Y(jié)：由此我們得到啟示，遵循人類可命名的8種顏色進(jìn)行可視化配色，能最大程度提高色彩區(qū)分度。3）讓分類色板更「清晰」的配色建議①

數(shù)量建議根據(jù)以上競(jìng)品分析和理論研究，我們建議分類色板的基礎(chǔ)顏色數(shù)量為8個(gè)，符合人類可識(shí)別顏色的閾值。當(dāng)所需顏色數(shù)量超出8個(gè)時(shí)，可按基礎(chǔ)色相擴(kuò)展色階循環(huán)使用，保證擴(kuò)展性和視覺(jué)舒適度。②取色建議我們建議包含主題色在內(nèi)，在色環(huán)上每個(gè)色域中僅選取一種顏色，這樣能最大程度確?；A(chǔ)色板的辨識(shí)度，盡可能提升色相區(qū)分度。③清晰度驗(yàn)證建議我們可以利用CIELab色彩空間的特性，來(lái)準(zhǔn)確衡量色彩是否具備足夠的辨識(shí)度和區(qū)分度。因?yàn)镃IELab具有人類視覺(jué)感知下顏色均勻變化的特性，所以在其色彩空間內(nèi)，兩種顏色的直線距離DeltaE可以用來(lái)描述兩種顏色的色差。并且根據(jù)研究，當(dāng)DeltaE的值>=30時(shí)，是人眼能區(qū)分的色差值。所以，我們只需要驗(yàn)證，分類色板中每?jī)蓛深伾g的DeltaE值均>=30，就能判定辨識(shí)度足夠了。實(shí)際應(yīng)用中我們可以用網(wǎng)絡(luò)工具IWantHue（https://medialab.github.io/iwanthue/）進(jìn)行驗(yàn)證。以TVision的分類色板為例，檢驗(yàn)每?jī)蓛深伾g的區(qū)分度，均大于30。④色障友好度建議世界上有超過(guò)8%的男性和0.4%的女性都被色覺(jué)障礙的問(wèn)題困擾——他們?cè)谧R(shí)別部分或者全部顏色時(shí)有困難。我們通常籠統(tǒng)的稱這類人群為“色盲(ColorBlindness)”（也稱為道爾頓癥、色覺(jué)缺失、色覺(jué)辨認(rèn)障礙、色弱等）。面對(duì)如此龐大的特殊受眾，設(shè)計(jì)師也理應(yīng)關(guān)注他們的需求。在面向色覺(jué)障礙者進(jìn)行設(shè)計(jì)時(shí)，可以遵循這樣幾個(gè)思路尋找解決方案：不完全依賴色彩區(qū)分信息，同時(shí)使用多種視覺(jué)變量如形狀、紋理來(lái)編碼信息；不完全依賴色彩區(qū)分信息，使用文字注解；選擇更安全的配色方案。前兩個(gè)思路都是通過(guò)增加其他元素來(lái)輔助識(shí)別，這實(shí)際是一種更可靠的方式，目前echarts已經(jīng)在這一塊有嘗試，不過(guò)由于這篇文章更聚焦于可視化的色彩方案，所以我就不在此贅述了。更多相關(guān)信息，可以查看CDC博客的一篇舊文《信息圖形中的顏色探討—面向色盲人士友好的設(shè)計(jì)解決方案》。那如何選擇更安全的配色方案呢？經(jīng)過(guò)考察，有如下兩個(gè)建議：避免選擇明度、飽和度完全一致的配色；應(yīng)用時(shí)交替使用暖色和冷色。直接使用研究得出無(wú)障礙配色組（http://jfly.iam.u-tokyo.ac.jp/color/#pallet）出于時(shí)間成本考慮，我更建議大家在配色后，通過(guò)驗(yàn)證工具對(duì)配色進(jìn)行驗(yàn)證，然后進(jìn)行微調(diào)。這里推薦幾種模擬色盲色覺(jué)的工具，方便設(shè)計(jì)師們發(fā)現(xiàn)問(wèn)題進(jìn)行校正。Adobe自帶的校樣設(shè)置Photoshop和Illustrator提供了模擬紅色盲和綠色盲的校樣設(shè)置，對(duì)視覺(jué)設(shè)計(jì)師來(lái)說(shuō)，這是最簡(jiǎn)便的方法之一。選擇“視圖—>校樣設(shè)置—>紅色盲型/綠色盲型”。在線工具VIZPALETTE在用過(guò)的幾個(gè)在線校驗(yàn)工具里，我推薦VIZPALETTE（/viz-palette），因?yàn)橥耆槍?duì)可視化而設(shè)計(jì)，可以實(shí)時(shí)預(yù)覽圖表效果，并針對(duì)配色輸出分級(jí)評(píng)估報(bào)告，即哪些顏色是在大面積、中面積、小面積下不易區(qū)分的。4)讓分類色板更「美觀」的配色建議①限定安全范圍為避免顏色過(guò)深、過(guò)淺而造成區(qū)分度降低、對(duì)比度降低的問(wèn)題，以及顏色過(guò)于艷麗造成的感官不舒適的問(wèn)題，我們建議在選取配色時(shí)，優(yōu)先排除掉明度、飽和度過(guò)低、過(guò)高的色彩，將每個(gè)色相的明度和飽和度都限制在安全范圍內(nèi)。②關(guān)聯(lián)/統(tǒng)一色調(diào)在清晰的基礎(chǔ)之上，我們可以對(duì)美觀進(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色彩體系，我們把常見(jiàn)色調(diào)劃分為3大類，它們分別對(duì)應(yīng)著不同的心理感受。明清色調(diào)：清新、輕快、年輕。中間色調(diào)：中性、沉穩(wěn)、經(jīng)典。暗清色調(diào)：復(fù)古、藝術(shù)、成熟。以TVision為例，基于主色騰訊藍(lán)的中明度、高飽和的特性，我們的分類色板選擇了中間色調(diào)進(jìn)行配色，中性、沉穩(wěn)的氣質(zhì)符合定位。經(jīng)過(guò)一些實(shí)驗(yàn)，我們分別找到三類色調(diào)在CIELab色彩空間的C、L范圍值，供設(shè)計(jì)師在選取色相時(shí)輔助參考，便于統(tǒng)一分類色板的色調(diào)。在其基礎(chǔ)之上開(kāi)發(fā)的智能配色工具，目前工具已對(duì)騰訊內(nèi)部開(kāi)放。③色板使用順序在前期分類色板的清晰度得以保障，任意兩兩顏色之間的色差都符合清晰度驗(yàn)證標(biāo)準(zhǔn)的基礎(chǔ)下，我們可以對(duì)色板使用順序進(jìn)行調(diào)整，使得可視化圖表內(nèi)存在的顏色始終維持在和諧范圍之內(nèi)。有兩種可行的方法。按鄰近色順序使用使用方法：將分類色板內(nèi)顏色，按色環(huán)排序，然后按順序優(yōu)先使用鄰近色相。推薦場(chǎng)景：期望整個(gè)UI界面的視覺(jué)感受更和諧統(tǒng)一；自動(dòng)化配色場(chǎng)景。按分裂互補(bǔ)色跳躍使用使用方法：將分類色板內(nèi)顏色，按色環(huán)排序，然后優(yōu)先使用分裂互補(bǔ)色。推薦場(chǎng)景：期望整個(gè)UI界面的視覺(jué)感受更活躍、豐富；希望最大程度的增強(qiáng)相鄰顏色之間的對(duì)比度；大量圖表含有對(duì)比語(yǔ)義（如男女占比、正負(fù)情感、蝴蝶圖等）。2.連續(xù)色板怎么定義？連續(xù)色板通常用于表示同一事物中的數(shù)值大小、梯度的變化。常采用同色相顏色的不同明度和飽和度來(lái)表示，所以要求顏色具備高均勻度、大跨度。1）原有方法問(wèn)題分析我們過(guò)去在連續(xù)色板的生成上，經(jīng)歷了多種方法的嘗試，總結(jié)了一些經(jīng)驗(yàn)和問(wèn)題。2）基于CIELab的連續(xù)色板配色方法建議①原理及方法以上三種方法都無(wú)法簡(jiǎn)單獲得均勻且可量化的連續(xù)色板，究其原因，是因?yàn)镠SB直觀但是并不符合感知均勻，人類感知色彩的度量在其物理空間上不是線性變換的。經(jīng)過(guò)調(diào)研后，我們?cè)俅我隒IELab色彩空間。CIELab空間中使用L、a、b三個(gè)維度來(lái)表示色彩，其中L表示亮度。我們前面提到過(guò)CIELab是最接近人類視覺(jué)感知的色彩空間，具有人類感知下顏色均勻變化的特性。在CIELab中物理距離就等于感知距離，數(shù)值差異就等于感知差異。所以，只要顏色在CIELab空間中，L值均勻變化，這組顏色就是均勻的。綜上，我們建議使用CIELab色彩空間進(jìn)行連續(xù)色板配色，能簡(jiǎn)單有效地配出均勻、可量化驗(yàn)證的顏色組。具體方法為：以主題色為中心，等差加、減L值，L值加大則顏色變亮，L值減小則顏色變淺。例如，TVision以騰訊藍(lán)為主題色，基于CIELab配色，得到L值變化均勻的連續(xù)色板。②工具推薦實(shí)際工作中，我們可以如何配合工具來(lái)生成連續(xù)色板呢？這里介紹兩種工具。在線工具Chroma.jsChroma.js（https://gka.github.io/palettes）可以基于CIELab生成連續(xù)色板。它主要的原理在《可視化色彩空間解析指南》文中有詳細(xì)說(shuō)明，建議在使用時(shí)關(guān)掉「亮度矯正」功能，以保證輸入的主題色包含在最終的結(jié)果中。工具也有一個(gè)缺點(diǎn)，部分色彩在亮度高時(shí)，會(huì)過(guò)飽和以及偏色過(guò)多。這時(shí)候我們可以人工對(duì)其調(diào)優(yōu)，保證亮度的情況下，調(diào)整a、b值。PhotoshopPhotoShop的拾色器集成了CIELab，是現(xiàn)階段最方便的取色方式。在拾色器中固定a、b值不變，等差調(diào)節(jié)L值，可以為選定的顏色生成均勻的色階。3.發(fā)散色板怎么定義？發(fā)散色板通常用于表現(xiàn)數(shù)據(jù)從負(fù)數(shù)到0再到正數(shù)的連續(xù)變化。常采用的表現(xiàn)方