基于色彩應(yīng)用的數(shù)據(jù)可視化設(shè)計(jì)

李夢(mèng)媛

摘 要：在數(shù)據(jù)可視化中，色彩的合理利用是重要的一環(huán)，色彩的合理使用使得可視化結(jié)果更加清晰、準(zhǔn)確、易懂。本文從色彩感知和刺激的角度闡述了色相、明度、純度在可視化中的應(yīng)用規(guī)律，并從色彩錯(cuò)視和色彩感知障礙的角度出發(fā)，探索用戶色彩感知的角度考量建立普適、準(zhǔn)確的可視化配色規(guī)律。

關(guān)鍵詞：數(shù)據(jù)可視化;色彩;色彩錯(cuò)視;色彩感知障礙

1 色彩與數(shù)據(jù)可視化

數(shù)據(jù)可視化起源于計(jì)算機(jī)圖形學(xué)，指的是通過(guò)使用圖形圖像方面的技術(shù)和方法，幫助人們理解和分析數(shù)據(jù)，達(dá)到讓人更迅速、更清楚地理解數(shù)據(jù)所傳達(dá)的內(nèi)容的目的。

認(rèn)知心理學(xué)家通過(guò)大量實(shí)驗(yàn)證明，人類獲得的信息中有83.3%來(lái)自視覺，可以預(yù)見視覺對(duì)信息識(shí)別的重要性。而在視覺中，人們第一印象就是色彩，然后才會(huì)繼續(xù)觀察形狀、內(nèi)容等，并且色彩自身就能攜帶相當(dāng)豐富的信息。因此，色彩在數(shù)據(jù)可視化中占據(jù)非常重要的位置。好的配色方案雖然容易獲得，但由于信息圖表的特殊性，找到合適的數(shù)據(jù)可視化配色方案仍然很困難。在確保顏色清晰可辨的同時(shí)，我們還必須滿足豐富且有組織的數(shù)據(jù)可視化顯示。現(xiàn)階段的配色應(yīng)用大都是按照直覺配色或者任意用色，并沒有遵循色彩的基本原理，缺乏對(duì)用戶注意力特點(diǎn)的考慮，可能會(huì)導(dǎo)致用戶產(chǎn)生疑惑，從而降低可視化的易讀性。用戶在觀看可視化數(shù)據(jù)的反應(yīng)包括情感反應(yīng)、認(rèn)知反應(yīng)和行為反應(yīng)。其中認(rèn)知反應(yīng)包括察覺、理解、記憶、錯(cuò)覺等信息處理，是用戶通過(guò)可視化內(nèi)容獲取信息的重要過(guò)程。[1]本文主要討論色彩的三要素色相、明度、純度特征以及在數(shù)據(jù)可視化的應(yīng)用，并從色彩面積錯(cuò)視和色彩感知障礙的角度出發(fā)，對(duì)數(shù)據(jù)可視化提出視覺設(shè)計(jì)的要求。

2 色彩的刺激與感知

從視覺傳達(dá)的角度來(lái)說(shuō)，影響可視化的因素有很多，包括紋理、面積、方向、位置、色彩等。而在用戶觀看的過(guò)程中，色彩給人印象更深、沖擊力更強(qiáng)。色彩的三要素為色相、明度、純度，我們從這3個(gè)角度出發(fā)，闡述這3個(gè)方面在數(shù)據(jù)可視化中的應(yīng)用規(guī)律。

2.1 色相

色相是一種顏色測(cè)量術(shù)語(yǔ)，它是用于區(qū)分各種顏色（如紅色、黃色、藍(lán)色和綠色）的顏色屬性之一。我們?cè)谌粘Ｉ顚W(xué)習(xí)中閱讀文件或文章時(shí)，常常喜歡用顏色來(lái)標(biāo)記重點(diǎn)內(nèi)容，原因是在背景相同的情況下，色彩影響了用戶的前注意階段，[2]可以將所要注意的信息凸顯出來(lái)，這與數(shù)據(jù)可視化使得用戶快速注意到重要信息的領(lǐng)域目的不謀而合。影響前注意階段的因素非常多，如紋理、形狀、面積等。相比較其他的視覺因素，色彩對(duì)前注意階段的影響更大，并且可視化設(shè)計(jì)的成本最小。如圖1所示，在圖中的數(shù)字，人們第一眼就先會(huì)觀察到數(shù)字“8”，這種注意是迅速而無(wú)意識(shí)的。

在與背景產(chǎn)生重要的區(qū)分度，吸引用戶的程度最大色彩的選取上，Smallman認(rèn)為，與背景顏色區(qū)分度比較高的有9種顏色，其中6種顏色有相對(duì)較高的使用頻率，它們是紅色、綠色、黑色、白色、藍(lán)色和黃色。[3]因此，當(dāng)背景顏色不同于這6種的時(shí)候，可選擇這幾種區(qū)分度較高的顏色吸引用戶的眼球，減輕用戶的認(rèn)知負(fù)擔(dān)。

