面向紅綠色障群體的移動(dòng)端界面配色設(shè)計(jì)策略

陳曉鳳 徐佳瑤 李航 齊瑞文

摘 要：色彩是物體所能提供的最直觀的視覺(jué)感受，舒適的配色可以滿足人的感官需要，反差大的配色可以區(qū)別各種事物和信息，有效地突出界面的主題信息。在龐大的色覺(jué)異常人群中，移動(dòng)端界面的配色不能提供最直觀的視覺(jué)體驗(yàn)和色彩突出重點(diǎn)信息。文章根據(jù)紅綠障礙人群視覺(jué)特殊性進(jìn)行分析與總結(jié)，并通過(guò)對(duì)國(guó)內(nèi)外案例分析，總結(jié)出以黃藍(lán)配色為主色調(diào)的色彩搭配，并且輔助色彩與結(jié)構(gòu)型符號(hào)相聯(lián)系的圖案，以達(dá)到適合普通人群和紅綠色覺(jué)異常者能共同使用的界面配色設(shè)計(jì)，實(shí)現(xiàn)媒體信息的清楚傳達(dá)，討論更具包容性的移動(dòng)端界面配色設(shè)計(jì)。

關(guān)鍵詞：紅綠色障群體；界面色彩色設(shè)計(jì)；配色方法

Abstract： Color is the object can give us the most direct visual experience， beautiful color matching can meetpeople's sensory needs， contrast prominent color can also be used to distinguish different things and information，effectively highlight the theme of the interface content. However， for a large group of people with abnormal colorvision， the color of the mobile terminal interface does not give the most direct visual experience， and does nothighlight the main content of the mobile terminal interface. Based on the daily habits and psychological needsof the red and green disabled group， the paper designs the interface color that can meet the needs of the colordisabled people and ordinary people， so as to achieve a clear expression of media information. By analyzing thevisual particularity of red and green barrier groups， we can understand the needs of users. At the same time，combined with domestic and foreign case analysis， the mobile terminal interface color design suitable for red andgreen disabled groups and ordinary people was obtained， and the interface color design with more inclusive visionwas discussed.

Keywords：Red and green barrier groups;interface color color design;color matching method

0 前言

人類的眼睛能夠識(shí)別物體的大小、形狀和顏色，而這種識(shí)別顏色的能力被稱為色覺(jué)。然而，由于視覺(jué)器官的缺陷，有些人無(wú)法區(qū)分特定的顏色，被人們通常稱為“色盲”[1]。色盲可分為先天性色盲和后天性色盲，區(qū)別在于先天性色盲是遺傳性的，而后天性色盲則是正常色覺(jué)的人因患某種眼底疾病導(dǎo)致的色覺(jué)異常。后天性色盲通常會(huì)出現(xiàn)視覺(jué)障礙和中央暗點(diǎn)，但在大多數(shù)情況下可以治療，因此后天的顏色障礙通常是暫時(shí)性的。經(jīng)過(guò)現(xiàn)代技術(shù)的發(fā)展，色覺(jué)檢查現(xiàn)在已經(jīng)有了許多有效的方法，比如色盲檢查圖和色相排列檢查等。然而，到目前為止，仍然沒(méi)有根治色盲的醫(yī)學(xué)手段，只能通過(guò)輔助工具來(lái)彌補(bǔ)色覺(jué)缺陷[2]。由于檢測(cè)條件的不同，先天性色盲患者的診斷結(jié)果也有所不同。中國(guó)科學(xué)院遺傳研究所的一項(xiàng)調(diào)查表明，在全國(guó)范圍內(nèi)，紅、綠色覺(jué)異常的人口比例較高，其中男性比例最高，高達(dá)5.4%，而女性僅占0.73%[3]。在這樣一個(gè)龐大的群體中，他們所遇到的問(wèn)題已經(jīng)成為設(shè)計(jì)領(lǐng)域的一個(gè)重要課題。隨著中國(guó)互聯(lián)網(wǎng)的飛速發(fā)展和人民生活水平的不斷提高，智能手機(jī)已經(jīng)成為一種不可或缺的電子設(shè)備。隨著移動(dòng)端界面設(shè)計(jì)和功能的不斷變化，用戶的需求也在不斷增加。因此，有必要研究出更具包容性的界面配色設(shè)計(jì)。

