色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

前言

經常會有朋友問到如果對色彩不敏感,或者提到色彩搭配就蒙圈怎麼辦?

那麼我會說——

“朋友,是你的打開方式不對。”


色彩搭配,原來如此簡單


中性色的妙用


逆向思維 >>

對,本章節主要就是從分析中性色的角度來闡述色彩搭配的“奧義”。通過逆向思維去學會並靈活掌握色彩搭配,如何使用正確的打開方式。


中性色的定義 >>

由黑色、白色及由黑白調和的各種深淺不同的灰色系列,稱為無彩色系,也稱為中性色。這種顏色通常很柔和色彩不那麼明亮耀眼。中性色是介於三大色紅黃藍之間的顏色,不屬於冷色調也不屬於暖色調。黑白灰是常用到的三大中性色。黑白灰能與任何色彩起諧和、緩解作用。


色彩搭配,原來如此簡單


黑白灰的面積佔比


色彩搭配,原來如此簡單


下面我們著重講黑白灰這三大中性色。為什麼?

因為黑白灰能與任何色彩起諧和、緩解作用。


色彩搭配,原來如此簡單

就這一個作用就可以令很多人偷偷的笑了。

然後又偷偷的哭了......


這個作用我知道啊!我平時基本上做的不都是黑白稿嗎,上色毀所有的有木有......


色彩搭配,原來如此簡單

可以這麼說,一個版面中黑白灰的面積決定了畫面基調的走向。我們通過一些案例看看黑白灰面積對畫面基調的影響,這樣我們便可以在設計過程中通過項目本身的調性逆向推出中性色所佔的面積大小。(所舉例子是從網上隨機挑選,如有侵權,請聯繫刪除。)

PS:例子中黑白灰分別用這個色度值統一代指。


色彩搭配,原來如此簡單



思路解析

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

色彩搭配,原來如此簡單

上圖的版面中為了凸顯酒品牌的高端與品質,用大範圍的黑灰中性色,小範圍的白色和金色(也是中性色的一種,這裡不主講)作為點綴。畫面低調奢華有內涵,這個範例通版畫面都是用的中性灰去設計完成。極寫產品發源地,質地,釀造工藝等,表達品牌本身的文化。

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

色彩搭配,原來如此簡單

不難發現,右圖也是由黑白灰中性色構成,但是同樣是黑白灰的構成方式,但是很顯然該畫面黑白灰的面積佔比有了變化,白色(人物白襯衫)和黑灰接近均等,結合項目本身看,畫面在表達產品品質高端的情況下也突出了商務年輕化的受眾群體,營銷受眾目的性更強。


色彩搭配,原來如此簡單



色彩搭配,原來如此簡單

色彩搭配,原來如此簡單

對比色的碰撞往往會形成鮮明的視覺效果,左圖紅色與藍紫色的對比時尚和活力十足,大面積的黑灰仍舊強調產品本身的品質感。

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

色彩搭配,原來如此簡單

同樣是對比色,我們把兩個畫面進行對比時最直觀的印象就是很不相同,是什麼造成這種印象呢,第一想到的是黑白灰面積佔比。


思路解析 >>

決定這種視覺印象的根源是什麼?

項目本身——也就是商家(也可以叫甲方)真正想突出的營銷點。


細心的朋友也會發現,上面那個是突出產品本身的品質,這個則是想傳達品牌的營銷活動。


色彩搭配,原來如此簡單



色彩搭配,原來如此簡單

色彩搭配,原來如此簡單

右圖同樣是表達運動行業,但是通過黑白灰中性灰面積佔比的不同,白色佔比最大,其次是黑灰。這樣傳達出的氣質跟戶外騎行更貼切,運動氣息,透氣性更強(畢竟我們的方向是星辰大海)。傳達品牌本身的生活態度。

如果想表現類似戶外運動等的生活態度。不妨讓白色佔比大一些,會有很好的效果。


色彩搭配,原來如此簡單


色彩搭配,原來如此簡單


上面的例子都是單色相的設計應用。左邊的宣傳冊是阿里巴巴集團文化冊子(且不論馬雲巴巴姿勢是如何銷魂),右邊是屬於偏向於創意時尚類的畫冊,兩種都有很明顯的品牌特性和色彩符號。識別性高,能很好的凸顯品牌的精神文化。


思路解析 >>

