為新手量身打造的UI界面配色方法

 　　如何快速選擇或搭配顏色?今天@Micu設計 和大家介紹在界面中最為常用的三個方法，簡單實用，附上大量的優秀實例，特別適合剛入門的色彩新手，學起來!

　　快過年了，大家手頭上的事都很多，於是很多同學要設計活動頁面或者APP界面大改版等，那麼如何快速的選擇或搭配顏色呢?“選擇”和“搭配顏色”，聽到這兩個詞匯的時候，是不是從潛意識上就會有反感，心理琢磨著，這絕對是個坑!肯定得翻來覆去的折騰一把。其實很多初學設計師都會碰到同樣的問題。

　　那我們就橫刀直入的來說說這三招吧。

　　第一刀：色不過三

　　經常很多大神在網上說配色不要超過三種色，在這我只說三遍，色不過三，色不過三，色不過三!不管是做平面也好，還是網頁，還是做APP等設計，都需要遵守這個基本的道理。

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

　　在這裡很多人都會認為就是不要超過三種不同的顏色值。其實不然，不超過三種顏色的搭配，是指不超過三種色相的搭配。在單個色相中可以運用顏色明度或飽和度做色彩的豐富性，而色相不要過三!

　　如果設計的界面的顏色太多，炫酷的眼花缭亂是個什麼樣的效果?下面我們來看看一家知名的招聘網站。

　　我想你和我一樣頓時淚流滿面了~

　　是的，我們單純的就想找份合適的工作，過上幸福美好的生活。並沒有那麼簡單，一進入主頁面，剎那間，狗皮膏藥鋪面而來。這種感覺，我的小心髒頓時崩潰了……就一小小塊面積，一個城市地址就出現了三種顏色。難道這樣真的好嗎?

　　我們來做一個對比。有一種設計，叫別人家的設計。綠色永遠是品牌色，紅色就是網站的裝點色，這就叫傳承。

　　統一的主色彩風格的導向，能加強用戶對產品的記憶程度，也然產品的體驗感更加舒適和自然。

　　那是不是越簡潔的顏色就最好?

　　那咱就只用一種顏色得了。下圖中單一顏色和多種色相顏色配色下的對比，我們可以看到在單一顏色下的設計更為統一，畫面更為和諧。在多種顏色下界面中的功能模塊更為明確，區分性更強，所以說在使用多種顏色的時候還需要考慮產品的內容與核心。

　　三色搭配，只要控制在不超過三種色相的范圍即可。學過畫畫的商業設計師，應該都清楚知道顏色的明度、暗度、飽和度。

　　運用單色的設計，會顯得單調乏味。而整體顏色飽和度過低會導致畫面沉悶而不透氣。明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。

　　做精致的顏色，提煉格調

　　在界面設計中，色彩是設計中的重中之重，是否正確和完整的表現出產品氣質至關重要。單一的色相，豐富的明度和飽和度能使界面看的有層次感和豐富性。而精簡的色，處理器來也會跟容易統一和把控。在用色時，顏色越少越好，但要保證正確的傳達出需要表現的功能和元素為前提。在我們每添加一種顏色的時候都需要好好的考慮一下，有沒有必要。因為再復雜的設計，也不會多個三種主色彩。

　　以下界面為了區分更多的內容區域運用了三種顏色，但因為顏色過度導致頁面分割凌亂，紅色在頁面中就是多余的，功能分割相對也是多余的。可以用兩種顏色時候，就不要用到三種顏色。可以用一種顏色的時候就不要用三種顏色。簡潔，會使作品更為成熟。

　　在桌面圖標設計中，常常也會用到兩色和三色的搭配形式。這樣的配色能使圖標顯得簡約而不乏味。

　　第二刀：確定主色

　　在運用色彩進行設計的時候，心裡要有數。色彩的主次關系能定作品的性。優秀的作品色彩就是那麼的清晰，

　　記住色彩功能的劃分：主要色、輔助色、裝點色。

　　主色的魅力

　　主色決定設計的風格。

　　在設計中色彩充當了重要的情感元素，那主色就是作品的文化方向。我們在設計初期需要對項目有明確的了解後提煉選擇出最為貼切的主色進行定位。

　　每種顏色承載的文化都是不同的，會領導了整個界面設計的方向。

　　網頁設計、移動界面設計、banner設計、平面設計……不同的媒介，主色的運用規律各不相同。網頁設計和界面設計，通常主色運用在結構和裝飾。而Banner和海報為了更為醒目，主色通常運用在背景顏色上。

　　在界面設計中常將品牌LOGO的顏色定為主色彩，並且在不同的界面中主色彩出現的面積也會隨之變化。

　　下圖我們可以看到大眾點評、百度外賣、美團應用都將產品LOGO的顏色進行了延續，將logo顏色定義為主色彩，有效的統一了產品的傳播性。

　　同時還發現，這幾個產品的界面設計主色面積使用也是非常一致。首頁中使用的主色彩面積較大，導航條全部填充了主色。在二級頁面中則使用的面積較少，將主色點綴到界面中。

　　我們可以這樣去理解，在用戶使用產品時，更希望用戶記憶產品。而在用戶進入了信息頁面時則更注重易用性，希望用戶能找到自己需要的東西。所以主色在首頁使用的面積較多，而二級頁面使用在關鍵的操作點上。從產品角度出發，我們在使用主色的時候要考慮頁面的內容關系，理解界面的層次與功能性質。從視覺出發，選擇了飽和度較高的色彩做為主色時，要考慮因為顏色面積過多而造成的視覺疲勞。

　　在banner和海報的設計中主色的面積一般會運用在背景色中，相對面積較大。可謂是直奔主題式。

　　第三刀：從對比色中找輔助色

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

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

　　主要的三對互補色：紅綠、藍橙、黃紫

　　我們可以看到很多APP的icon為了吸引用戶的注意就用到了強烈對比的互補色

　　番茄快點、QQ空間、相機360

　　色彩中還會運用到冷暖對比

　　冷暖對比色是自然平衡的規律，可以在設計中大量使用，這樣的配色會使作品非常的出彩，不顯單調。

　　我們先看看一下幾款APP的icon設計：

　　下面這款APP的名稱叫KOI，很喜歡這款應用配色，運用到了冷暖配色，起了非常好的點綴效果，看起來靈動而醒目。

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

　　Seedling Comic Studio，這款icon運用到了冷暖搭配顯得由為的精彩，視線裡面集中到了中心點上。

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

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

　　冷暖色彩搭配的方法基本沒有啥缺點，使用在設計中，技巧性比較多，對設計的細膩感受要求比較高。

　　雖然支付寶的主圖標發生了改變，變成了簡潔的藍色支付寶，但主頁面中還是利用到了冷色與暖色的搭配，很好的區分了分類，並且讓頁面中豐富的分類變得不是那麼得零散。很多設計師每次碰到滿版分類圖標的時候很頭大，處理的時候容易把頁面搞花了，建議使用冷暖的方式去調整，將頁面平衡好。

　　當時米醋哥在設計360防丟器的時候就用了兩個色，紅色和藍色的冷暖搭配。將360字體樣式融入到建築中取用了暖紅色，而尋找位置的大頭針運用了冷藍色。

　　好了，先寫到這裡。回顧一下今天我們講的知識點。

　　色不過三

　　主色的定義，及面積

　　找輔助色，還記的有那幾對輔助色嗎?

　　今天和大家分享的這不僅是運用在界面中，更是選擇顏色時至為重要的三個點!實用性極高!看似簡單，大家運用起來還要多加分析哦~