用這個(gè)設(shè)計(jì)方案，成功解決了為色盲設(shè)計(jì)的難題

編者按：色盲是一個(gè)龐大的群體，一向鼓勵(lì)「用設(shè)計(jì)解決問(wèn)題」的同學(xué)們，是時(shí)候?qū)W習(xí)這個(gè)專門為色盲人群打造的設(shè)計(jì)方案了，附上國(guó)內(nèi)某知名地圖的成功案例，強(qiáng)烈建議閱讀。

無(wú)障礙設(shè)計(jì)（barrierfreedesign）這個(gè)概念名稱始見于1974年，是聯(lián)合國(guó)組織提出的設(shè)計(jì)新主張。其理想目標(biāo)是“無(wú)障礙”。關(guān)注、重視殘疾人、老年人的特殊需求。人類是擁有視覺、聽覺、觸覺等諸多感知“通道”的整合體，其中，無(wú)障礙色彩設(shè)計(jì)是一個(gè)面向所有公眾的視覺設(shè)計(jì)系統(tǒng)，該系統(tǒng)的最終目標(biāo)為創(chuàng)建無(wú)障礙可視環(huán)境，使信息盡可能準(zhǔn)確地傳達(dá)給更多的公眾。在使用操作界面上清除那些讓使用者感到困惑、困難的“障礙”（barrier），為使用者提供最大可能的方便，這就是無(wú)障礙設(shè)計(jì)的基本思想。

本文便從視覺障礙人群的類別和色彩認(rèn)知特點(diǎn)進(jìn)行歸類分析，提出用無(wú)障礙色彩設(shè)計(jì)來(lái)創(chuàng)建視覺信息的無(wú)障礙環(huán)境。

顏色，在設(shè)計(jì)師日常設(shè)計(jì)工作中經(jīng)常用來(lái)區(qū)分信息圖形上的數(shù)據(jù)類別、層級(jí)關(guān)系和不同維度，是數(shù)據(jù)可視化中最常用的視覺變量之一。面對(duì)如此龐大的特殊受眾，作為負(fù)責(zé)產(chǎn)品直面用戶“第一張面孔”的設(shè)計(jì)師理應(yīng)關(guān)注他們的需求，無(wú)論是線上或是傳統(tǒng)線下設(shè)計(jì)皆是以向用戶傳遞正確有效的信息為目標(biāo)，更加不能忽視了視覺障礙群體。

一. 視覺障礙

視覺障礙主要有兩種類型：一類是視力低下造成的障礙，依據(jù)其視覺障礙程度分為全盲和弱視；另一類是色覺識(shí)別障礙，我們通常籠統(tǒng)的稱這類人群為“色盲(Color Blindness)”（也稱為道爾頓癥、色覺缺失、色覺辨認(rèn)障礙、色弱等）。

全球約2億人患有色盲，普遍程度甚至高于AB血型的人群，他們?cè)谧R(shí)別部分或者全部顏色時(shí)有困難。

本文謹(jǐn)以色盲人群為引，展開探索敘述。

色盲人群可以分為：紅色盲（P）、綠色盲（D）、藍(lán)色盲（T）和全色盲。其中紅色盲和綠色盲最為普遍，合稱為紅綠色盲。紅綠色盲人數(shù)占到了色盲總數(shù)的99%，我們需要真實(shí)地走進(jìn)他們眼中的世界：

有很多人認(rèn)為色盲看不到任何顏色。但這個(gè)認(rèn)知是誤導(dǎo)，超過(guò)99％的色盲人群都是可以看到顏色的。

正如你可以看到的，有兩種最常見類型的色盲人群（綠色盲和紅色盲），在他們看到顏色的方式上并沒有發(fā)生根本性的變化。從色譜上我們不難看出色盲人群對(duì)于色覺識(shí)別上的一些規(guī)律：

a. 紅綠色盲不能分辨紅、紫、青、綠各色，僅能識(shí)別整個(gè)光譜中的黃、藍(lán)兩色；

b. 藍(lán)色色盲不能分辨紫、青、綠、黃各色，僅能識(shí)別整個(gè)光譜中的藍(lán)、白、紅三色；

