信息圖形中的顏色探討—面向色盲人士友好的設(shè)計(jì)解決方案

2021-4-21    資深UI設(shè)計(jì)者

顏色可以用來(lái)區(qū)分信息圖形上的數(shù)據(jù)類別和維度,是數(shù)據(jù)可視化中最常用的視覺(jué)變量之一。然而,世界上有超過(guò)8%的男性和0.4%的女性都被色覺(jué)障礙的問(wèn)題困擾——他們?cè)谧R(shí)別部分或者全部顏色時(shí)有困難。我們通?;\統(tǒng)的稱這類人群為“色盲(Color Blindness)”(也稱為道爾頓癥、色覺(jué)缺失、色覺(jué)辨認(rèn)障礙、色弱等)。面對(duì)如此龐大的特殊受眾,設(shè)計(jì)師理應(yīng)關(guān)注他們的需求。信息圖形設(shè)計(jì)本是以向用戶傳遞精準(zhǔn)數(shù)據(jù)為目標(biāo),也不能忽視了這部分群體。

一. 了解色盲
“色盲能看到顏色嗎?”“他們只能看到黑、白嗎?”——人們常誤以為色盲視覺(jué)所見的景象只有灰階分布,其實(shí)不是的。色盲并不意味著色覺(jué)的完全喪失,而是指部分色覺(jué)受損,因此無(wú)法正確感知和分辨某些區(qū)域的顏色。色盲可以分為:紅色盲(P)、綠色盲(D)、藍(lán)色盲(T)和全色盲。其中紅色盲和綠色盲最為普遍,合稱為紅綠色盲。全球大約2億人都患有色盲,它的普遍程度甚至高于AB血型的人群。下面我們感性的看看色盲人眼中的世界:
 

從上面模擬色盲色覺(jué)的圖片來(lái)看,我們可以感受到色盲人士能夠辨識(shí)的色相較為有限。紅色盲和綠色盲的色覺(jué)較為近似。由于紅綠色盲人數(shù)占到了色盲總數(shù)的99%,我們需要更多地理解他們能看到的顏色。以下列舉了紅綠色盲容易混淆的顏色,以及色覺(jué)上的一些規(guī)律:

   1 ) 紅綠色盲難以分辨兩種差別只在紅色或綠色元素的顏色。如紅色和綠色;藍(lán)色和紫色(藍(lán)+紅);綠色和棕色;紅色和棕色等。

2 ) 紅綠色盲人士對(duì)藍(lán)色更為敏感。舉例來(lái)說(shuō),他們會(huì)把紅色和綠色、或黃色和黃綠色混淆,但卻能清楚的分辨綠色和藍(lán)綠色(翠綠色)。

3 ) 紅綠色盲眼中的紅色并不是一種明亮醒目的顏色。相反紅色對(duì)他們來(lái)說(shuō)顯得非常深,而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色強(qiáng)調(diào)字。

4 ) 雖然色盲人士對(duì)色相的辨識(shí)能力較弱,但卻對(duì)明度、飽和度非常敏感。

5 ) 相比高飽和度的顏色,低飽和度的顏色更難辨認(rèn)。如天藍(lán)色和粉紅色。

 

也許以上的分析還是太抽象,為了更直觀的看到色盲人士眼中的顏色,下面介紹幾種模擬色盲色覺(jué)的工具,方便設(shè)計(jì)師們?cè)O(shè)計(jì)和檢驗(yàn):

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

Photoshop CS4和Illustrator CS4及以上版本提供了模擬紅色盲和綠色盲的校樣設(shè)置,對(duì)于每天都在Photoshop/Illustrator中拼搏的視覺(jué)設(shè)計(jì)師來(lái)說(shuō),這是最簡(jiǎn)便的一種方法了。選擇“視圖—校樣設(shè)置—紅色盲型/綠色盲型”

 Color Oracle:http://colororacle.org/

 網(wǎng)站Color Blind Web Page Filter:http://colorfilter.wickline.org/

 

二.設(shè)計(jì)解決方案

設(shè)計(jì)面向色盲人士友好的信息圖形,并不意味著要設(shè)計(jì)師要放棄使用色彩這種“利器”。即便是對(duì)色覺(jué)障礙的人士來(lái)說(shuō),顏色依然是區(qū)分不同類數(shù)據(jù)的一種簡(jiǎn)單快速的表現(xiàn)形式。要提高信息圖形的識(shí)別性和易讀性,我們可以遵循這樣幾個(gè)思路尋找解決方案:(1)不完全依賴顏色來(lái)區(qū)分信息,同時(shí)使用多種視覺(jué)變量來(lái)編碼信息;(2)選擇安全的配色方案;(3)使用文字注解。

1.冗余編碼

