當(dāng)我們評價(jià)一款app時(shí)，配色應(yīng)該是僅次于其功能性的另一主要因素。現(xiàn)如今人機(jī)交互主要通過GUI來實(shí)現(xiàn)，色彩在交互過程中扮演著重要的角色。良好的色彩搭配會(huì)幫助用戶發(fā)現(xiàn)頁面中的重點(diǎn)，找到他們急于尋找的元素，更好的了解app的操作流程。每款app都會(huì)有一套其獨(dú)有的配色方案。建立一套app的配色方案是件很困難的事情，因?yàn)槔碚撋险f你有無數(shù)種的組合方式。App中的色彩應(yīng)用究竟有哪些重點(diǎn)呢？配色方案的建立又有著哪些套路呢？

色彩的數(shù)目

在app的界面中，盡量不要使用過多的顏色。誠然，過少的顏色搭配很難第一眼就能吸引住用戶。但是你的app畢竟不是一錘子買賣，把用戶吸引來就完事了。特別現(xiàn)在很多app都是偏工具類的，用戶會(huì)經(jīng)常使用app，那么頁面中過多的顏色會(huì)讓用戶抓不到重點(diǎn)，影響用戶體驗(yàn)。

多倫多大學(xué)曾經(jīng)做過一項(xiàng)調(diào)查，發(fā)現(xiàn)大部分用戶都傾向于一個(gè)app頁面中只有2—3款顏色。

配色原則

好吧，我們已經(jīng)知道了用戶只喜歡2到3款顏色。那么我們怎么才能正確的挑出那2到3款顏色呢？色輪可以幫助我們。

十二輻色輪對于我們建立一款app配色方案來說是一個(gè)重要的工具，特別是對于菜鳥級別設(shè)計(jì)師來說。

單色搭配（ Monochromatic ）

單色搭配就是單一色系的搭配，在顏色的深淺、明暗或飽和程度上有所調(diào)整來形成明暗的層次關(guān)系。

單色搭配在app UI設(shè)計(jì)中一直都是一個(gè)不錯(cuò)的選擇，特別是藍(lán)色系和綠色系。

類比色搭配（ Analogous ）

類比色搭配是指選用一款顏色作為主色調(diào)，色輪中臨近的顏色作為輔色。因?yàn)樵谏喼邢嗷タ康暮芫?，所以搭配起來不?huì)有很突兀的感覺。

這種配色方案看起來很容易操作，但是實(shí)際上主色與輔色的挑選卻是很傷腦筋的。主色和輔色在色輪中的距離如果過遠(yuǎn)，那么整個(gè)頁面就會(huì)顯得用力過猛。當(dāng)然挑選的好則另當(dāng)別論。

Clear是一款管理行程的app，在這里設(shè)計(jì)師通過從橘黃色到紅色的一個(gè)漸變來給用戶提供不同任務(wù)優(yōu)先級順序的視覺提示。

Clam是一款音樂播放軟件。該軟件專門播放一些讓人放松的音樂能讓你平靜，冥想、睡眠、放松、改善情緒！當(dāng)你失眠時(shí)靜靜Calm能幫你很快的進(jìn)入夢鄉(xiāng)。設(shè)計(jì)師主要采用了藍(lán)色和綠色來幫助用戶放松身心。

補(bǔ)色搭配（ Complement ）

在色輪上直線相對的兩種顏色稱為互補(bǔ)色。互補(bǔ)色因?yàn)榛ハ嗵幱趯Ψ降膶α⒚?，所以搭配起來?huì)形成強(qiáng)烈的對比效果，進(jìn)而吸引用戶的注意力。

比如，當(dāng)我們的眼睛看到一大塊綠色區(qū)域時(shí)，一小塊紅色就會(huì)顯得特別突出。

自定義配色方案（Custom Color Scheme）

創(chuàng)建一套新的配色方案并不是想象之中那么難的。最簡單的方法就是挑選一款明亮歡快的顏色(比如企業(yè)色)作為主色，然后挑選幾款中性色作為輔色。這樣一套配色方案就完成了，而且效果也相當(dāng)不錯(cuò)。

藍(lán)色、白色、深灰、淺灰和黑色就是Dropbox頁面里出現(xiàn)的所有顏色。就是這么簡單

