眼前的紅不是紅，你說(shuō)的綠是什么綠……

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

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

色盲是什么

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

通過(guò)設(shè)計(jì)實(shí)現(xiàn)色彩無(wú)障礙化

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

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

1.顏色+符號(hào)

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

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

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

2.極簡(jiǎn)主義

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

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

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

活用形狀或文字，而不是僅憑各種各樣的顏色來(lái)突出重點(diǎn)。

對(duì)于色弱或色盲的用戶來(lái)說(shuō)，他們很難通過(guò)顏色來(lái)分辨圖示，因此，考慮使用多樣化的模式會(huì)更好。

下面是一個(gè)絕佳范例。

4.使用反差大的色彩

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

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

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

5.避免糟糕的色彩搭配

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

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

這里有一些需要盡量避免的組合方案，因?yàn)樗麄儗?duì)色盲用戶來(lái)說(shuō)都是噩夢(mèng)：

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

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

如何檢驗(yàn)自己是否是色盲或色弱？

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

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

總結(jié)

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

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

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

1.石原色盲測(cè)驗(yàn)：38項(xiàng)基礎(chǔ)測(cè)試之后你會(huì)得到反饋。

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

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

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

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

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

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

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

翻譯 | 朱婷 、花花

校對(duì) | 心悅

文章推薦 | 王子娟

微信公眾號(hào) | 特贊Tezign

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