Facebook為什么會選擇藍(lán)色?

4 評論 3948 瀏覽 76 收藏 8 分鐘

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

世界上大概有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)有一些測試(詳見下文鏈接)和范例向我們展示了色盲患者眼中的世界;然而,想要百分之百還原他們所看到的卻是不太可能的。

2.webp

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

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

3.webp

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

1.顏色+符號

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

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

4.webp

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

2.極簡主義

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

5.webp

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

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

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

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

下面是一個絕佳范例。

6.webp

4.使用反差大的色彩

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

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

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

7.webp

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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 學(xué)習(xí)了~

    來自江蘇 回復(fù)
  2. ? ? ?? ?? ?? ?? ?? ?? ?? ??

    來自內(nèi)蒙古 回復(fù)
  3. 產(chǎn)品經(jīng)理這深沉的藍(lán)~~

    來自浙江 回復(fù)
  4. so。。。人人都是產(chǎn)品經(jīng)理也用了藍(lán)色呢~

    來自北京 回復(fù)