1 紅綠色盲的概述

根據(jù)德國(guó)物理學(xué)家赫姆霍茲的三色理論，人視網(wǎng)膜中的三種感光錐細(xì)胞（L、M、S）能夠感受光，從而使人類視覺(jué)能夠感知顏色的變化。S、M 和L 類錐狀細(xì)胞對(duì)單色光譜刺激的歸一化響應(yīng)光譜如圖1 所示。三種錐狀細(xì)胞分別接收紅、綠、藍(lán)三種光線，其中L 視錐細(xì)胞對(duì)紅光最敏感，M 視錐細(xì)胞對(duì)綠光最敏感，而S 視錐細(xì)胞對(duì)藍(lán)光最敏感[4]。__

在表格1 中顯示了這三種細(xì)胞的響應(yīng)波長(zhǎng)范圍和峰值，可以看出大多數(shù)紅綠色覺(jué)異常的成因是由于缺乏某些特定的細(xì)胞或某種細(xì)胞。例如，紅色色覺(jué)障礙者缺乏L 型視錐細(xì)胞，而L 型視錐細(xì)胞，而L 型視錐細(xì)胞與M 型視錐細(xì)胞的波段有重疊，這使得患者無(wú)法分辨紅色和綠色；綠色盲缺乏M 型視錐細(xì)胞也很難分辨紅色和綠色[5]。

由于紅綠色覺(jué)異常是最常見(jiàn)的色盲類型，因此常常將它們混淆為“紅綠色盲”。由于紅色障礙患者數(shù)量最多，因此被稱為“第一色盲”，而綠色色盲則被稱為“第二色盲”。因?yàn)榧t色和綠色色盲人群數(shù)量在色盲人群中占比最大，所以本文選擇這一群體為研究對(duì)象。

1.1 “紅綠色盲”辨別色相的特殊性

紅綠色覺(jué)障礙群體實(shí)際上是指失去分辨某個(gè)或某些顏色的能力。在色覺(jué)障礙群體中，紅綠色覺(jué)障礙者是最常見(jiàn)的。下圖展示了普通人和紅綠色覺(jué)障礙者的視角下的色彩模擬圖。在圖2 中，C 代表普通人的視覺(jué)，P 代表紅色覺(jué)障礙者的視角，D 代表綠色覺(jué)障礙者的視角。從顏色上來(lái)看，紅色和綠色覺(jué)障礙者的視覺(jué)區(qū)別并不大，僅有明度和飽和度有些許差別。因此，文章中提到的紅色覺(jué)障礙者和綠色覺(jué)障礙者可以統(tǒng)稱為紅綠色覺(jué)障礙群體。

紅綠色覺(jué)障礙群體的視覺(jué)特點(diǎn)是色彩單一、紅色和綠色相近，因此難以分辨紅、綠、藍(lán)和紫色。在這些患者眼中，紅色和綠色更接近于棕色，而深紅色則更接近于棕黑色，不易引起注意。值得一提的是，紅綠色覺(jué)障礙者對(duì)藍(lán)色和黃色的敏感度較高，淺藍(lán)色和深紫色在他們眼中十分明顯。因此，淺色和深色的明度不會(huì)混淆。

1.2 “紅綠色盲”辨別明度與飽和度的特殊性

根據(jù)色盲的原理和分類，色覺(jué)異常者只是無(wú)法準(zhǔn)確辨別某個(gè)色相，而非全部顏色。雖然在色相識(shí)別上有缺陷，但與普通人相比，他們更容易分辨相同顏色的不同明度和更高飽和度的顏色。然而，色彩飽和度較低的顏色難以分辨，如淺藍(lán)和淺紫。設(shè)計(jì)者應(yīng)充分發(fā)揮他們的色彩明度和飽和度識(shí)別特性，更好地幫助他們辨別不同的色彩。

