當(dāng)我們評價一款app時，配色應(yīng)該是僅次于其功能性的另一主要因素?，F(xiàn)如今人機交互主要通過GUI來實現(xiàn)，色彩在交互過程中扮演著重要的角色。良好的色彩搭配會幫助用戶發(fā)現(xiàn)頁面中的重點，找到他們急于尋找的元素，更好的了解app的操作流程。每款app都會有一套其獨有的配色方案。建立一套app的配色方案是件很困難的事情，因為理論上說你有無數(shù)種的組合方式。App中的色彩應(yīng)用究竟有哪些重點呢？配色方案的建立又有著哪些套路呢？
色彩的數(shù)目
在app的界面中，盡量不要使用過多的顏色。誠然，過少的顏色搭配很難第一眼就能吸引住用戶。但是你的app畢竟不是一錘子買賣，把用戶吸引來就完事了。特別現(xiàn)在很多app都是偏工具類的，用戶會經(jīng)常使用app，那么頁面中過多的顏色會讓用戶抓不到重點，影響用戶體驗。
多倫多大學(xué)曾經(jīng)做過一項調(diào)查，發(fā)現(xiàn)大部分用戶都傾向于一個app頁面中只有2—3款顏色。
配色原則
好吧，我們已經(jīng)知道了用戶只喜歡2到3款顏色。那么我們怎么才能正確的挑出那2到3款顏色呢？色輪可以幫助我們。
十二輻色輪對于我們建立一款app配色方案來說是一個重要的工具，特別是對于菜鳥級別設(shè)計師來說。
單色搭配（ Monochromatic ）
單色搭配就是單一色系的搭配，在顏色的深淺、明暗或飽和程度上有所調(diào)整來形成明暗的層次關(guān)系。
單色搭配在app UI設(shè)計中一直都是一個不錯的選擇，特別是藍色系和綠色系。
類比色搭配（ Analogous ）
類比色搭配是指選用一款顏色作為主色調(diào)，色輪中臨近的顏色作為輔色。因為在色輪中相互靠的很久，所以搭配起來不會有很突兀的感覺。
這種配色方案看起來很容易操作，但是實際上主色與輔色的挑選卻是很傷腦筋的。主色和輔色在色輪中的距離如果過遠，那么整個頁面就會顯得用力過猛。當(dāng)然挑選的好則另當(dāng)別論。
Clear是一款管理行程的app，在這里設(shè)計師通過從橘黃色到紅色的一個漸變來給用戶提供不同任務(wù)優(yōu)先級順序的視覺提示。
Clam是一款音樂播放軟件。該軟件專門播放一些讓人放松的音樂能讓你平靜，冥想、睡眠、放松、改善情緒！當(dāng)你失眠時靜靜Calm能幫你很快的進入夢鄉(xiāng)。設(shè)計師主要采用了藍色和綠色來幫助用戶放松身心。
補色搭配（ Complement ）
在色輪上直線相對的兩種顏色稱為互補色?；パa色因為互相處于對方的對立面，所以搭配起來會形成強烈的對比效果，進而吸引用戶的注意力。
比如，當(dāng)我們的眼睛看到一大塊綠色區(qū)域時，一小塊紅色就會顯得特別突出。
自定義配色方案（Custom Color Scheme）
創(chuàng)建一套新的配色方案并不是想象之中那么難的。最簡單的方法就是挑選一款明亮歡快的顏色(比如企業(yè)色)作為主色，然后挑選幾款中性色作為輔色。這樣一套配色方案就完成了，而且效果也相當(dāng)不錯。
藍色、白色、深灰、淺灰和黑色就是Dropbox頁面里出現(xiàn)的所有顏色。就是這么簡單
配色神器——Adobe Color CC
Adobe Color CC是由Adobe公司開發(fā)的是一款動態(tài)的配色識別工具，通過攝像頭的實時拍攝，它會自動識別出當(dāng)前圖像中幾個主要的配色組合。如果不想讓應(yīng)用隨機挑選，便可以點擊屏幕鎖定，然后手動調(diào)節(jié)。
你也可以自己創(chuàng)建新的配色組合保存到library中。此外Adobe Color CC還提供了很多現(xiàn)成的配色方案。
對比度的應(yīng)用
通常，頁面的元素都不是單獨出現(xiàn)的。比如你不可能看到一個頁面中只有一個按鈕，沒有任何文字，圖標(biāo)。頁面面中的任何一個元素都是整個系統(tǒng)的一個部分，不同的元素共同構(gòu)成了一個頁面。頁面中的元素有優(yōu)先級之分，有的元素更加重要，我們希望用戶看到或者誘導(dǎo)用戶進行操作。我們可以通過形狀，顏色來產(chǎn)生視覺上的一個對比。我們這里主要討論顏色使用帶來的對比。
設(shè)計師更傾向于采用低對比度的配色方案。因為高對比度的配色可能因為過于顯眼而破壞整個頁面的風(fēng)格。低對比度意味著低風(fēng)險，低對比度配色會使頁面更加的好看與和諧。但是好看與和諧并不意味著高可讀性。最典型的例子就是當(dāng)文本和背景色對比度較低的時候，文本就會很難閱讀。
特別是在手機端，用戶會經(jīng)常處于戶外或者光線較為充足的地方，這時用戶會因為炫光根本看不到屏幕內(nèi)容。
為了確保界面對比度處于一個合理的范圍內(nèi)，我們引入一個新的概念—對比率(Contrast ratios)。對比率指的是一幅圖像中明暗區(qū)域最亮的白和最暗的黑之間不同亮度層級的測量，差異范圍越大代表對比越大，差異范圍越小代表對比越小。
一般來說較大文本(14pt 粗體／18pt 正常 以上)與背景的對比率最少要達到4.5:1。較小文本與背景的對比率要達到3:1以上。
至于對比率的計算，我有一個非常簡單的方法。只要進入 WebAIM’s Color Contrast Checker，輸入色值就可以計算對比率。
不只是文本，圖標(biāo)和其他一些重要的元素在配色的時候同樣可以采用上面的對比率作為參考。
視力障礙用戶群體
當(dāng)你在設(shè)計一款app的時候，你有沒有考慮到視力障礙的用戶群體呢？
當(dāng)我們談到色盲的時候，通常會想到紅綠色盲。其實色盲是指不能分辨自然光譜中的各種顏色或者某種顏色，紅綠色盲是最常見的一種。據(jù)統(tǒng)計，全世界范圍內(nèi)，8%的男性和0.5%的女性都患有不同程度的色盲。
因為色盲對顏色的感知具有不確定性，有紅綠色盲，藍黃色盲更有單色色盲。這意味在設(shè)計中，我們無法完全規(guī)避色盲用戶。所以為了更多的考慮色盲用戶群體，我們在設(shè)計中應(yīng)該降低顏色的依賴。我們可以使用圖案，文字，形狀這些元素來構(gòu)建頁面。
Photoshop可以通過模擬色盲來幫助設(shè)計師看到在色盲用戶的眼中你的界面是什么樣子的。
總結(jié)
提升自己色彩的使用技巧是一個需要不斷努力和積累的過程。你需要了解基礎(chǔ)的色彩理論，更需要大量的實踐，創(chuàng)新與用戶測試。