為何左圖整體上比右圖在黑灰佔比上更大,這就涉及到兩方面的原因:冊子特性和品牌主色。

從冊子特性上看,左圖主要就是介紹阿里巴巴的企業發展史,是大致以時間為節點展開的,黑灰佔比大更能很好的表達那份歷史感。從品牌主色上分析橙色在黑灰面積上對比性更強。右圖發揮的空間則相對自由。


色彩搭配,原來如此簡單


上面這個地產海報從整體上看是屬於單色相的設計範疇。這裡深色調代指黑色,淺色調的代指白色。(不是嚴格意義上的黑白,都屬於中性灰的範疇。這裡舉例是為了深化中性灰的概念,黑色也可以用其他深色的中性灰代替,白色亦然。


同樣是一副地產海報,僅僅通過改變畫面黑白灰的面積佔比就可以傳達出不同的項目調性。前者白色佔比多的,更多傳達的是別緻典雅的氣質;後者黑色佔比多的則傳達出尊貴奢華的氣質。


色彩搭配,原來如此簡單



色彩搭配,原來如此簡單

像這種有大範圍明確色彩指向的項目,如上面的喜慶中國節或海洋類項目或咖啡類行業等一般黑白灰佔比都較小(運用不同的色調去深入設計,畫面更有代入感)。


實例操演

主要通過以下三種方式去演示案例,進行相應的色彩搭配,設計出更適合項目調性的方案。


色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

公司簡介:

佛瑞德(鄭州)工業股份有限公司,

專注空調及散熱設備研發設計、製造、安裝20年。

企業是中國最專業的、市場佔有率最高的建築定製型空調末端和散熱設備製造商。作為中國領先的暖通產品生產企業,佛瑞德致力於為公共建築、商用建築、工業建築以及居住建築提供含先進科技的定製型空調末端&散熱設備。我們在充分滿足各類建築對空氣調節以及裝飾空間環境需求的同時,還在全社會範圍內積極推動低碳環保的暖通設備運行方式。

瑞德擁有國際化的工業設計理念、中國領先的熱工測試系統以及高效精密的加工設備;業務涉及國內外100多個城市和地區,承接了大量高檔建築的空調末端&散熱器設備的設計及製造。

企業通過ISO9001質量體系認證,是暖通設備國家標準JG221-2007和JG220-2007的編纂單位,產品通過住建部全稱部級鑑定,達到了國際先進水平。


色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

下面根據不同的要求去思考黑白灰的面積佔比,去設計出更加符合項目調性的畫面。帶著思考去設計,見證更多的精彩。


色彩搭配,原來如此簡單


思路解析 >>

首先從要求上看簡約清爽,首先想到的就是黑白灰的比例關係很顯然白色最大,灰色其次,這樣的面積佔比畫面會更透氣清爽。沒有哪個方案是一定正確的,只有根據項目調性或者要求作出更適合的。而且基本形也以方形為主,穩重大方。


色彩搭配,原來如此簡單


單色+黑白灰方案 >>

色彩搭配,原來如此簡單

運用網格系統規範好信息位置,字號的比例關係和配圖的視覺重心點。


色彩搭配,原來如此簡單

從配圖中選擇其他中性灰的色彩,很顯然上面的青灰色更符合(單色系的要有那個單色要相對更有識別性一些,另一種灰色則不太符合。其實從配圖上吸色是一個比較快捷的方式,對於色感較弱或色彩不敏感的小白都是比較推崇的。


色彩搭配,原來如此簡單

形式一

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

形式二


重點講一下形式二,配圖是一個灰度圖,其他信息都是青灰色,由於這個顏色本身的問題(比較偏高明度的青灰,識別度會弱),所以在下面重要信息的應用上儘量要比大字或者裝飾性的元素色調深一些,保證其識別度。在視覺上也會更平衡一些

(同樣的色調在大小不一時所呈現的視覺效果往往會大的會相應的深一些,這也是色彩進退的一種表現形式)。


色彩搭配,原來如此簡單

思路解析 >>

如果是活力豐富的需求,那畫面的活躍度就是第一個想到的,活躍度的提升可以從兩方面去考慮:一是畫面的基本形,比如選擇圓或者三角;二是色彩,比如說對比色或者互補色,顯然能使畫面更加豐富有活力。

若在活力豐富的基礎上讓畫面更透氣,更有張力,相應的黑白灰的面積佔比,白色依然要更大一些。反之,則顯得畫面更有品質感。

從思路解析上看,我們選擇一對對比色或互補色作為示範。選什麼對比色好一些呢?


>> >>

藍色(實業工程類的企業多數的選擇,更沉穩)+橙色(行業本身的屬性,暖通行業,更溫暖),色調上選擇暗色調更沉穩一些,一定要結合行業去思考。純色調和明色調更年輕化一些,特別是明色調常用於清新系畫面中。


色彩搭配,原來如此簡單

雙色(對比色)+黑白灰方案 >>

色彩搭配,原來如此簡單

運用網格系統規範好信息位置,字號的比例關係和配圖的視覺重心點。


色彩搭配,原來如此簡單

形式一

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

形式二


形式一由於白色面積佔比,整個畫面多了一份張力,更加的透氣;而形式二用大面積的對比色充斥了整個畫面,豐富中不乏沉穩。

講一些色彩的搭配小技巧:背景色較深時,文案信息儘量不要用純白,降低與背景之間的對比度,呈現效果會更精緻,視覺上看起來也會較為舒服。還有互補色的使用上,特別是暗色調,如果兩個對比色之間沒有黑白灰的過渡且畫面佔比比較大,儘量把其中的亮色飽和度再降低一點(諸如形式二中的橙色,最大面積的是要比小面積的飽和度低的)。


雙色(相鄰色)+黑白灰方案 >>

色彩搭配,原來如此簡單

暖色調

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

冷色調

上圖中暖色調和冷色調都是相鄰色的表現形式,這種表現方式雖說沒有對比色或者互補色那麼強烈,但是統一性更強,加上基本形圓形的對比豐富性,其實也可以算得上不錯的選擇。


色彩搭配,原來如此簡單

雙色(相鄰色)+黑白灰方案 >>

時尚年輕化的風格,往往包含了元素的多樣性與不確定性,不論是色彩還是形式都會更加的豐富,用多色系的搭配方式也許更為適合。黑白灰的面積佔比或許黑灰多,或許白色多,都將帶給我們不同的視覺效果,或冷酷沉靜,或活力激昂。

多色的搭配其中有一個難點,就是色彩面積的分配上。一旦搭配不好就會使得畫面愈加混亂。在這裡分享一個心得(僅代表個人看法):在多色搭配的畫面中,我們一定要找到一個主色和副色,或對比,或互補,或相鄰。主色佔比最大,副色其次(這裡不包含黑白灰),第三色或第四色(我把後面的顏色名稱按從三依次往後排,方便理解)就要作為裝飾色放在其中,他們所在的位置在整個畫面中一定要有個呼應,那樣才不會顯得是硬加上去的。

另外第三色或第四色最好是主色或者副色的對比色或者相鄰色,這樣才能保證畫面的色彩層次感與呼應性。色彩本身存在於畫面中,宏觀看來也會有個視覺上的歸屬感。


多色+黑白灰方案 >>

色彩搭配,原來如此簡單

運用網格系統規範好信息位置,字號的比例關係和配圖的視覺重心點。


色彩搭配,原來如此簡單

形式一(主色和副色為互補色)

色彩搭配,原來如此簡單


色彩搭配,原來如此簡單

形式二(主色和副色為相鄰色)


不論是形式一還是形式二主色和副色的位置關係都採用了對角線的空間佈局方式,主要是為了突出時尚年輕化的主題,包括補色或者相鄰色的運用。第三色和第四色的使用就有據可考了,位置上同樣採用了對角線的呼應方式。形式一白色面積佔比最大,年輕活力激昂;形式二則黑色則佔比最大,酷炫沉靜又有種低調奢華的時尚感。



總結

通過黑白灰的面積佔比即可表達畫面要體現的氣質,逆向思維去思考,如果知道一個項目的調性是什麼,就大概知道黑白灰的面積佔比了,加之其他色彩的配合,就會很快做出一個相對比較合理的色彩搭配。

最後再分享一個方法,如果一個畫面以信息傳達為主,在主色和副色都搭配好的基礎上最好是用白色去做承載信息的色塊,那樣信息會更加的明朗,而且畫面更透氣。

>>

“噢朋友,祝你好運。”

色彩搭配,原來如此簡單


分享到:


相關文章: