一、顏色調(diào)性不對(duì)
色彩的調(diào)性會(huì)直接影響到整件設(shè)計(jì)作品的調(diào)性,調(diào)性對(duì)了才能傳遞出正確的情感和信息,而要想使你的配色在調(diào)性上不跑偏,首先你得了解不同的色彩和色彩組合分別具有怎樣的視覺感受;還要深刻理解、分析你的品牌、產(chǎn)品、設(shè)計(jì)主題應(yīng)該是什么樣的調(diào)性。這些都可以通過(guò)閱覽大量的作品、觀察身邊的事物總結(jié)出來(lái)。
下圖一個(gè)手工家居品牌的海報(bào),產(chǎn)品是一個(gè)草綠色的編織花盆,標(biāo)題是:大自然的色彩。根據(jù)上面這些信息,我們大概能判斷出該海報(bào)的配色應(yīng)該要有自然、簡(jiǎn)約、安靜、輕松的感覺。但下圖的顏色整體偏暗,而且中間的紅色圓形與背景色和產(chǎn)品對(duì)比太強(qiáng),所以視覺上并沒(méi)有自然、輕松的感覺。
在調(diào)整后的方案中我使用了產(chǎn)品的類比色組合,即綠色、青色、黃色,
而且把背景色的明度提高了,飽和度降低了。
注:拾色器面板中的HSB分別代表顏色的色相、飽和度、亮度值。
最終的顏色搭配效果更和諧、更符合產(chǎn)品和文案的調(diào)性。
二、顏色太灰
顏色太灰通常是因?yàn)轭伾娘柡投群土炼绕?,再加上顏色之間的對(duì)比不夠強(qiáng)所導(dǎo)致的。比如下圖是一本服裝畫冊(cè)的目錄設(shè)計(jì),版面中的色彩取自圖片中的粉紅色與綠色,設(shè)計(jì)師應(yīng)該想通過(guò)這組對(duì)比色表現(xiàn)出時(shí)尚的感覺,但是最終的配色效果有點(diǎn)太灰了。
對(duì)于這種問(wèn)題還是比較好解決的,我們只要選中目前的顏色然后打開拾色器面板,然后把顏色的S值(飽和度)或B值(亮度)提高一點(diǎn)就好,在調(diào)整數(shù)值時(shí)要觀察實(shí)際的顏色效果,直到得到最滿意的效果為止,如果飽和度或亮度過(guò)高,會(huì)導(dǎo)致顏色太重或太爆。
三、顏色太爆(刺眼)
與顏色太灰相反,還有很多設(shè)計(jì)師在配色時(shí)會(huì)出現(xiàn)太爆的情況,顏色太爆通常是因?yàn)轭伾娘柡投群土炼冗^(guò)高導(dǎo)致的,但并不是說(shuō)各顏色的飽和度和亮度值都很高,組合在一起就一定會(huì)很爆,還跟顏色的色相、顏色面積占比、顏色與圖片的組合效果、是否與產(chǎn)品調(diào)性相符等相關(guān)??傊O(shè)計(jì)作品在視覺上要比較舒適,而不是辣眼睛。
比如下圖是一張食品海報(bào),背景用了一個(gè)大紅色,突出價(jià)格的圓形色塊使用了一個(gè)熒光綠,這兩個(gè)顏色的飽和度值和亮度值都是100,雖然這兩個(gè)顏色都來(lái)自畫面中的食物圖片,但圖片中的顏色其飽和度和亮度值都沒(méi)這么高,所以這種色彩組合方式會(huì)讓人感覺背景比主體還要突出,產(chǎn)品與背景不夠融合。
另外,背景上的文字全部使用白色也會(huì)加強(qiáng)這種爆的感覺,似乎所有的顏色都在爭(zhēng)著跑到最前面來(lái),缺乏層次。
對(duì)于這種情況,我們則需要把它的飽和度適當(dāng)降低,比較穩(wěn)妥的做法是拾取圖片中的顏色。把圖片復(fù)制一層,然后選擇濾鏡-像素化-馬賽克,選擇一個(gè)合適的參數(shù),就能得到上圖的效果。把原圖中的紅色和綠色用圖片中的紅色和綠色替換,然后把標(biāo)題和副標(biāo)題的顏色改為暗紅色,這種“爆”的感覺就立馬消失了,如果背景使用一點(diǎn)點(diǎn)漸變效果,那么與圖片的融合性會(huì)更好。
四、顏色太花(太多)
顏色太花通常是因?yàn)轭伾唷⑶翌伾缍容^大,主次不明顯,比如下面這則促銷海報(bào),顏色有七種,除了黃色是背景色面積最大以外,其他顏色的面積都差不多。設(shè)計(jì)師之所以用這么多色彩是想讓不停的促銷信息能有清晰的區(qū)隔,但實(shí)際上這些信息通過(guò)排版以后已經(jīng)非常清晰了,所以沒(méi)必要再通過(guò)不同顏色來(lái)進(jìn)行區(qū)隔。
其實(shí),把這些不同套餐的色塊統(tǒng)一成一個(gè)顏色,個(gè)別關(guān)鍵字、詞用一個(gè)顏色突出就好。另外用黃色作為背景色太過(guò)傳統(tǒng),而且與中國(guó)移動(dòng)的調(diào)性不是很契合,所以改成了玫紅色的對(duì)比色-藍(lán)色,這也是中國(guó)移動(dòng)的品牌色。
最終,效果變得更時(shí)尚了,雖然總共的顏色只有三種,但是并不單調(diào),而且也不會(huì)顯得花和亂。
五、太舊
現(xiàn)在大部分的品牌都開始年輕化,而且營(yíng)銷傳播也都互聯(lián)網(wǎng)化,所以我們?cè)谧鲈O(shè)計(jì)的時(shí)候要盡量時(shí)尚一些,特別是那些主要針對(duì)年輕人的品牌或產(chǎn)品。
下面這則中國(guó)移動(dòng)促銷海報(bào)宣傳的內(nèi)容就是針對(duì)年輕人的4G套餐,但設(shè)計(jì)的調(diào)性并不時(shí)尚,主要是因?yàn)榕渖悬c(diǎn)舊。雖然是以紅藍(lán)這組對(duì)比色作為主色,但是背景色的明度很高、飽和度很低;并且里面用到了大量的單色漸變,這些配色的方式比較柔和,缺乏時(shí)尚感。
在優(yōu)化后的方案中,首先我把背景色的飽和度提高了一些,把之前的單色漸變改成了純色,并使用了近幾年比較流行的鐳射漸變和熒光色,顏色的對(duì)比和視覺沖擊力更強(qiáng),風(fēng)格更獨(dú)特,整體的調(diào)性也變得更加時(shí)尚。
六、顏色太碎
顏色太碎會(huì)有一種凌亂的感覺,造成這種問(wèn)題的原因是把一種或幾種比較跳躍的顏色,呈點(diǎn)狀且很分散(不連續(xù)、不集中)的分布在版面的各個(gè)部分,比如下圖的海報(bào),設(shè)計(jì)師想用粉色突出所有他認(rèn)為比較重要的詞、句或者元素,結(jié)果造成了顏色很碎的效果。
這種啥都想突出的配色方式除了在視覺上會(huì)讓畫面看起來(lái)很亂以外,也會(huì)使得版面沒(méi)有重點(diǎn),因?yàn)橹攸c(diǎn)太多了。
上圖的產(chǎn)品是一款進(jìn)口的兒童健康食品,設(shè)計(jì)調(diào)性應(yīng)該偏向中高端,所以用色應(yīng)該更加克制,這種很碎的色彩搭配方式就更不合適了。我們?cè)谑褂蒙释怀瞿承╆P(guān)鍵信息時(shí),盡量突出句子而不是某個(gè)字詞,或者通過(guò)色塊的方式突出整段文字(字?jǐn)?shù)不是特別多的情況下)。另外,如果僅僅是為了區(qū)隔信息,那么不同信息的顏色只要有比較小的差別就好了,不需要用對(duì)比非常強(qiáng)烈的顏色來(lái)做區(qū)隔,否則會(huì)破壞畫面的統(tǒng)一性。
七、太臟
顏色臟主要是因?yàn)轭伾鞫群土炼忍?,顏色處理不合理,以及暗色中的?xì)節(jié)多且不清晰所造成的。下圖這個(gè)banner設(shè)計(jì),背景色很暗,且很多地方處理不合理,比如天空的顏色沒(méi)有地面的顏色亮,在昏暗的天空中加鏡頭光暈。另外左邊的人物完全壓暗與背景融為一體也顯得很臟,右邊人物的重影除了讓畫面變得更臟以外,并沒(méi)有其他意義。
針對(duì)這些問(wèn)題我調(diào)整了兩個(gè)方案,方案一是在保持原圖明暗的基礎(chǔ)上,提亮了天空、壓暗了地面,并把背景的圖層混合樣式從正片疊底轉(zhuǎn)為柔光,透明度降到70%,左邊人物進(jìn)行了適當(dāng)?shù)奶崃?,使其更清晰、更立體。去掉了不合理的素材,比如鏡頭光暈和右邊模特的重影。中間的斜色塊和標(biāo)題填充了一個(gè)飽和度較高的藍(lán)色,與深色背景形成鮮明的對(duì)比。
通過(guò)這一系列的調(diào)整,整個(gè)畫面就變得干凈了很多,而且保留了之前的氛圍。而如果想有更明顯的改變,可以放棄這種很暗的背景,比如像下圖方案二這樣,把整體的顏色都提亮,效果會(huì)更時(shí)尚、更干凈。
色彩搭配也沒(méi)有固定的標(biāo)準(zhǔn),但有幾個(gè)原則必須遵守:
? 要傳遞正確的調(diào)性;
? 視覺上要舒適;
? 能夠方便內(nèi)容的閱讀和理解,提高傳播效率;
? 能建立品牌區(qū)隔,形成一定的個(gè)性。
常見的色彩搭配問(wèn)題還有很多,以后有機(jī)會(huì)蔥爺再做補(bǔ)充吧。
原文地址:蔥爺(公眾號(hào))
作者:蔥爺
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》最常見的7個(gè)配色問(wèn)題,如何解決?
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司