面向紅綠色障群體的移動端界面配色設計策略

陳曉鳳 徐佳瑤 李航 齊瑞文

摘 要：色彩是物體所能提供的最直觀的視覺感受，舒適的配色可以滿足人的感官需要，反差大的配色可以區別各種事物和信息，有效地突出界面的主題信息。在龐大的色覺異常人群中，移動端界面的配色不能提供最直觀的視覺體驗和色彩突出重點信息。文章根據紅綠障礙人群視覺特殊性進行分析與總結，并通過對國內外案例分析，總結出以黃藍配色為主色調的色彩搭配，并且輔助色彩與結構型符號相聯系的圖案，以達到適合普通人群和紅綠色覺異常者能共同使用的界面配色設計，實現媒體信息的清楚傳達，討論更具包容性的移動端界面配色設計。

關鍵詞：紅綠色障群體；界面色彩色設計；配色方法

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 前言

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

1 紅綠色盲的概述

根據德國物理學家赫姆霍茲的三色理論，人視網膜中的三種感光錐細胞（L、M、S）能夠感受光，從而使人類視覺能夠感知顏色的變化。S、M 和L 類錐狀細胞對單色光譜刺激的歸一化響應光譜如圖1 所示。三種錐狀細胞分別接收紅、綠、藍三種光線，其中L 視錐細胞對紅光最敏感，M 視錐細胞對綠光最敏感，而S 視錐細胞對藍光最敏感[4]。__

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

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

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

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

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

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

根據色盲的原理和分類，色覺異常者只是無法準確辨別某個色相，而非全部顏色。雖然在色相識別上有缺陷，但與普通人相比，他們更容易分辨相同顏色的不同明度和更高飽和度的顏色。然而，色彩飽和度較低的顏色難以分辨，如淺藍和淺紫。設計者應充分發揮他們的色彩明度和飽和度識別特性，更好地幫助他們辨別不同的色彩。

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

經過研究，國內學者根據地圖顯示的地理特征以及紅綠色覺障礙人群的光譜特性，提出了一系列適合于紅綠色覺異常者的地圖著色原則。高德地圖的移動端界面（見圖3）結合了這一系列配色原理，并在其V7.7.8 官方版中增加了針對色覺障礙者的視覺障礙模式的道路設定，以方便色覺異常者識別。

嗶哩嗶哩與中國信息通信研究院單位合作，成立“資訊無障礙技術及知識產權開放工作小組”，并加入色盲優化的配色設置。移動端視頻窗口右上角可找到“視覺優化”選項，改變視頻顏色獲得更舒適的界面（ 圖4）。選項名稱設計考慮人道關懷，給色盲用戶良好的心理感受。但在圖5 中，黑色背景上的紅色字體對紅綠色盲者難辨，建議用黃色字體替換，以便正常色覺者、第一型色盲者和第二型色覺者明顯區分，更人性化。

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

葡萄牙米尼奧大學教授Miguel Neiva 發明了“ColorADD”圖形記號，以幫助色覺障礙者識別不同顏色。該符號系統是一種通用、包容和無障礙的語言， 目前比較完善。ColorADD 設定了5 種基本色彩，與圖形符號相對應，紅、黃、藍三原色，白、黑則是為了調節色彩明度。在界面配色設計時，使用這種符號設計可以提高色覺異常用戶對圖像的記憶力，避免圖形難以區分的現象，同時也為紅綠色盲移動端界面的設計提供了有效的方法。圖7 中展示了ColorADD 符號的示例。

3 紅綠色盲移動端界面的設計策略

3.1 增強色相的對比差

在進行移動端界面配色設計時，需要考慮到紅綠色覺障礙人群的辨別能力和認知體驗，構建出一套符合色覺異常群體的色彩體系。這個體系可以考慮以上述高德地圖中我國自主研發的無障礙通用配色體系為基礎，采用藍色相和黃色相為主色調，在界面配色中衍生出多種輔助色相的創新搭配。

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

與色覺正常的人相比，紅綠色覺異常患者只能辨別藍、黃兩種色相，因此整體界面配色可以采用藍色相和黃色相為主。比如，Facebook 界面的主色調就是以藍色為主搭配白色輔助，整體界面配色清晰明確，可以更好、更快、更精確地向用戶傳遞色塊中的重要內容。

