Facebook為什么會選擇藍(lán)色?
眼前的紅不是紅,你說的綠是什么綠……
世界上大概有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)記一些原則:
- 不要僅用色彩來傳遞信息
- 將色系控制在2至3個
- 使用文本和形狀來表達(dá)抽象信息
- 使用差異性大的顏色和陰影來突出可點擊的文本
- 避免使用例如紅配綠、綠配藍(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)載。
學(xué)習(xí)了~
? ? ?? ?? ?? ?? ?? ?? ?? ??
產(chǎn)品經(jīng)理這深沉的藍(lán)~~
so。。。人人都是產(chǎn)品經(jīng)理也用了藍(lán)色呢~