2 “紅綠色盲”的界面案例分析

經(jīng)過(guò)研究，國(guó)內(nèi)學(xué)者根據(jù)地圖顯示的地理特征以及紅綠色覺(jué)障礙人群的光譜特性，提出了一系列適合于紅綠色覺(jué)異常者的地圖著色原則。高德地圖的移動(dòng)端界面（見(jiàn)圖3）結(jié)合了這一系列配色原理，并在其V7.7.8 官方版中增加了針對(duì)色覺(jué)障礙者的視覺(jué)障礙模式的道路設(shè)定，以方便色覺(jué)異常者識(shí)別。

嗶哩嗶哩與中國(guó)信息通信研究院?jiǎn)挝缓献鳎闪ⅰ百Y訊無(wú)障礙技術(shù)及知識(shí)產(chǎn)權(quán)開(kāi)放工作小組”，并加入色盲優(yōu)化的配色設(shè)置。移動(dòng)端視頻窗口右上角可找到“視覺(jué)優(yōu)化”選項(xiàng)，改變視頻顏色獲得更舒適的界面（ 圖4）。選項(xiàng)名稱設(shè)計(jì)考慮人道關(guān)懷，給色盲用戶良好的心理感受。但在圖5 中，黑色背景上的紅色字體對(duì)紅綠色盲者難辨，建議用黃色字體替換，以便正常色覺(jué)者、第一型色盲者和第二型色覺(jué)者明顯區(qū)分，更人性化。

美國(guó)Zynga 游戲公司開(kāi)發(fā)的一款單機(jī)游戲界面中，也為色覺(jué)障礙群體設(shè)計(jì)了界面。作為一個(gè)具有娛樂(lè)性的界面，顏色是最好的表現(xiàn)形式，但對(duì)于色盲的玩家來(lái)說(shuō)，這并不能帶來(lái)任何樂(lè)趣。例如，游戲界面“Two Dots”（圖6），其游戲核心是把兩個(gè)同樣顏色的小圓點(diǎn)連接在一起。游戲設(shè)定了一種優(yōu)化視覺(jué)模式，將特定的圖形添加到各個(gè)顏色的圓盤(pán)上，如代表紅色的“—”、表示藍(lán)色的“||”、代表黃色“□”等。這種界面設(shè)計(jì)為色覺(jué)障礙的人提供了帶有色彩信息的圖形，可以不依靠顏色獲取直接信息，利用圖形就可以進(jìn)行游戲。然而，這種設(shè)計(jì)沒(méi)有將圖形與色彩的意象相結(jié)合，不能讓人一眼記住色彩信息。因此，這種圖形只適合簡(jiǎn)單的色彩組合，難以應(yīng)用于復(fù)雜的多色彩界面。

葡萄牙米尼奧大學(xué)教授Miguel Neiva 發(fā)明了“ColorADD”圖形記號(hào)，以幫助色覺(jué)障礙者識(shí)別不同顏色。該符號(hào)系統(tǒng)是一種通用、包容和無(wú)障礙的語(yǔ)言， 目前比較完善。ColorADD 設(shè)定了5 種基本色彩，與圖形符號(hào)相對(duì)應(yīng)，紅、黃、藍(lán)三原色，白、黑則是為了調(diào)節(jié)色彩明度。在界面配色設(shè)計(jì)時(shí)，使用這種符號(hào)設(shè)計(jì)可以提高色覺(jué)異常用戶對(duì)圖像的記憶力，避免圖形難以區(qū)分的現(xiàn)象，同時(shí)也為紅綠色盲移動(dòng)端界面的設(shè)計(jì)提供了有效的方法。圖7 中展示了ColorADD 符號(hào)的示例。

3 紅綠色盲移動(dòng)端界面的設(shè)計(jì)策略

3.1 增強(qiáng)色相的對(duì)比差

