今早打開 騰訊ISD的博客 ，看到一篇新的文章，《迷你屋視覺規(guī)范簡介》，趕緊看了來學習。不過給我抓到問題咯，臭魚不介意我在這說下吧：
這套規(guī)范中的，按鈕的前幾級、**級和文字中用于突出的第三種，紅底白字和白底紅字都不符合W3C的對比度規(guī)范。原本需要突出和強調(diào)的文字反而可能識別不易。
截圖中使用對比度檢查器，基于W3C的WCAG Guideline 1.4.4和1.4.2中有相應的規(guī)定，工具的下載和具體說明可見 油茶會的這篇。
這是一個很好用也很科學的工具，小兔把它放在Windows的快速啟動欄里，而且推薦給了同事們。當初剛開始的時候，我們有多年設(shè)計經(jīng)驗的視覺設(shè)計師不以為然，認為靠肉眼識別就能辨別對比度。不過后來給我抓到了幾回，靠經(jīng)驗和肉眼也會有漏網(wǎng)的時候啊。現(xiàn)在連我們的運營編輯都把這個要了去，為了保證自己做的推薦圖片夠醒目:D
注意文字顏色的對比度是件容易被忽略的事。據(jù)我所知騰訊對一些產(chǎn)品的視覺風格是做用戶研究的，其中也包括色彩的定位。和臭魚提到這個時候，他說自己也就是看著，覺得對比度還算清楚。在正常人在正常環(huán)境中可能還不覺得什么，但是如果在一些表現(xiàn)欠佳的顯示環(huán)境、或者是色盲色弱、視力欠佳的人看來，就顯吃力了。即使是正常人，面對對比度欠佳的文字長時間閱讀也會容易產(chǎn)生疲勞，而浮躁的色彩會令用戶對產(chǎn)品的情感無形中產(chǎn)生影響。
那么顏色的對比度就是可用性工程師該注意的事?小兔覺得這還主要是視覺設(shè)計師的責任。
在大學讀編排設(shè)計的時候，老師就要求我們完成前看看自己的設(shè)計在黑白環(huán)境中是什么樣子。那時不論我的老師還是我自己，都沒有什么關(guān)于可用性的認識，不曾想到過色盲色弱看到會如何，只是為了保證作品的表現(xiàn)力。但這卻是一個簡單有用的習慣，在這年頭Photoshop里去色看一下就好了。
回憶當初學到色彩構(gòu)成的時候，也被老師叮囑過注意黃色這類高明度色彩的使用。雖然近兩年已經(jīng)不做視覺設(shè)計，但是大學中所學和國際商業(yè)美術(shù)設(shè)計師認證，依然帶給我不少現(xiàn)在工作中受用的東西。即使不談可用性，這也是一個專業(yè)的視覺設(shè)計師應該注意的問題。
更后總結(jié)幾點建議：
視覺設(shè)計完成后，在灰度顏色模式下審查一下效果
注意網(wǎng)頁上需要突出的、以及正文文字的對比度
可用性不是一個人或者一個崗位的事情，視覺設(shè)計、交互設(shè)計、可用性工程師、開發(fā)人員乃至PM都應該去留心和注意的
網(wǎng)頁設(shè)計中網(wǎng)頁顏色與網(wǎng)頁文字的搭配，歡迎合作。