配色神器——Adobe Color CC

Adobe Color CC是由Adobe公司開發(fā)的是一款動(dòng)態(tài)的配色識別工具，通過攝像頭的實(shí)時(shí)拍攝，它會(huì)自動(dòng)識別出當(dāng)前圖像中幾個(gè)主要的配色組合。如果不想讓應(yīng)用隨機(jī)挑選，便可以點(diǎn)擊屏幕鎖定，然后手動(dòng)調(diào)節(jié)。

你也可以自己創(chuàng)建新的配色組合保存到library中。此外Adobe Color CC還提供了很多現(xiàn)成的配色方案。

對比度的應(yīng)用

通常，頁面的元素都不是單獨(dú)出現(xiàn)的。比如你不可能看到一個(gè)頁面中只有一個(gè)按鈕，沒有任何文字，圖標(biāo)。頁面面中的任何一個(gè)元素都是整個(gè)系統(tǒng)的一個(gè)部分，不同的元素共同構(gòu)成了一個(gè)頁面。頁面中的元素有優(yōu)先級之分，有的元素更加重要，我們希望用戶看到或者誘導(dǎo)用戶進(jìn)行操作。我們可以通過形狀，顏色來產(chǎn)生視覺上的一個(gè)對比。我們這里主要討論顏色使用帶來的對比。

設(shè)計(jì)師更傾向于采用低對比度的配色方案。因?yàn)楦邔Ρ榷鹊呐渖赡芤驗(yàn)檫^于顯眼而破壞整個(gè)頁面的風(fēng)格。低對比度意味著低風(fēng)險(xiǎn)，低對比度配色會(huì)使頁面更加的好看與和諧。但是好看與和諧并不意味著高可讀性。最典型的例子就是當(dāng)文本和背景色對比度較低的時(shí)候，文本就會(huì)很難閱讀。

特別是在手機(jī)端，用戶會(huì)經(jīng)常處于戶外或者光線較為充足的地方，這時(shí)用戶會(huì)因?yàn)殪殴飧究床坏狡聊粌?nèi)容。

為了確保界面對比度處于一個(gè)合理的范圍內(nèi)，我們引入一個(gè)新的概念—對比率(Contrast ratios)。對比率指的是一幅圖像中明暗區(qū)域最亮的白和最暗的黑之間不同亮度層級的測量，差異范圍越大代表對比越大，差異范圍越小代表對比越小。

一般來說較大文本(14pt 粗體／18pt 正常 以上)與背景的對比率最少要達(dá)到4.5:1。較小文本與背景的對比率要達(dá)到3:1以上。

至于對比率的計(jì)算，我有一個(gè)非常簡單的方法。只要進(jìn)入 WebAIM’s Color Contrast Checker，輸入色值就可以計(jì)算對比率。

不只是文本，圖標(biāo)和其他一些重要的元素在配色的時(shí)候同樣可以采用上面的對比率作為參考。

視力障礙用戶群體

當(dāng)你在設(shè)計(jì)一款app的時(shí)候，你有沒有考慮到視力障礙的用戶群體呢？

當(dāng)我們談到色盲的時(shí)候，通常會(huì)想到紅綠色盲。其實(shí)色盲是指不能分辨自然光譜中的各種顏色或者某種顏色，紅綠色盲是最常見的一種。據(jù)統(tǒng)計(jì)，全世界范圍內(nèi)，8%的男性和0.5%的女性都患有不同程度的色盲。

因?yàn)樯︻伾母兄哂胁淮_定性，有紅綠色盲，藍(lán)黃色盲更有單色色盲。這意味在設(shè)計(jì)中，我們無法完全規(guī)避色盲用戶。所以為了更多的考慮色盲用戶群體，我們在設(shè)計(jì)中應(yīng)該降低顏色的依賴。我們可以使用圖案，文字，形狀這些元素來構(gòu)建頁面。

Photoshop可以通過模擬色盲來幫助設(shè)計(jì)師看到在色盲用戶的眼中你的界面是什么樣子的。

總結(jié)

提升自己色彩的使用技巧是一個(gè)需要不斷努力和積累的過程。你需要了解基礎(chǔ)的色彩理論，更需要大量的實(shí)踐，創(chuàng)新與用戶測試。