《認(rèn)知與設(shè)計——理解UI設(shè)計準(zhǔn)則》(第二版)筆記四

Chapter Four 色覺是有限的

1. 色覺原理

視網(wǎng)膜上有對亮度敏感的視桿細胞和三種對不同頻率的光敏感的視錐細胞。(色盲患者的視錐細胞可能少于3種,一些女性的視錐細胞可能有四種--Eagleman,2012)

視桿細胞在光線很暗的環(huán)境中才起作用,大部分時間里,我們的視覺完全基于視椎細胞所提供的信息。

視椎細胞共有低頻、中頻和高頻三種類別。三者敏感的光譜范圍互相重疊,但三者的敏感度相差很大。

①低頻L:對整個可見光譜都敏感,但對出于頻譜中間的【黃色】和低頻的【紅色】最敏感。

②中頻M:對從高頻的【藍】到中頻偏低的【黃】和【橙】有反應(yīng),整體上敏感度低于低頻的視椎細胞。

③高頻H:對可見光的高頻部分【紫】【藍】最敏感。此類視椎細胞的整體敏感度低于前兩者,數(shù)量上也更少。因此,我們的眼睛對【紫】【藍】不如對其他顏色敏感。

a為視網(wǎng)膜三類視錐細胞對光的敏感度


2. 視覺系統(tǒng)對反差敏感 對亮度不敏感

視覺系統(tǒng)相比亮度差別對顏色差別更加敏感。(鮮明的邊緣>亮度水平)

中間的色塊看起來左邊顏色淺 右邊顏色深,但實際上都是一個顏色灰度

另一個例子,大腦研究者Edward H. Adelson做了一個很棒的圖解,A和B色塊其實是同一個顏色,但是視覺告訴我們A比B深很多。

削弱對比,可以明顯的看出A、B完全相同


3. 如何設(shè)計以提高顏色區(qū)分度

首先介紹一下三個影響顏色區(qū)分度的

內(nèi)部因素

A. 深淺度:越淺(不飽和)越難區(qū)分

B. 色塊的大?。涸叫』蛘咴郊殻诫y辨別它們的顏色

C. 分隔的距離:離得越遠越難區(qū)分

下面幾個例子,大家可以引以為戒:

用飽和度低的黃色小方格指示當(dāng)前任務(wù),而非當(dāng)前任務(wù)的小方格是白色
訪問過和未訪問的連接顏色差別細微

外部因素:

a.?彩色顯示屏的差異

b. 灰度顯示器

c. 顯示器角度

d. 環(huán)境光線


4.針對色盲和顏色感知障礙的用戶

設(shè)計界面時要注意,使用的顏色是否能夠被常見類型的色盲用戶區(qū)分開:色盲是由于一個或者多個色彩減影通道無法正常工作,以致不能區(qū)分某些顏色對。最常見的是紅綠色盲,他們難以區(qū)分深紅色和黑色、藍色和紫色淺綠色和白色、綠色和卡其色等顏色對。

??如果想檢驗設(shè)計效果,可以將設(shè)計圖轉(zhuǎn)換為灰度圖,來查看是否有難以區(qū)分的顏色。


5.使用色彩的準(zhǔn)則??

a. 確保飽和度、亮度以及色相能夠區(qū)分顏色

確保色彩之間有較高的反差,但不要使用強烈的對抗色。一個測試顏色差異的方法是在灰度模式下觀察差異是否可識別。

b. 使用獨特的顏色

根據(jù)色覺原理,最獨特的六種顏色分別是:黑、白、紅、綠、黃、藍

c. 避免使用色盲的人無法區(qū)分的顏色對

可搜索color-blindness filter 或 color-blindness simulator關(guān)鍵詞,利用在線色覺障礙模擬器查看效果。

d.?在顏色之外使用其他提示

不要完全依賴色彩,可利用一些對應(yīng)圖案(區(qū)域響應(yīng)、文字等等)區(qū)別他們

e. 將強烈的對抗色彩分開

由于高強度的顏色對比會讓人產(chǎn)生難受的閃爍視覺感應(yīng)

這種配色一定避免?。。。。?/div>


Remember me

注:總結(jié)都是根據(jù)個人理解整理記錄,若有疑問或異議,請參考原著~另外期待各位大大們的指正和討論!~(@^_^@)~

《認(rèn)知與設(shè)計——理解UI設(shè)計準(zhǔn)則》(第二版)筆記五

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容