3.2 選擇明度與純度對比強烈的色彩

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

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

3.3 點線圖像輔助色彩使用

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

因此，在界面信息可視化設計中，還可以采用點線面圖形來輔助色彩使用。

當前手機終端界面設計常常使用色彩的差異來劃分區域模塊，但這往往給色覺異常的用戶帶來了顏色識別的困難。因此，建議同時運用色彩和圖案搭配，而不能單憑顏色區分重要信息。圖形輔助是最直觀的表現形式之一，但不同的人對圖形的理解會有不同的含義。因此，在傳達某些重要信息時，需要掌握物體的特性，使圖形信息能被正確解讀。將顏色信息轉換成簡單易懂的圖形是實現顏色信息可視化的最有效方法之一，移動端界面設計中主要采用象征型和結構式的圖形。

3.3.1 象征型圖形

象征型圖形是指為每種顏色設計一種具有象征寓意的圖像，可以根據顏色給人的心理特征進行圖形設計。在色覺異常人群中，往往使用幾何圖形作為特殊的色彩符號，以傳達不同的顏色信息。但正因為幾何形狀是抽象的和簡化的，使紅綠色覺患者不易產生聯想，從而無法快速獲取信息。因此，作者認為具有色彩象征型的圖形更適合作為界面配色的輔助設計。

3.3.2 結構式圖像

結構式圖形可以用于區分兩種或兩種以上的色相。每個色相都會設計相應的圖案，色彩與圖案的結合就形成了不同的色彩信息符號。通過一系列色彩圖像的結合，就可以得到一套較為完整的色彩圖像體系。

這種圖案組合的設計，一方面反映了色彩的一般規律，便于色覺異常群體識別復雜的色彩信息。另一方面，將兩種色彩圖像結合起來，構成的第三個色彩圖像也能合并，從而使整體的顏色圖像更加系統化。

與象征型圖形設計不同，結構式圖形借用了色彩的混合原理，體現了顏色與圖像相結合的規律。它具有比較完善的色彩體系，可以應用于復雜場景的色彩設計，這也是“ColorADD”系列色彩圖形符號被國際公認的原因之一。然而，這一體系也有一定局限性，結構式圖形必須依靠基本色彩的圖形設計進行擴展。如果沒有記住基本色彩圖形，就會影響其他色彩圖形的認知。這對使用者的色彩聯想與記憶效率不高，并且一定程度上制約了結構式圖形系統的推廣。因此，在對彩色圖形進行可視化時，建議選用結構式圖形與象征型的色彩圖形相結合的方式，并且在設計基本色的結構型圖像時，要充分考慮色彩與圖形之間的聯系，提高色覺異常群體的聯想記憶和高效運用能力。

4 結語

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

期望未來會有更多有關無障礙移動端界面配色的設計研究：在輔助色彩信息圖像的研究上，能夠建立一套國內通用的無障礙色彩圖像信息圖形系統。這需要運用人機工程學、視覺設計等學科知識，以實現色彩信息的有效傳達和無障礙使用。在色彩配色設計上，能夠建立更加系統和完整的無障礙色彩配色系統。這需要運用色彩管理、色彩映射等設計工具和技術，以確保配色方案的有效性和可行性。設計師需要同時考慮色覺障礙人群的視覺特點和抽象出通用的無障礙圖像語言，以拓展界面配色的深度和廣度。在后續研究中，將探索更多元化的研究內容和設計形式，針對色覺障礙群體的色彩界面配色策略，運用交互設計、用戶研究等設計方法來實現真正的無障礙設計。

5 參考文獻

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

[2] 陳佳玉. 針對色盲群體的色彩信息可視化設計研究 [D]. 上海 ： 東華大學 ，2022.

[3] 俞璋凌 ， 汪阜艷 . 面向色障人群的網頁色彩設計研究 [C]. 武漢機械設計與傳動學會第 20 屆學術年會論文集 ，2012：119-122.

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

[5] 范麗容 . 色彩無障礙服裝設計輔助體系的探究 [D]. 北京 ： 北京服裝學院 ，2021.

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