c. 色盲人群對(duì)色相的辨識(shí)能力較弱，但卻對(duì)明度、飽和度非常敏感；

d. 紅色在紅綠色盲眼中近似于深灰色，而藍(lán)色盲眼中的黃色近似于灰白色。

下表列出了紅綠色盲的一些最有問(wèn)題的顏色以及各種色盲的顏色辨別差異：

在此為推薦2個(gè)有效的模擬色盲色覺的工具，方便設(shè)計(jì)師們?cè)O(shè)計(jì)和檢驗(yàn)：

• Adobe自帶的校樣設(shè)置： Photoshop CS4和Illustrator CS4及以上版本提供了模擬紅色盲和綠色盲的校樣設(shè)置，選擇“視圖—校樣設(shè)置—紅色盲型/綠色盲型”，以此在日常設(shè)計(jì)工作中校驗(yàn)配色。
• 色盲/色弱模擬器無(wú)標(biāo)題 :Colblindor

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

色盲在日常生活中，大多數(shù)人認(rèn)為交通燈是一個(gè)最大的問(wèn)題，每個(gè)人都患有色覺缺陷，但他們是錯(cuò)誤的。交通燈的顏色是非常好的選擇，他們總是按一定的順序排列。所以這對(duì)于大多數(shù)彩色盲人來(lái)說(shuō)不是一個(gè)問(wèn)題，即使因?yàn)槟闶巧ぃ恍﹪?guó)家因此不允許你獲得駕駛執(zhí)照。

但是，在日常生活中，色盲人群還是存在有一些真正的障礙：

• 曬傷不能真正被看到，所見皮膚幾乎是在發(fā)光的。
• 不能通過(guò)顏色來(lái)辨別肉是否煮熟。
• 空白（綠色）和占用（紅色）的顏色沒有區(qū)別。
• 花和果子不能是有時(shí)容易發(fā)現(xiàn)。
• 不能知道水果或蔬菜是成熟還是不成熟。
• 到目前為止，彩色地圖和圖形有時(shí)可能很難理解和看懂。

對(duì)于色覺障礙的人士來(lái)說(shuō)，在生活中顏色雖然實(shí)實(shí)在在的存在一些障礙，可顏色依然是區(qū)分不同類數(shù)據(jù)的一種簡(jiǎn)單快速的表現(xiàn)形式。而我們?cè)O(shè)計(jì)師需要做的便是如何提高視覺信息的識(shí)別性和易讀性，我們可以遵循以下幾個(gè)思路尋找解決方案：

（1）避免僅以彩色形式傳達(dá)重要信息的情況，同時(shí)使用多種視覺變量表達(dá)信息；

（2）采用有效的視覺障礙模擬，選擇安全的配色方案，慎用無(wú)彩色系的搭配；

（3）采用明度與飽和度兼具的配色，尤其使用紅色時(shí)要小心；(對(duì)于非色盲的人，紅色是明亮和鮮艷的顏色。但對(duì)于色盲，它像藍(lán)色或深綠色一樣深。特別是對(duì)于紅色盲，暗紅色幾乎顯示為黑色。因此，避免在黑色背景上使用紅色字符。)

（4）不完全通過(guò)顏色來(lái)區(qū)分視覺信息，同時(shí)使用文字和圖標(biāo)來(lái)進(jìn)行注解。

下面為了方便大家理解，我們來(lái)舉例說(shuō)明這三點(diǎn)在實(shí)際設(shè)計(jì)當(dāng)中的運(yùn)用：

1.1 高德地圖 —— 色覺無(wú)障礙設(shè)計(jì)案例

紅綠色盲對(duì)于彩色地圖的視覺障礙引起了高德地圖的重視，高德地圖V7.7.8正式版中新增了色覺無(wú)障礙路設(shè)置用戶開啟該功能后路況便會(huì)采用色覺無(wú)障礙配色顯示，清晰明的向紅綠色盲人群標(biāo)示了實(shí)時(shí)路況。

