UI設(shè)計配色方法及避坑指南

　　設(shè)計行業(yè)，無時無刻不在和色彩打交道。配色問題一直是設(shè)計圈恒久不變的熱門話題，網(wǎng)絡(luò)上關(guān)于配色的知識多如牛毛，看的時候都很懂，但是一旦自己獨立做項目時就又原形畢露。究竟應(yīng)該如何去理解配色呢?所謂的配色在整個環(huán)節(jié)中真的是放在第一位的嗎? 今天AAA教育郭老師就針對UI設(shè)計配色方法及避坑指南進行簡單的說明。
 

一、配色常見的誤區(qū)
 

　　很多人之所以怕配色，或者說配不好色的原因是自己一直深處誤區(qū)中而渾然不知，接下來希望大家不要對號入座。
 

　　誤區(qū)一：配色的過程在整體之前。也就是常說的先配色，后設(shè)計。
 

　　誤區(qū)二：只會配不會選。這是最常見的一種，只會在有基礎(chǔ)色或者主色的前提下配色，而不懂得選一個符合整體的基礎(chǔ)色遠比配色更重要。
 

　　誤區(qū)三：被理論所局限。配色的過程是偏感性的，理論雖然沒錯，但是它只是輔助提供一種方向的，而不是完全要依靠理論去配色。
 

　　接下來就繼續(xù)今天的主題：色，從哪里來?也就是基礎(chǔ)色應(yīng)該怎么選?
 

二、顏色來源 —— 主體

　　在設(shè)計中，主體也就是畫面中最重要的部分，它可以是產(chǎn)品、模特、抽象圖形等等，基礎(chǔ)色來源最常用的方式就是在主體身上提取，可以是主體中比重較大的顏色，這樣有利于主色與主體形成更強烈的呼應(yīng)關(guān)系，也可以是比重相比較小的顏色，這樣在形成呼應(yīng)關(guān)系的同時，拓展性更強，下面舉個例子：
 

　　不難發(fā)現(xiàn)，無論上面哪種主色的形式，配黃色字都很融合，且都增強了視覺沖擊力。其原因在于畫面整體顏色與主體都形成了呼應(yīng)關(guān)系，使得配色不會給用戶一種很突兀、毫無依據(jù)的感覺。而這種形式的選色在工作中也是用到最多的，比如：
 

　　其實，這種通過提取主體色作為配色參考的形式在接受程度上是很高的，通過搭配一些點綴色，整體上也不會給人一種很單調(diào)的視覺感受;利用主體選色的配色方式是將原本有可能茫無頭緒、感性的配色工作，轉(zhuǎn)化為一種可以有所依據(jù)、有所參考的配色技法，同時也能提升一定的工作效率。再舉個例子：
 

三、顏色來源 —— 風(fēng)格
 

　　不管是做海報還是頁面，在最初都要確定一個風(fēng)格路線，然后圍繞確定好的風(fēng)格選材、選色、搭配主體等。那么很多情況下，確定風(fēng)格也就等于間接性的確定了一個選色的區(qū)間，所以結(jié)合風(fēng)格特征選色也是一種很實用的方式，比如我們要做「狂暑季」風(fēng)格的專題頁，那么在用色方面就要避免大面積暖色調(diào)用色，而要著重使用冷色調(diào)的顏色，目的很簡單：大面積的暖色會給人一種熱鬧、狂熱、張揚、溫馨的感受，和暑季需要清爽、降溫的感覺不相匹配，所以我們會盡可能采用主色冷色調(diào)的用色形式，搭配一些輔助色、點綴色，比如：
 

四、顏色來源 —— 文案
 

　　做設(shè)計目的是服務(wù)于商業(yè)，很多時候我們都要圍繞文案、產(chǎn)品去制定風(fēng)格、主題，所以選色同樣可以參考文案，從文案中提取關(guān)鍵詞，依據(jù)關(guān)鍵詞同樣也可以提取相對應(yīng)的顏色，比如：
 

五、來源 —— 主體反色
 

　　前面說的大多都是通過顏色找整體的呼應(yīng)關(guān)系，這樣做的目的是讓畫面整體更和諧、整體性更強。而還有一種選色的形式，即以主體顏色的反色作為主色調(diào)，也可以理解為：主體比重較大顏色的對比色或間隔色作為主色。比如：
 

　　再說下點綴色，點綴色的作用很大程度上是豐富畫面整體色感的，它的用色比例只占畫面整體的5%~10%左右，點綴色的選色很多時候是畫面主色的反色，目的是讓畫面整體色感不顯得單調(diào)、缺少變化，同時也有豐富畫面的作用，但是要注意不要大面積的使用，起到點綴、打破的作用即可。
 

　　總結(jié)
 

　　總的來說，其實配圖的過程就是在配色，當(dāng)一個畫面的主體、風(fēng)格、文案確定時，我們就可以依據(jù)這些進行選整體色，只有主色確定時才有必要進行下面配色的工作，而不是把配色放在所有工作之前。今天主要說的就是選色的幾種常用方式，選色的過程其實也是在配色，配色合不合理要看整體效果，設(shè)計的整體感也是很重要的，凡事要做到有所依據(jù)。最后還是那句話，配色是感性的，理論是提供思路和方向的，兩者相互結(jié)合才能把配色做的更出彩。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。