如何快速選擇或搭配顏色？今天@Micu設(shè)計(jì) 和大家介紹在界面中最為常用的三個(gè)方法，簡(jiǎn)單實(shí)用，附上大量的優(yōu)秀實(shí)例，特別適合剛?cè)腴T的色彩新手，學(xué)起來(lái)！

快過年了，大家手頭上的事都很多，于是很多同學(xué)要設(shè)計(jì)活動(dòng)頁(yè)面或者APP界面大改版等，那么如何快速的選擇或搭配顏色呢？“選擇”和“搭配顏色”，聽到這兩個(gè)詞匯的時(shí)候，是不是從潛意識(shí)上就會(huì)有反感，心理琢磨著，這絕對(duì)是個(gè)坑！肯定得翻來(lái)覆去的折騰一把。其實(shí)很多初學(xué)設(shè)計(jì)師都會(huì)碰到同樣的問題。

那我們就橫刀直入的來(lái)說(shuō)說(shuō)這三招吧。

第一刀：色不過三

經(jīng)常很多大神在網(wǎng)上說(shuō)配色不要超過三種色，在這我只說(shuō)三遍，色不過三，色不過三，色不過三！不管是做平面也好，還是網(wǎng)頁(yè)，還是做APP等設(shè)計(jì)，都需要遵守這個(gè)基本的道理。

那啥才算是不超過三種顏色的搭配呢？

在這里很多人都會(huì)認(rèn)為就是不要超過三種不同的顏色值。其實(shí)不然，不超過三種顏色的搭配，是指不超過三種色相的搭配。在單個(gè)色相中可以運(yùn)用顏色明度或飽和度做色彩的豐富性，而色相不要過三！

如果設(shè)計(jì)的界面的顏色太多，炫酷的眼花繚亂是個(gè)什么樣的效果？下面我們來(lái)看看一家知名的招聘網(wǎng)站。

我想你和我一樣頓時(shí)淚流滿面了~

是的，我們單純的就想找份合適的工作，過上幸福美好的生活。并沒有那么簡(jiǎn)單，一進(jìn)入主頁(yè)面，剎那間，狗皮膏藥鋪面而來(lái)。這種感覺，我的小心臟頓時(shí)崩潰了……就一小小塊面積，一個(gè)城市地址就出現(xiàn)了三種顏色。難道這樣真的好嗎？

我們來(lái)做一個(gè)對(duì)比。有一種設(shè)計(jì)，叫別人家的設(shè)計(jì)。綠色永遠(yuǎn)是品牌色，紅色就是網(wǎng)站的裝點(diǎn)色，這就叫傳承。

統(tǒng)一的主色彩風(fēng)格的導(dǎo)向，能加強(qiáng)用戶對(duì)產(chǎn)品的記憶程度，也然產(chǎn)品的體驗(yàn)感更加舒適和自然。

那是不是越簡(jiǎn)潔的顏色就最好？

那咱就只用一種顏色得了。下圖中單一顏色和多種色相顏色配色下的對(duì)比，我們可以看到在單一顏色下的設(shè)計(jì)更為統(tǒng)一，畫面更為和諧。在多種顏色下界面中的功能模塊更為明確，區(qū)分性更強(qiáng)，所以說(shuō)在使用多種顏色的時(shí)候還需要考慮產(chǎn)品的內(nèi)容與核心。

三色搭配，只要控制在不超過三種色相的范圍即可。學(xué)過畫畫的商業(yè)設(shè)計(jì)師，應(yīng)該都清楚知道顏色的明度、暗度、飽和度。

運(yùn)用單色的設(shè)計(jì)，會(huì)顯得單調(diào)乏味。而整體顏色飽和度過低會(huì)導(dǎo)致畫面沉悶而不透氣。明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。

做精致的顏色，提煉格調(diào)

在界面設(shè)計(jì)中，色彩是設(shè)計(jì)中的重中之重，是否正確和完整的表現(xiàn)出產(chǎn)品氣質(zhì)至關(guān)重要。單一的色相，豐富的明度和飽和度能使界面看的有層次感和豐富性。而精簡(jiǎn)的色，處理器來(lái)也會(huì)跟容易統(tǒng)一和把控。在用色時(shí)，顏色越少越好，但要保證正確的傳達(dá)出需要表現(xiàn)的功能和元素為前提。在我們每添加一種顏色的時(shí)候都需要好好的考慮一下，有沒有必要。因?yàn)樵購(gòu)?fù)雜的設(shè)計(jì)，也不會(huì)多個(gè)三種主色彩。

