2018-11-14 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
設(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é)中真的是放在第一位的嗎?本期內(nèi)容通過(guò)不同層面分析配色中最易被忽略的,即:色,從哪里來(lái)的問(wèn)題,同時(shí)也是最重要的一步。很多人之所以怕配色,或者說(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)該怎么選?
在設(shè)計(jì)中,主體也就是畫(huà)面中最重要的部分,它可以是產(chǎn)品、模特、抽象圖形等等,基礎(chǔ)色來(lái)源最常用的方式就是在主體身上提取,可以是主體中比重較大的顏色,這樣有利于主色與主體形成更強(qiáng)烈的呼應(yīng)關(guān)系,也可以是比重相比較小的顏色,這樣在形成呼應(yīng)關(guān)系的同時(shí),拓展性更強(qiáng),下面舉個(gè)例子:
假如我們?cè)谶@個(gè)人物的基礎(chǔ)上去選背景的基礎(chǔ)色,我們就可以用到這里說(shuō)到的理論:基礎(chǔ)色來(lái)源于主體,那么我們可以有哪幾種選色的形式呢?下面我們繼續(xù)看:
配色形式一:將主體整體比例最大的顏色作為主色,整體在色彩上與主體形成很強(qiáng)烈的呼應(yīng)關(guān)系,這樣做的目的在于整體很和諧、舒服,易于接受,畫(huà)面更統(tǒng)一,整體視覺(jué)沖擊力偏柔軟一些。下面看另外一種形式:
配色形式二:將主體整體比例較小的顏色作為主色,同樣整體在色彩上也與主體形成了一定的呼應(yīng)關(guān)系,而正是因?yàn)橹魃侵黧w比重較小的顏色,這也使得畫(huà)面整體在于主體形成呼應(yīng)關(guān)系的前提下,也拉開(kāi)了主體與背景的層次,整體視覺(jué)沖擊力增強(qiáng),畫(huà)面統(tǒng)一性減弱,整體性并沒(méi)有因?yàn)橹魃母淖兌档?。下面嘗試將文字的顏色也稍加改動(dòng):
不難發(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è)例子:
三款牙刷,三種不同的主色方案,但是每一個(gè)給人的感覺(jué)都很舒服、和諧,呼應(yī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)綴色,比如:
這些都是依據(jù)風(fēng)格最直觀的選色形式,這樣做的目的是將整體用色盡可能的貼合主題風(fēng)格,同時(shí)再結(jié)合主體選色的形式,將配色的過(guò)程盡可能做到有據(jù)可循。風(fēng)格選色的形式在日常工作中也是很實(shí)用的,比如:促銷(xiāo),我們會(huì)用紅色、藍(lán)紫色、黃色的用色形式;春節(jié),則是以紅、黃為主;七夕,多以紫色、紅色為主;暑期購(gòu),多以藍(lán)色、青色、綠色為主。比如:
這些海報(bào)的配色形式很大程度上是依據(jù)風(fēng)格來(lái)決定的,這樣的選色方式也不會(huì)顯得很突兀,且擴(kuò)展性相對(duì)更高。
做設(shè)計(jì)目的是服務(wù)于商業(yè),很多時(shí)候我們都要圍繞文案、產(chǎn)品去制定風(fēng)格、主題,所以選色同樣可以參考文案,從文案中提取關(guān)鍵詞,依據(jù)關(guān)鍵詞同樣也可以提取相對(duì)應(yīng)的顏色,比如:
文案在一個(gè)畫(huà)面中的重要性也是很高的,因?yàn)橛脩?hù)在不看文案的前提下理解設(shè)計(jì)畫(huà)面速度是相對(duì)緩慢的,所以文案結(jié)合畫(huà)面的方式能夠大大的提升用戶(hù)對(duì)整體的理解速度,也就是捕捉信息的速度,將文案與畫(huà)面很好的結(jié)合在一起也是設(shè)計(jì)師所必備的技能,這樣做的目的在于讓文案與畫(huà)面形成視覺(jué)上的呼應(yīng),也更利于視覺(jué)信息的傳遞。
前面說(shuō)的大多都是通過(guò)顏色找整體的呼應(yīng)關(guān)系,這樣做的目的是讓畫(huà)面整體更和諧、整體性更強(qiáng)。而還有一種選色的形式,即以主體顏色的反色作為主色調(diào),也可以理解為:主體比重較大顏色的對(duì)比色或間隔色作為主色。比如:
將主色和主體色通過(guò)對(duì)比色或間隔色的關(guān)系拉開(kāi)對(duì)比,目的是讓主體在整個(gè)畫(huà)面中的視覺(jué)形象更加鮮明,視覺(jué)感受更加強(qiáng)烈,但是要注意的是:在選反色時(shí),盡量選用主體色中比重較大顏色的反色,這樣才能起到強(qiáng)烈對(duì)比的效果。
再說(shuō)下點(diǎn)綴色,點(diǎn)綴色的作用很大程度上是豐富畫(huà)面整體色感的,它的用色比例只占畫(huà)面整體的5%~10%左右,點(diǎn)綴色的選色很多時(shí)候是畫(huà)面主色的反色,目的是讓畫(huà)面整體色感不顯得單調(diào)、缺少變化,同時(shí)也有豐富畫(huà)面的作用,但是要注意不要大面積的使用,起到點(diǎn)綴、打破的作用即可。
總的來(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é)合才能把配色做的更出彩。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com