避免僅使用顏色來(lái)編碼信息,應(yīng)盡量同時(shí)使用多種視覺(jué)變量(如形狀+顏色、尺寸+顏色、注釋+顏色)來(lái)對(duì)信息編碼。其中,形狀包括了這樣一些可使用的元素:圓形、三角形、矩形等;實(shí)線、虛線、點(diǎn)線等;字母、數(shù)字符號(hào)等。這里需遵循的一個(gè)原則是:使用盡可能少的顏色——結(jié)合使用不同形狀符號(hào)和少量鮮艷的顏色,效果遠(yuǎn)好于只使用一種形狀和多種顏色。

 

 
2.選擇適當(dāng)?shù)呐渖?/span>
針對(duì)色盲人士的顏色識(shí)別能力,需要精心選擇配色,才能避免選擇容易混淆的色區(qū)。然而,要使配色能覆蓋到各種色覺(jué)辨認(rèn)能力的人(包括色盲、色弱和色覺(jué)正常的人群)并不是一件容易的事,尤其同一界面需要出現(xiàn)多種顏色時(shí),讓設(shè)計(jì)師非常頭疼。日本有研究得出一組無(wú)障礙配色建議,在此分享,供大家參考。這組顏色針對(duì)色盲和非色盲人士都是易辨識(shí)的(例如它選擇了朱紅色代替紅色,藍(lán)綠色代替綠色,紫紅色代替紫色,以減少色盲人士的困擾),它對(duì)屏顯和印刷都適用,并且所有顏色的名稱也容易定義。

 

需要注意的是,從以上配色組中選取顏色時(shí):A. 請(qǐng)交替使用暖色和冷色;B. 當(dāng)使用多個(gè)暖色和多個(gè)冷色時(shí),在明度和飽和度上做出區(qū)別; C. 避免同時(shí)使用低飽和度和低明度的組合。
另外分享兩個(gè)配色工具,它們都提供了針對(duì)色盲人士配色的選項(xiàng),可以輔助大家進(jìn)行配色:
網(wǎng)站CONTRAST-A-WEB V2.0 http://www.dasplankton.de/ContrastA/(打開“show color deficiency simulation”面板)
地圖配色工具COLOR BREWER 2.0 http://colorbrewer2.org/(勾選“colorblind safe”選項(xiàng))

 

三、舉例

下面以幾種常用信息圖形為例,來(lái)說(shuō)明如何為色盲用戶優(yōu)化信息圖:

1)點(diǎn)狀圖

 

優(yōu)化采用了這樣一些手段:A.調(diào)整配色,將色盲人士容易混淆的紅、綠、橙色換為紅、藍(lán)、黃色。B.調(diào)整明度,使圖中幾個(gè)顏色在明度上差異更明顯。C.為不同元素賦予不同形狀。所有使用點(diǎn)元素的信息圖,都可以參考這種解決方式。

2)折線圖

 

優(yōu)化采用了這樣一些手段:A.采用更粗的線條,使顏色更明顯。(色塊越小,顏色越難分辨。對(duì)有色覺(jué)障礙的人來(lái)說(shuō),帶顏色的細(xì)線、小圖標(biāo)、細(xì)體文字尤其難區(qū)分。)B.換用不同形狀的線條(實(shí)線、虛線、點(diǎn)線)。C.文字直接注釋在線的周圍。D.顏色微調(diào)。這樣對(duì)每一類數(shù)據(jù)使用多重可視化變量進(jìn)行編碼后,即便顏色信息完全丟失,也能夠完整的傳遞信息。所有使用線元素的信息圖,都可以參考這種解決方式。

3)柱狀圖

 

通過(guò)增加底紋,直接標(biāo)注文字注釋的方式優(yōu)化了柱狀圖。所有使用面的圖形(如餅圖),都可以參考這種解決方式。

 

四.寫在最后

在實(shí)際設(shè)計(jì)過(guò)程中,我們不一定會(huì)同時(shí)使用到以上所有手段,需要在美觀和友好之間進(jìn)行權(quán)衡。我們也可以采用一些交互手段,避免同一界面中元素太多太過(guò)雜亂的問(wèn)題。如highcharts這個(gè)趨勢(shì)圖非常優(yōu)秀,它采用了易辨識(shí)的顏色,每個(gè)節(jié)點(diǎn)處都使用了不同形狀的符號(hào),然而僅當(dāng)鼠標(biāo)hover到具體節(jié)點(diǎn)時(shí),會(huì)出現(xiàn)該條線對(duì)應(yīng)的信息(“New York”)。

 

另外除了鼠標(biāo)hover的交互方式以外,我們甚至也可以為色盲人士提供單獨(dú)的色盲模式切換,這樣也可以兼顧視覺(jué)上的美觀,避免了太多信息的干擾。這種形式在游戲和軟件中也有先例。例如iChat,一般情況下僅有不同顏色來(lái)區(qū)別用戶的在線狀態(tài),但同時(shí),它也提供了“User shapes to indicate status”選項(xiàng),可以將“空閑”狀態(tài)換成橙黃色三角形符號(hào),將“忙”狀態(tài)換成紅色方形符號(hào)表示。

 



文章來(lái)源:騰訊CDC  作者:pearlfu


藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