以下界面為了區(qū)分更多的內(nèi)容區(qū)域運(yùn)用了三種顏色，但因?yàn)轭伾^度導(dǎo)致頁(yè)面分割凌亂，紅色在頁(yè)面中就是多余的，功能分割相對(duì)也是多余的?？梢杂脙煞N顏色時(shí)候，就不要用到三種顏色?？梢杂靡环N顏色的時(shí)候就不要用三種顏色。簡(jiǎn)潔，會(huì)使作品更為成熟。

在桌面圖標(biāo)設(shè)計(jì)中，常常也會(huì)用到兩色和三色的搭配形式。這樣的配色能使圖標(biāo)顯得簡(jiǎn)約而不乏味。

第二刀：確定主色

在運(yùn)用色彩進(jìn)行設(shè)計(jì)的時(shí)候，心里要有數(shù)。色彩的主次關(guān)系能定作品的性。優(yōu)秀的作品色彩就是那么的清晰，

記住色彩功能的劃分：主要色、輔助色、裝點(diǎn)色。

主色的魅力

主色決定設(shè)計(jì)的風(fēng)格。

在設(shè)計(jì)中色彩充當(dāng)了重要的情感元素，那主色就是作品的文化方向。我們?cè)谠O(shè)計(jì)初期需要對(duì)項(xiàng)目有明確的了解后提煉選擇出最為貼切的主色進(jìn)行定位。

每種顏色承載的文化都是不同的，會(huì)領(lǐng)導(dǎo)了整個(gè)界面設(shè)計(jì)的方向。

網(wǎng)頁(yè)設(shè)計(jì)、移動(dòng)界面設(shè)計(jì)、banner設(shè)計(jì)、平面設(shè)計(jì)……不同的媒介，主色的運(yùn)用規(guī)律各不相同。網(wǎng)頁(yè)設(shè)計(jì)和界面設(shè)計(jì)，通常主色運(yùn)用在結(jié)構(gòu)和裝飾。而Banner和海報(bào)為了更為醒目，主色通常運(yùn)用在背景顏色上。

在界面設(shè)計(jì)中常將品牌LOGO的顏色定為主色彩，并且在不同的界面中主色彩出現(xiàn)的面積也會(huì)隨之變化。

下圖我們可以看到大眾點(diǎn)評(píng)、百度外賣、美團(tuán)應(yīng)用都將產(chǎn)品LOGO的顏色進(jìn)行了延續(xù)，將logo顏色定義為主色彩，有效的統(tǒng)一了產(chǎn)品的傳播性。

同時(shí)還發(fā)現(xiàn)，這幾個(gè)產(chǎn)品的界面設(shè)計(jì)主色面積使用也是非常一致。首頁(yè)中使用的主色彩面積較大，導(dǎo)航條全部填充了主色。在二級(jí)頁(yè)面中則使用的面積較少，將主色點(diǎn)綴到界面中。

我們可以這樣去理解，在用戶使用產(chǎn)品時(shí)，更希望用戶記憶產(chǎn)品。而在用戶進(jìn)入了信息頁(yè)面時(shí)則更注重易用性，希望用戶能找到自己需要的東西。所以主色在首頁(yè)使用的面積較多，而二級(jí)頁(yè)面使用在關(guān)鍵的操作點(diǎn)上。從產(chǎn)品角度出發(fā)，我們?cè)谑褂弥魃臅r(shí)候要考慮頁(yè)面的內(nèi)容關(guān)系，理解界面的層次與功能性質(zhì)。從視覺出發(fā)，選擇了飽和度較高的色彩做為主色時(shí)，要考慮因?yàn)轭伾娣e過多而造成的視覺疲勞。

在banner和海報(bào)的設(shè)計(jì)中主色的面積一般會(huì)運(yùn)用在背景色中，相對(duì)面積較大。可謂是直奔主題式。

第三刀：從對(duì)比色中找輔助色

通常大家覺得只要色彩面積最多就是主色。其實(shí)不然，人們的閱讀心理是有差異的，如果顏色飽和度較低容易被相對(duì)面積少的高飽和度顏色搶眼，所以在定義界面主色的時(shí)候要懸著飽和度（純度）高的顏色作為主色會(huì)比較的穩(wěn)定。

在界面設(shè)計(jì)匯總使用互補(bǔ)色彩的對(duì)比是最為強(qiáng)烈的。這種色彩能使用戶的視覺產(chǎn)生強(qiáng)烈的刺激，情感濃烈，給人留下鮮明的印象。這種方式是最易于傳播的。適合在夸張的、張揚(yáng)的場(chǎng)景下使用。但這種顏色用的太過于平凡容易造成用戶的視覺疲勞。給人一種不安定的感覺。那么在使用這樣的搭配方式時(shí)需要控制使用的位置和信息的面積了，核心的地方可以這樣去使用。