確定好前注意色彩的同時(shí)，對(duì)于細(xì)節(jié)的部分也要進(jìn)行選擇，在細(xì)節(jié)顏色選擇的同時(shí)要仿照自然的配色，因?yàn)椴⒎撬蓄伾o人的感受都是均等的。從純粹的數(shù)學(xué)角度來(lái)看，從淺紫色到深黃色的過(guò)渡可能類似于從淺黃色到深紫色的過(guò)渡。這種現(xiàn)象的原因是我們已經(jīng)習(xí)慣了自然界長(zhǎng)期存在的那些變化，再看到相同的漸變時(shí)就會(huì)讓我們感覺舒適。例如，在美麗的夕陽(yáng)下，我們可以看到明亮的黃色到深紫色的漸變，而背離自然漸變的顏色會(huì)使用戶產(chǎn)生不舒適的感覺。

2.2 明度和純度

表達(dá)同一類型數(shù)據(jù)不同程度的情況，盡量使用明度或純度這一視覺元素，因?yàn)檫^(guò)多的色彩元素會(huì)增加用戶的認(rèn)知負(fù)荷。

色彩的明度對(duì)比是所有色彩因素中最容易區(qū)別的特征。但是在日常生活中，我們發(fā)現(xiàn)，雖然人們對(duì)明度區(qū)分比較容易，但是多個(gè)明度等級(jí)放在一起的時(shí)候分辨能力還是比較弱。所以，在進(jìn)行可視化視圖設(shè)計(jì)時(shí)，盡量使用不超過(guò)6個(gè)層次的明度等級(jí);同時(shí)盡量等距地增大色彩明度之間的跨度，[4]使用戶觀看的時(shí)候可以明確分清楚，不會(huì)產(chǎn)生是否設(shè)計(jì)者用錯(cuò)顏色明度的疑惑，降低用戶的認(rèn)知負(fù)擔(dān)，增加可視化數(shù)據(jù)的可讀性，減少用戶心理上產(chǎn)生挫敗感。

純度取決于顏色中顏色成分和無(wú)色成分（灰色）的比例。顏色分量越大，飽和度越大;無(wú)色成分越大，飽和度越低。純度的表達(dá)上與色彩的面積之間有著強(qiáng)烈的影響，面積較小的區(qū)域上的純度表達(dá)比面積大的區(qū)域上困難一些。為了能夠使用戶更清晰地分辨，小面積區(qū)域一般用飽和度高的顏色填充，大面積區(qū)域則用低飽和度的顏色填充。

3 數(shù)據(jù)可視化中色彩錯(cuò)覺的考量

當(dāng)我們的眼睛同時(shí)受到不同顏色的刺激時(shí)，由于顏色之間的相互干擾，會(huì)產(chǎn)生特殊的視覺效果。特定的顏色組合可能會(huì)產(chǎn)生錯(cuò)覺，并使設(shè)計(jì)師難以實(shí)現(xiàn)期待結(jié)果。因?yàn)槿藗儗?duì)純度的認(rèn)知很大程度基于周圍環(huán)境，高純度底色上的色彩顯得純度底，而一些低純度的底色的色彩相反。因此，要適當(dāng)考慮環(huán)境色對(duì)可視化圖表的影響。

對(duì)色彩的面積錯(cuò)視的考量，是數(shù)據(jù)可視化中重要的一環(huán)。由于顏色具有膨脹或收縮的感覺，即暖色的顏色具有視覺擴(kuò)散的感覺，冷色調(diào)的顏色具有收縮效果，從而導(dǎo)致視覺顏色區(qū)域的差異。我們看到的法國(guó)國(guó)旗均分的藍(lán)色、白色、紅色實(shí)際上三色比例為37∶30∶33，視覺效果才相對(duì)一致。

應(yīng)用到數(shù)據(jù)可視化上我們可以看到，見圖2，此數(shù)據(jù)可視化表示的是兩個(gè)國(guó)家壽命情況的對(duì)比，左右兩個(gè)圓的面積表示兩個(gè)國(guó)家人口的預(yù)期壽命，面積相等，均為73歲。我們可以看到，在數(shù)值情況一致的情況下，左邊的圓圈采用了膨脹感強(qiáng)的橘色，而右邊圓圈采用了收縮感強(qiáng)的藍(lán)色。盡管兩個(gè)圓面積一致，給人造成的感覺是左邊的圓明顯大于右邊的圓。這也是面積錯(cuò)視需要注意的一點(diǎn)。