高德地圖色覺無(wú)障礙配色完全參照了紅綠色盲人群的可視色譜來(lái)進(jìn)行選取制作的，建立了方便特殊人群理解與看懂的獨(dú)特“配色邏輯”。切換了色覺無(wú)障礙模式后，色覺無(wú)障礙地圖在紅綠色盲模擬視圖中顯示與原始視圖并無(wú)差別，完美適配紅綠色盲人群的閱讀使用需求。

當(dāng)同一界面需要出現(xiàn)多種顏色時(shí)，要使配色能覆蓋到各種色覺辨認(rèn)能力的人（包括色盲、色弱和色覺正常的人群）并不是一件容易的事，這讓設(shè)計(jì)師非常頭疼。針對(duì)色盲人士的較弱顏色識(shí)別能力，日本研究得出一組無(wú)障礙配色建議，與高德地圖的色覺無(wú)障礙地圖設(shè)計(jì)的配色有異曲同工之處。這組配色對(duì)色盲和非色盲人群都是易辨識(shí)的（例如它選擇了朱紅色代替紅色，藍(lán)綠色代替綠色，紫紅色代替紫色，有效減少了色盲人士的困擾），它對(duì)屏顯和印刷都適用，在此分享，供大家參考。

1.2 iChat —— 通過(guò)圖形來(lái)幫助色盲用戶

對(duì)于色盲人群應(yīng)該避免僅以彩色形式傳達(dá)重要信息的情況，不完全通過(guò)顏色來(lái)區(qū)分視覺信息，同時(shí)使用多種視覺變量表達(dá)信息（如形狀+顏色、尺寸+顏色、注釋+顏色），其中，形狀包括了這樣一些可使用的元素：圓形、三角形、矩形等；實(shí)線、虛線、點(diǎn)線等；字母、數(shù)字符號(hào)等。

在ichat的優(yōu)化界面設(shè)計(jì)中，遵循的原則便是：使用盡可能少的顏色 —— 結(jié)合使用不同形狀符號(hào)和少量鮮艷的顏色，效果遠(yuǎn)好于只使用一種形狀和多種顏色。因此優(yōu)化改進(jìn)的界面可以傳送足夠的信息，即使沒有顏色。例如，當(dāng)一個(gè)全色盲在瀏覽界面時(shí)，該界面也不會(huì)丟失任何信息。

1.3 色盲人群眼中的失敗案例

紅包是我們?nèi)粘Ｗ畛Ｒ姷臓I(yíng)銷手段，黃+紅也是最直接的配色，但在紅綠色盲的世界里，紅色近似于灰色和黃灰色，于是在設(shè)計(jì)此類頁(yè)面時(shí)應(yīng)該拉開配色明度與對(duì)比色，重要的文字信息更應(yīng)該避免出現(xiàn) 紅色+深灰色 的配色。

三. 最后結(jié)語(yǔ)

只有當(dāng)設(shè)計(jì)師了解視覺障礙的種類以及色礙人群的認(rèn)知障礙以后，才會(huì)知道怎樣的配色方案才能避免障礙的產(chǎn)生，怎樣的設(shè)計(jì)才能夠符合此類隱性用戶的需求。除卻對(duì)于界面配色的研究探索，我們甚至也可以為色盲人士提供單獨(dú)的色盲模式切換，這樣也可以兼顧視覺上的美觀，避免了太多信息的干擾。這種形式在游戲和軟件中也有先例，在APP設(shè)計(jì)中，高德地圖的色覺無(wú)障礙也屬于色盲模式切換的嘗新探索之舉。

作為UED工作者的我們應(yīng)該拓寬自己的眼界和胸懷，站在更包容跟高遠(yuǎn)的位置去思考看待我們的產(chǎn)品和設(shè)計(jì)，不僅僅是色覺障礙人群，我們應(yīng)該挖掘出更多隱藏在身邊的障礙用戶，并探索出更多有效途徑與方法來(lái)提高他們與現(xiàn)代網(wǎng)絡(luò)世界的交互效率和舒適度。

「如何為弱勢(shì)群體做設(shè)計(jì)」

1. 視力篇丨《如何為弱勢(shì)群體做包容性設(shè)計(jì)之視力篇》
2. 老年人丨《溫暖人心的情感化設(shè)計(jì)：那些寬衣解帶的事》

原文地址：ued.ctrip

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com