在進(jìn)行移動(dòng)端界面配色設(shè)計(jì)時(shí)，需要考慮到紅綠色覺(jué)障礙人群的辨別能力和認(rèn)知體驗(yàn)，構(gòu)建出一套符合色覺(jué)異常群體的色彩體系。這個(gè)體系可以考慮以上述高德地圖中我國(guó)自主研發(fā)的無(wú)障礙通用配色體系為基礎(chǔ)，采用藍(lán)色相和黃色相為主色調(diào)，在界面配色中衍生出多種輔助色相的創(chuàng)新搭配。

在日常生活中，紅色通常會(huì)給人帶來(lái)危險(xiǎn)和興奮的視覺(jué)效果，但在紅綠色覺(jué)障礙人的眼里，紅色并不像普通人視覺(jué)中那么鮮艷。因此，應(yīng)該避免在最顯眼的位置使用紅字黑底搭配。建議把紅色調(diào)整為黃色，以形成明度差別大的對(duì)比，更能吸引紅綠色障群體的注意力，使其高效獲取重點(diǎn)信息。

與色覺(jué)正常的人相比，紅綠色覺(jué)異?；颊咧荒鼙鎰e藍(lán)、黃兩種色相，因此整體界面配色可以采用藍(lán)色相和黃色相為主。比如，F(xiàn)acebook 界面的主色調(diào)就是以藍(lán)色為主搭配白色輔助，整體界面配色清晰明確，可以更好、更快、更精確地向用戶傳遞色塊中的重要內(nèi)容。

3.2 選擇明度與純度對(duì)比強(qiáng)烈的色彩

在以上提到的色相辨識(shí)的基礎(chǔ)上，本文將討論普通人群、紅綠色覺(jué)異常群體以及顏色搭配中明度對(duì)比辨識(shí)問(wèn)題。色覺(jué)異常的人在色相上的感官感受相對(duì)較差，而恰好在色彩明度上的感知能力更強(qiáng)。對(duì)于紅綠色覺(jué)異常的人，他們所能看到的色相比普通人少，但看到的色彩明度和飽和度卻與常人一樣。因此這類人群更容易辨別明度對(duì)比高、色彩飽和度對(duì)比強(qiáng)的色彩，但難以分辨明度和飽和度相近的色彩。在網(wǎng)站顏色的設(shè)計(jì)中，需要充分考慮到明度與飽和度較高的對(duì)比度色彩，并選取其中最適合紅綠色盲人群體能夠識(shí)別的顏色作為重點(diǎn)信息標(biāo)注。

在手機(jī)的界面設(shè)計(jì)中，需要特別強(qiáng)調(diào)部分的色彩圖案，考慮普通視覺(jué)者和紅綠色覺(jué)異常能力不同的人都能夠在屏幕亮度適中的情況下看到顏色之間的差異度，這種差異度應(yīng)該在60%-70% 之間[6]。除了色塊的明度對(duì)比反差外，在面向多文字、多底紋的界面時(shí)，文本與底色的黑白反差也要進(jìn)行調(diào)節(jié)。例如，紅和綠、紅和棕、淺粉、淺綠和淺灰、深藍(lán)和紫色等這些色彩，是由于紅綠含量的不同而形成的，對(duì)于紅綠色覺(jué)異常的人群來(lái)說(shuō)很困難。如果界面必須采用這些色彩搭配，則需要增加亮度或增加飽和度的反差，并且文本與背景之間的對(duì)比度也要在70% 及以上。例如，在以紅綠為主色調(diào)的界面設(shè)計(jì)中，應(yīng)該把綠色相設(shè)定為較深的墨綠，把紅色相設(shè)定為較亮的橙色相，以實(shí)現(xiàn)用戶對(duì)界面色彩高度的識(shí)別性和舒適性。

3.3 點(diǎn)線圖像輔助色彩使用

目前，廣大移動(dòng)端界面設(shè)計(jì)除了在色彩上進(jìn)行處理外，還會(huì)加入文字說(shuō)明。比如游戲《魔獸世界》中開(kāi)啟“色盲模式”后，會(huì)出現(xiàn)“精良”、“史詩(shī)”等文字，對(duì)于不能憑色彩分辨的人來(lái)說(shuō)，文字輔助非常有用。雖然這種設(shè)計(jì)降低了設(shè)計(jì)感，但對(duì)于色彩信息難以分辨的人來(lái)說(shuō)確實(shí)很有效。然而，大量的文字疊加會(huì)破壞整個(gè)界面的美感。

