眼前的紅不是紅，你說的綠是什么綠……

世界上大概有8%到10%的男性以及0.5%的女性患有不同程度的色盲。這意味著，在你的網(wǎng)站的每100個訪客之中，可能就有至少10個人對于色彩的感知與你不同。那么，怎么做才能向所有的訪客保證視覺上的良好體驗，減小甚至消除色盲患者在色彩感知上的偏差呢？

一直以來，關(guān)于如何更好地針對色盲患者進(jìn)行無障礙化設(shè)計存在著很多相互沖突的觀點。在這里，我們將列出一些在優(yōu)化色盲用戶色彩體驗的設(shè)計中需要考慮到的重要事項。

色盲是什么

色盲是無法分辨自然色譜中的某些顏色的狀態(tài)，同時，由于它的致病因是位于X染色體上的基因突變，所以它的男性患者遠(yuǎn)多于女性患者。目前存在三種主要的色盲類型：綠色盲，紅色盲以及藍(lán)黃色盲。其中，又屬綠色盲最常見，紅色盲次之，而藍(lán)黃色盲較罕見。下面這張圖展示了不同類型色盲患者眼中彩虹的色彩。目前，已經(jīng)有一些測試（詳見下文鏈接）和范例向我們展示了色盲患者眼中的世界；然而，想要百分之百還原他們所看到的卻是不太可能的。

通過設(shè)計實現(xiàn)色彩無障礙化

你可能會想：我有必要為那么一小部分用戶考慮嗎？事實上，從長遠(yuǎn)來看，為色盲用戶做一些特殊的優(yōu)化設(shè)計會使得你的整體設(shè)計更為優(yōu)秀。所以，優(yōu)秀的網(wǎng)站應(yīng)該是無障礙的

無障礙化設(shè)計并不會妨害你的設(shè)計的整體美感。以下是當(dāng)你為色彩無障礙化進(jìn)行設(shè)計時需要關(guān)注的五個基本概念：

1.顏色+符號

不應(yīng)該只依賴于通過顏色來傳遞信息。

例如，某些色盲患者有可能根本無法注意到紅色的報錯信息。所以，大可以同時使用顏色和符號來吸引用戶的注意。例如，F(xiàn)acebook表單字段的紅色警示符號和說明文字。

有趣的事實是：Facebook的Logo以及它為人詬病的藍(lán)色主題實際上是拜創(chuàng)始人馬克?扎克伯格所賜——馬克是一名紅綠色盲患者，對他來說藍(lán)色是最容易分辨的顏色。他曾說過，“藍(lán)色是我生命中最豐富的顏色，我?guī)缀蹩梢钥匆娺@世上所有的藍(lán)色?！?/p>

2.極簡主義

在設(shè)計網(wǎng)站時避免應(yīng)用過多的顏色。

網(wǎng)站的色彩越簡單，對于色盲用戶來說越容易使用。極簡的設(shè)計不僅在當(dāng)下十分流行，同時也能讓你的設(shè)計在色彩方面無障礙化。

3.形狀／文字也可以形成反差效果

活用形狀或文字，而不是僅憑各種各樣的顏色來突出重點。

對于色弱或色盲的用戶來說，他們很難通過顏色來分辨圖示，因此，考慮使用多樣化的模式會更好。

下面是一個絕佳范例。

4.使用反差大的色彩

不應(yīng)僅僅依賴黑白兩色來表達(dá)抽象的內(nèi)容，可以挑選更多樣、明亮色彩融入你的設(shè)計。

例如，當(dāng)你在設(shè)計可點擊文本的應(yīng)用體驗時，便可以使用多樣化色彩來表現(xiàn)。

以上是一個將抽象概念設(shè)計得很好的示例，是綜合考慮色盲用戶的人性化設(shè)計。

5.避免糟糕的色彩搭配

色彩搭配是一件需要巧思的事情。

隨著色盲對人們生活的影響越來越復(fù)雜，我們越來越難以界定在網(wǎng)頁設(shè)計中哪些顏色的“安全”的。

這里有一些需要盡量避免的組合方案，因為他們對色盲用戶來說都是噩夢：

• 綠色&紅色
• 綠色&棕色
• 藍(lán)色&紫色
• 綠色&藍(lán)色
• 淺綠&黃色
• 藍(lán)色&灰色
• 綠色&灰色
• 綠色&黑色

使用視覺效果模擬器，可以幫助你為設(shè)計挑選精妙的顏色組合。

如何檢驗自己是否是色盲或色弱？

很多人在很長一段時間里都不知道自己患有色盲或色弱，甚至直到他人指出問題之前他們都沒有意識到色盲已經(jīng)影響到了他們的生活。

以下是一個常用的檢測色盲的圖像，你可以試試。（文章末尾能找到相關(guān)鏈接）

總結(jié)

UX設(shè)計師應(yīng)該盡量將頁面設(shè)計得人性化。

盡管這里沒有統(tǒng)一的解決方案，但UX設(shè)計師們?nèi)詰?yīng)謹(jǐn)記一些原則：

1. 不要僅用色彩來傳遞信息
2. 將色系控制在2至3個
3. 使用文本和形狀來表達(dá)抽象信息
4. 使用差異性大的顏色和陰影來突出可點擊的文本
5. 避免使用例如紅配綠、綠配藍(lán)或藍(lán)配灰這樣糟糕的色彩組合

1.石原色盲測驗：38項基礎(chǔ)測試之后你會得到反饋。

http://www.color-blindness.com/ishihara-38-plates-cvd-test/#prettyPhoto

2.色盲檢驗：一款由Colorblindor設(shè)計的安卓應(yīng)用，60秒內(nèi)你就能得到答案。

https://play.google.com/store/apps/details?id=ch.colblindor.colorblindcheck

3.Coblis-色盲測試裝置：你會看到不同色盲程度患者眼中同一張圖像的不同樣子。

http://www.color-blindness.com/coblis-color-blindness-simulator/

4.移動應(yīng)用：推薦3款主要幫助色盲患者的安卓和iOS應(yīng)用。

http://www.mobdevapp.com/iphone-and-android-app-developed-to-help-individuals-with-colorblindness/

翻譯 | 朱婷 、花花

校對 | 心悅

文章推薦 | 王子娟

微信公眾號 | 特贊Tezign

本文由 @ 特贊Tezign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。