在視覺設(shè)計(jì)中，這種無(wú)意的幻覺會(huì)引起用戶理解困難。Mitelst?dt等人通過(guò)不斷迭代像素的顏色值以獲得最佳效果，[5]充分考慮人的感知，避免增加用戶的疑惑。

除了對(duì)像素偏差值進(jìn)行補(bǔ)償之外，我們也可以考慮使用灰色來(lái)弱化顏色特點(diǎn)的信息?；疑梢云鸬揭欢ǔ潭鹊耐实淖饔茫_(dá)到一種調(diào)和的感覺。

與此同時(shí)，不同的色調(diào)也會(huì)給人不同的心理感受，比如溫暖，重量和距離，所以在視覺設(shè)計(jì)中要充分利用這一特性。[6]比如中國(guó)城市溫度變化圖可使用溫暖感程度由高到低的色彩來(lái)標(biāo)記從熱到冷的區(qū)域。波長(zhǎng)較長(zhǎng)且明度較高的暖色有前進(jìn)感，而波長(zhǎng)較短且明度低的冷色調(diào)有后退感。我們可以了解不同顏色的溫暖感、興奮感、重量感、距離感。

4 色彩感知障礙的考量

調(diào)查顯示，色覺障礙是全球范圍內(nèi)普遍存在的問(wèn)題。實(shí)際的原因是人眼中的三種錐形細(xì)胞分別受到紅色、綠色和藍(lán)色3種光的波長(zhǎng)信號(hào)的刺激，從而產(chǎn)生我們所觀察的真實(shí)世界。但是這3種錐狀細(xì)胞若有一種或幾種受到損傷，就導(dǎo)致感知色彩出現(xiàn)異常，甚至不能產(chǎn)生感知現(xiàn)象。最常見的情況是紅綠色盲占色盲感覺障礙患者的90%。

四種色盲如下：紅色盲又稱第一色盲。主要區(qū)別在于紅色無(wú)法區(qū)分，綠色也變得更輕。綠盲也稱為第二種色盲，是最常見的色盲。他們眼中的顏色亮度會(huì)降低，特別是綠色和紅色。藍(lán)黃色盲，也被稱為第三種色盲，藍(lán)色和黃色混淆，紅色，綠色可見。全色盲是一種完全的圓錐形細(xì)胞功能障礙，這與夜盲癥（棒狀細(xì)胞功能障礙）恰恰相反。多彩的世界在它的眼中是深灰色，就像黑白電視一樣，只有明暗相間，但沒有色差。

4.1 建立普適的色彩方案

有色彩感知障礙的用戶難以正常理解可視化所表達(dá)的信息，因此，設(shè)計(jì)者在進(jìn)行可視化設(shè)計(jì)時(shí)，也要把這部分人考慮進(jìn)來(lái)，建立一個(gè)普適的設(shè)計(jì)方案?？梢越⒁曈X模型，將正常顏色與色彩障礙后的顏色一一對(duì)應(yīng)，使可視化設(shè)計(jì)者能了解色彩認(rèn)知障礙人眼中的世界，在選擇配色時(shí)有這方面的考量。（見圖3）

通過(guò)紅綠色盲的色譜圖，我們可以觀察到色盲可以識(shí)別的色調(diào)是有限的，紅綠色盲的認(rèn)知圖譜比較相似。而由于紅色和綠色盲的數(shù)量占色盲總數(shù)的99%，我們需要更多地了解他們可以看到的顏色。以下是一些紅綠色盲的顏色視覺規(guī)則：

第一，紅綠色盲難以區(qū)分的兩種差異是只帶有紅色或綠色元素的顏色。如紅色和綠色，藍(lán)色和紫色（藍(lán)+紅），綠色和棕色，紅色和棕色等。

第二，紅色和綠色盲人對(duì)藍(lán)色更敏感。例如，他們會(huì)混淆紅色和綠色，黃色和黃綠色，但他們可以清楚地區(qū)分綠色和藍(lán)綠色（翠綠色）。

第三，紅綠色盲的紅色不是一種明亮、引人注目的顏色。相反，紅色對(duì)他們來(lái)說(shuō)很深，而深紅色幾乎是黑色。因此，色盲者難以區(qū)分文章中的深紅色。

第四，盡管色盲的人認(rèn)識(shí)色調(diào)的能力較弱，但他們對(duì)亮度和飽和度非常敏感。

第五，低飽和度色彩比高飽和度色彩難以識(shí)別。如天藍(lán)色和粉紅色。

選擇正常人與色彩缺陷人群共同能分清的色彩。對(duì)于色盲人士的色彩識(shí)別能力，需要仔細(xì)選擇色彩匹配，以避免選擇混淆的色彩區(qū)域。[7]然而，對(duì)具有各種色覺能力的人進(jìn)行色彩匹配并不容易，包括色盲、色弱和正常色覺的人。尤其是當(dāng)相同的界面需要以多種顏色出現(xiàn)時(shí)，它會(huì)讓設(shè)計(jì)師非常頭疼。日本的研究已經(jīng)提出了一套無(wú)障礙的顏色匹配建議，在這里供大家參考。這組顏色對(duì)于色盲和非色盲都是可讀的。例如，它選擇朱紅色代替紅色，藍(lán)綠色代替綠色，紫色代替紫色。為了減少色盲的問(wèn)題，它適用于顯示和打印，并且所有顏色的名稱也很容易定義。與此同時(shí)，Machado等提出實(shí)施一種顏色重建方法，[7]為具有顏色感知障礙的人設(shè)置高對(duì)比度圖像。

4.2 綜合其他視覺元素綜合表達(dá)

在保持可視化設(shè)計(jì)需要表達(dá)內(nèi)容意圖不變的情況下，將適合正常人類色彩方案替換為視力缺陷人群易于區(qū)分的顏色方案。同時(shí)，我們可以采用多種方式來(lái)解決色彩認(rèn)知障礙問(wèn)題。

綜合利用色彩信息與其他視覺元素共同來(lái)編碼信息。除了使用顏色信息之外，還可以結(jié)合使用各種可視變量，例如形狀、大小、注釋等。形狀可以包含多個(gè)方面，如幾何圖形的變換、實(shí)線虛線點(diǎn)線的變換、字母數(shù)字的變換等。如下圖5所示，給柱狀圖增加形狀底紋的信息，可以準(zhǔn)確分清信息。

5 結(jié)語(yǔ)

色彩是視覺設(shè)計(jì)的重要組成部分，合理利用色彩會(huì)使數(shù)據(jù)可視化的效果更加清晰。本文總結(jié)了以下顏色和基本原則：

第一，應(yīng)用特征整合理論將數(shù)據(jù)顯示劃分為預(yù)注意階段和詳細(xì)關(guān)注階段。在預(yù)注意階段，使用突出顯示的顏色來(lái)編碼重要信息;在細(xì)節(jié)注意階段，要注意與自然顏色變化的規(guī)律相統(tǒng)一。

第二，明度選取最好不要超過(guò)6個(gè)。用低飽和度顏色填充大尺寸區(qū)域，并用高飽和度顏色填充小尺寸區(qū)域。

第三，考慮人的視覺特征，將色彩的純度、面積錯(cuò)視等考慮進(jìn)去，避免誤導(dǎo)用戶對(duì)可視化的理解。

第四，考慮用戶的色彩感知障礙的因素，適當(dāng)變換配色方案或適當(dāng)增加視覺元素的綜合表達(dá)。

反觀近年來(lái)的可視化設(shè)計(jì)，可以看到在色彩運(yùn)用上仍有很多改進(jìn)的空間，可視化色彩設(shè)計(jì)原則能提升今后可視化方案設(shè)計(jì)，優(yōu)化用戶體驗(yàn)。

參考文獻(xiàn)：

[1] 楊歡，李義娜，張康.可視化設(shè)計(jì)中的色彩應(yīng)用[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2015，27（09）：1587-1596.

[2] 張豹.視覺工作記憶對(duì)前注意階段注意定向的調(diào)節(jié)[A].第十一屆全國(guó)心理學(xué)學(xué)術(shù)會(huì)議論文摘要集[C].中國(guó)心理學(xué)會(huì)，2007：1.

[3] 呂瑾瑾.面向紅綠色盲群體的高校圖書館網(wǎng)頁(yè)背景顏色的眼動(dòng)研究[A].第二十一屆全國(guó)心理學(xué)學(xué)術(shù)會(huì)議摘要集[C].中國(guó)心理學(xué)會(huì)，2018：2.

[4] 王學(xué)義，張偉，馬維寧.信息可視化中色彩的應(yīng)用研究[J].科技情報(bào)開發(fā)與經(jīng)濟(jì)，2008（26）：119-121.

[5] 劉沁穎，郁舒蘭.數(shù)據(jù)可視化的色彩與形式[J].科技與創(chuàng)新，2018（06）：39-42.

[6] Ya-Chih Li .色覺障礙者于色彩呈現(xiàn)之生活需求性探索[A].首屆中國(guó)人機(jī)交互國(guó)際研討會(huì)論文集[C].世界華人華僑人機(jī)交互協(xié)會(huì)，2013：2.

[7] 霍妍.針對(duì)色覺障礙人群的信息可視化研究[D].北方工業(yè)大學(xué)，2016.