因此，在界面信息可視化設(shè)計(jì)中，還可以采用點(diǎn)線面圖形來(lái)輔助色彩使用。

當(dāng)前手機(jī)終端界面設(shè)計(jì)常常使用色彩的差異來(lái)劃分區(qū)域模塊，但這往往給色覺(jué)異常的用戶帶來(lái)了顏色識(shí)別的困難。因此，建議同時(shí)運(yùn)用色彩和圖案搭配，而不能單憑顏色區(qū)分重要信息。圖形輔助是最直觀的表現(xiàn)形式之一，但不同的人對(duì)圖形的理解會(huì)有不同的含義。因此，在傳達(dá)某些重要信息時(shí)，需要掌握物體的特性，使圖形信息能被正確解讀。將顏色信息轉(zhuǎn)換成簡(jiǎn)單易懂的圖形是實(shí)現(xiàn)顏色信息可視化的最有效方法之一，移動(dòng)端界面設(shè)計(jì)中主要采用象征型和結(jié)構(gòu)式的圖形。

3.3.1 象征型圖形

象征型圖形是指為每種顏色設(shè)計(jì)一種具有象征寓意的圖像，可以根據(jù)顏色給人的心理特征進(jìn)行圖形設(shè)計(jì)。在色覺(jué)異常人群中，往往使用幾何圖形作為特殊的色彩符號(hào)，以傳達(dá)不同的顏色信息。但正因?yàn)閹缀涡螤钍浅橄蟮暮秃?jiǎn)化的，使紅綠色覺(jué)患者不易產(chǎn)生聯(lián)想，從而無(wú)法快速獲取信息。因此，作者認(rèn)為具有色彩象征型的圖形更適合作為界面配色的輔助設(shè)計(jì)。

3.3.2 結(jié)構(gòu)式圖像

結(jié)構(gòu)式圖形可以用于區(qū)分兩種或兩種以上的色相。每個(gè)色相都會(huì)設(shè)計(jì)相應(yīng)的圖案，色彩與圖案的結(jié)合就形成了不同的色彩信息符號(hào)。通過(guò)一系列色彩圖像的結(jié)合，就可以得到一套較為完整的色彩圖像體系。

這種圖案組合的設(shè)計(jì)，一方面反映了色彩的一般規(guī)律，便于色覺(jué)異常群體識(shí)別復(fù)雜的色彩信息。另一方面，將兩種色彩圖像結(jié)合起來(lái)，構(gòu)成的第三個(gè)色彩圖像也能合并，從而使整體的顏色圖像更加系統(tǒng)化。

與象征型圖形設(shè)計(jì)不同，結(jié)構(gòu)式圖形借用了色彩的混合原理，體現(xiàn)了顏色與圖像相結(jié)合的規(guī)律。它具有比較完善的色彩體系，可以應(yīng)用于復(fù)雜場(chǎng)景的色彩設(shè)計(jì)，這也是“ColorADD”系列色彩圖形符號(hào)被國(guó)際公認(rèn)的原因之一。然而，這一體系也有一定局限性，結(jié)構(gòu)式圖形必須依靠基本色彩的圖形設(shè)計(jì)進(jìn)行擴(kuò)展。如果沒(méi)有記住基本色彩圖形，就會(huì)影響其他色彩圖形的認(rèn)知。這對(duì)使用者的色彩聯(lián)想與記憶效率不高，并且一定程度上制約了結(jié)構(gòu)式圖形系統(tǒng)的推廣。因此，在對(duì)彩色圖形進(jìn)行可視化時(shí)，建議選用結(jié)構(gòu)式圖形與象征型的色彩圖形相結(jié)合的方式，并且在設(shè)計(jì)基本色的結(jié)構(gòu)型圖像時(shí)，要充分考慮色彩與圖形之間的聯(lián)系，提高色覺(jué)異常群體的聯(lián)想記憶和高效運(yùn)用能力。

