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

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

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

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

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

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

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

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

二、顏色來(lái)源 —— 主體

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

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

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

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

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

四、顏色來(lái)源 —— 文案
 

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

五、來(lái)源 —— 主體反色
 

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

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

　　總結(jié)
 

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