主要的三對(duì)互補(bǔ)色：紅綠、藍(lán)橙、黃紫

我們可以看到很多APP的icon為了吸引用戶的注意就用到了強(qiáng)烈對(duì)比的互補(bǔ)色

番茄快點(diǎn)、QQ空間、相機(jī)360

色彩中還會(huì)運(yùn)用到冷暖對(duì)比

冷暖對(duì)比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會(huì)使作品非常的出彩，不顯單調(diào)。

我們先看看一下幾款A(yù)PP的icon設(shè)計(jì)：

下面這款A(yù)PP的名稱叫KOI，很喜歡這款應(yīng)用配色，運(yùn)用到了冷暖配色，起了非常好的點(diǎn)綴效果，看起來(lái)靈動(dòng)而醒目。

Tweetbot的icon也用到了冷暖顏色的對(duì)比，是不是醒目又可愛啊，大家可以去試試這種搭配，百試百靈。

Seedling Comic Studio，這款icon運(yùn)用到了冷暖搭配顯得由為的精彩，視線里面集中到了中心點(diǎn)上。

在設(shè)計(jì)中，冷色與暖色的對(duì)比是界面設(shè)計(jì)中最為廣泛的使用方法，效果也非常的出眾。

色彩好比就是陰陽(yáng)太極，冷與暖的兩級(jí)平衡還原了生活中的和諧。用這樣的配色效果讓用戶感覺舒服平和。

冷暖色彩搭配的方法基本沒有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對(duì)設(shè)計(jì)的細(xì)膩感受要求比較高。

雖然支付寶的主圖標(biāo)發(fā)生了改變，變成了簡(jiǎn)潔的藍(lán)色支付寶，但主頁(yè)面中還是利用到了冷色與暖色的搭配，很好的區(qū)分了分類，并且讓頁(yè)面中豐富的分類變得不是那么得零散。很多設(shè)計(jì)師每次碰到滿版分類圖標(biāo)的時(shí)候很頭大，處理的時(shí)候容易把頁(yè)面搞花了，建議使用冷暖的方式去調(diào)整，將頁(yè)面平衡好。

當(dāng)時(shí)米醋哥在設(shè)計(jì)360防丟器的時(shí)候就用了兩個(gè)色，紅色和藍(lán)色的冷暖搭配。將360字體樣式融入到建筑中取用了暖紅色，而尋找位置的大頭針運(yùn)用了冷藍(lán)色。

好了，先寫到這里?；仡櫼幌陆裉煳覀冎v的知識(shí)點(diǎn)。

1. 色不過三
2. 主色的定義，及面積
3. 找輔助色，還記的有那幾對(duì)輔助色嗎？

今天和大家分享的這不僅是運(yùn)用在界面中，更是選擇顏色時(shí)至為重要的三個(gè)點(diǎn)！實(shí)用性極高！看似簡(jiǎn)單，大家運(yùn)用起來(lái)還要多加分析哦~

作者微信公眾號(hào)：MICU設(shè)計(jì)

文章來(lái)源：優(yōu)設(shè)

作者：@Micu設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明：學(xué)ui網(wǎng) ? 新手適用的UI界面配色方法

學(xué)UI就上學(xué)UI網(wǎng)！越努力，越幸運(yùn)！

“學(xué)UI網(wǎng)www. ”最值得關(guān)注的UI學(xué)習(xí)平臺(tái)！ 每天發(fā)布高質(zhì)量的設(shè)計(jì)教程和分享設(shè)計(jì)經(jīng)驗(yàn)，服務(wù)于20萬(wàn)UI設(shè)計(jì)師,幫助初學(xué)者快速轉(zhuǎn)型。每周六晚上免費(fèi)YY公開課（36013311），給大家提供更多免費(fèi)學(xué)習(xí)的機(jī)會(huì)。想成為設(shè)計(jì)師的你快來(lái)關(guān)注吧！

【特色推薦】

“APP截圖包是什么欄目？”  同一個(gè)APP，IOS和安卓截圖對(duì)比分析，并且提供5種以上尺寸的APP截圖打包下載，真貼心。

“國(guó)內(nèi)最棒的UI設(shè)計(jì)導(dǎo)航站”  專為UI設(shè)計(jì)學(xué)習(xí)者打造的資源＋學(xué)習(xí)，雙用途的網(wǎng)址導(dǎo)航站。親愛的，你收藏了嗎？

【學(xué)UI網(wǎng) 原創(chuàng)文章 投稿郵箱：tougao@，也可以找各個(gè)群的管理】

 給學(xué)UI網(wǎng)打氣，加油  猛點(diǎn)這里 >>