4 結(jié)語(yǔ)

未來(lái)的界面設(shè)計(jì)將更加人性化和多樣化，以滿足更多特殊群體的需要。在這個(gè)過(guò)程中，設(shè)計(jì)師需要運(yùn)用人機(jī)交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)等設(shè)計(jì)學(xué)的專業(yè)知識(shí)，以確保設(shè)計(jì)的無(wú)障礙性和可用性。雖然目前關(guān)于色覺(jué)界面設(shè)計(jì)的相關(guān)文章很少，實(shí)際應(yīng)用中也鮮少看到針對(duì)色覺(jué)異常者友好的設(shè)計(jì)。但隨著社會(huì)對(duì)色覺(jué)異常群體的關(guān)注不斷提高，色覺(jué)障礙群體的視覺(jué)優(yōu)化設(shè)計(jì)必將得到提高和改善。作者只是初步探討了配色設(shè)計(jì)策略，文章還存在一些需要解決的問(wèn)題，比如細(xì)化黃藍(lán)色相的具體參數(shù)和色彩圖形設(shè)計(jì)等。作者將在后續(xù)研究中深入運(yùn)用色彩心理學(xué)、色彩學(xué)、視覺(jué)認(rèn)知學(xué)等學(xué)科知識(shí)來(lái)進(jìn)一步完善色彩界面配色策略。

期望未來(lái)會(huì)有更多有關(guān)無(wú)障礙移動(dòng)端界面配色的設(shè)計(jì)研究：在輔助色彩信息圖像的研究上，能夠建立一套國(guó)內(nèi)通用的無(wú)障礙色彩圖像信息圖形系統(tǒng)。這需要運(yùn)用人機(jī)工程學(xué)、視覺(jué)設(shè)計(jì)等學(xué)科知識(shí)，以實(shí)現(xiàn)色彩信息的有效傳達(dá)和無(wú)障礙使用。在色彩配色設(shè)計(jì)上，能夠建立更加系統(tǒng)和完整的無(wú)障礙色彩配色系統(tǒng)。這需要運(yùn)用色彩管理、色彩映射等設(shè)計(jì)工具和技術(shù)，以確保配色方案的有效性和可行性。設(shè)計(jì)師需要同時(shí)考慮色覺(jué)障礙人群的視覺(jué)特點(diǎn)和抽象出通用的無(wú)障礙圖像語(yǔ)言，以拓展界面配色的深度和廣度。在后續(xù)研究中，將探索更多元化的研究?jī)?nèi)容和設(shè)計(jì)形式，針對(duì)色覺(jué)障礙群體的色彩界面配色策略，運(yùn)用交互設(shè)計(jì)、用戶研究等設(shè)計(jì)方法來(lái)實(shí)現(xiàn)真正的無(wú)障礙設(shè)計(jì)。

5 參考文獻(xiàn)

[1] 俞自萍， 曹愈， 曹凱. 色盲檢查圖[M]. 北京： 人民衛(wèi)生出版社 ，2006：5-17.

[2] 陳佳玉. 針對(duì)色盲群體的色彩信息可視化設(shè)計(jì)研究 [D]. 上海 ： 東華大學(xué) ，2022.

[3] 俞璋凌 ， 汪阜艷 . 面向色障人群的網(wǎng)頁(yè)色彩設(shè)計(jì)研究 [C]. 武漢機(jī)械設(shè)計(jì)與傳動(dòng)學(xué)會(huì)第 20 屆學(xué)術(shù)年會(huì)論文集 ，2012：119-122.

[4] 齊攀， 陳俊杰. 一種輔助紅綠色盲患者辨色的光電檢測(cè)方法 [J].信息技術(shù) ，2016（11）：18-20+25.

[5] 范麗容 . 色彩無(wú)障礙服裝設(shè)計(jì)輔助體系的探究 [D]. 北京 ： 北京服裝學(xué)院 ，2021.

[6] 黨鳳良 . 談人的色覺(jué)與色盲 [J]. 生物學(xué)教學(xué) ，2007（12）：61-63.