「乾貨」色彩教程-小紅書

前言:

色彩學,或者說是配色技能,是我們設計師最需要的技能之一,普通人來說,談論一個物體外在,經常用到的2個緯度,那就是形色,形是指輪廓,色當然就是指它表現出來的顏色,色彩。

色彩的原理是什麼?

我們看到的任何顏色的物體,其實都是沒有顏色的,是包含了各種顏色的光線,照射到物體的表面,例如一個綠色的蘋果表面,它吸收了陽光的大部分的色彩,唯獨綠色無法吸收,那就反射了綠色,你的眼球看到了這個反射的光線,於是你的大腦判斷,這個蘋果是綠色的。

「乾貨」色彩教程-小紅書

對色彩的認知和配色的技巧,對於大部分人來說,都是靠天生的色彩感知和後天的環境影響,天生的感知來自眼球對色彩的敏銳度,大部分人都非常接近,甚至是一模一樣,但是後天環境的影響就大不同了。

例如越南人,喜歡綠色的帽子。

「乾貨」色彩教程-小紅書

但是在中國,你送誰綠色帽子,他會問候你全家。

「乾貨」色彩教程-小紅書

但是,今天我們要講的不是原諒色,而是紅色!

「乾貨」色彩教程-小紅書

看圖,先了解一下我們對紅色的認知!

我把色彩分成2個緯度,一個是大自然中的,一個是社會意識中的。

為什麼這樣分?

往下看完你就懂。

大自然中的紅色!

「乾貨」色彩教程-小紅書

大自然中的紅色,和人類沒有任何關係,有沒有人類的存在,這些物體和現象都會以紅色出現,例如玫瑰花的紅色,與生俱來。

社會意識中的紅色!

「乾貨」色彩教程-小紅書

而社會意識中的紅色,是人類自己對物體的色相做了符合群體利益的意識偏向。

例如為什麼停下來燈是紅色?因為紅色燈波長可以傳播得最遠,穿透力最強,哪怕是在大霧天,也可以讓遠處的司機看得到前方需要停車,所以這個色彩的燈,安全性要比任何顏色都要強。

「乾貨」色彩教程-小紅書

由上面的圖片映射我們可以看到一些紅色的性格,它是一種非常熱烈的顏色,是所有顏色中最能吸引人注意力的一種顏色。由於這些特性,紅色被廣泛的應用在女性、運動、遊戲、食品等行業。

接下來我們按照紅色的層次劃分,分別看看在設計中我們是怎麼應用紅色的。

「乾貨」色彩教程-小紅書

學習,當然是由淺入深,所以,顏色上,我們也是從淺色開始說吧!

-----------------------------------------

01.粉紅色

屬於高明度+低純度的紅顏色。

「乾貨」色彩教程-小紅書

順便告訴一下你,這個色彩在哪兒取。

「乾貨」色彩教程-小紅書

正面情緒:

它給人柔和親切的感受,大面積使用的時候會讓畫面引起非常舒適視的覺享受。因此被大量地應用於女性、化妝品、母嬰等行業。下面我們通過一些實例來分析。

負面情緒:

無力感,娘炮!

化妝品

「乾貨」色彩教程-小紅書

左邊:模特粉嫩的皮膚,吹彈可破。

右邊:化妝品的金屬部分都被粉紅所倒映,弱化金屬的剛烈,整體更加女性化。

「乾貨」色彩教程-小紅書

左邊:粉紅色的背景和粉紅色的絲帶元素,把筆直的產品軟化到非常和諧。

右邊:除了淡雅的淺粉背景外,無規則的粉色花朵,把整個畫面昇華,產品屬性瞬間得到呼應。

美食

「乾貨」色彩教程-小紅書

用粉色做美食類的設計需要謹慎,因為它的甜蜜屬性太強了,基本上無論用於什麼食物的表現,都可能出現甜甜的感覺。

「乾貨」色彩教程-小紅書

少女風

「乾貨」色彩教程-小紅書

少女風來說,基本上你套上了粉紅色的調性,就可以成型了。

因為色彩屬性太強了,看到就呼喚出你的少女心。

「乾貨」色彩教程-小紅書

一般來說,粉紅+白,無論是什麼人用,都可以年輕10歲!

「乾貨」色彩教程-小紅書

額。。。。

而配黑色就需要謹慎,面積不能太大,黑色大了,整個頁面就會壓抑了,會有一種殺人蘿莉的感覺。

「乾貨」色彩教程-小紅書

還好我手機扔得快,差點被砍到!

促銷

「乾貨」色彩教程-小紅書

好了,說到粉色系的促銷,和上面的都很不一樣的技巧。

由於促銷最重要的是信息清晰,確定,和顯眼。但是粉色天生就是存在感很弱,那怎麼辦?

當然是加大畫面的對比度。 也就是加入重色的配搭,同時還需要很超大的字號來提高信息清晰度。

如上圖

左邊:實用很大的粗體字,讓白色的字不至於被畫面給干擾掉了。

右邊:實用黑色加粗的字,其它信息弱化,手幾乎和畫面同色,所以不會干擾促銷信息。

「乾貨」色彩教程-小紅書

這兩張也是一樣的道理。

「乾貨」色彩教程-小紅書

這些都是使用了強烈的色彩對比,包括色相的對比,純度的對比。

左邊:粉紅和綠的色相強烈對比。

中間:粉色的高明度和藍色的低明度強烈對比。

右邊:同中間。

注意!

粉色系的配色一定要乾淨,顏色的純度和明度一般偏高,慎用灰色,過於偏灰畫面就會顯髒

「乾貨」色彩教程-小紅書

左邊:溫馨浪漫

右邊:略帶頹廢

-----------------------------------------

02.純紅色!

屬於高明度+高純度的紅顏色。

「乾貨」色彩教程-小紅書

純紅色的取色位置。

「乾貨」色彩教程-小紅書

正面印象:

純紅是一個非常有力量的色系,很容易聯想到熱血、激進,個性,勝利等情緒,當我們需要刺激用戶視覺神經時,純紅色是首選。

當然,還有一個重要的情緒,就是可口美味。因為大自然中成熟的果子用紅色來告訴人類以及其它動物,我們可以吃了,而且是甜的。

在所有色彩中純紅色是最奪目的,永遠不會被掩蓋,所以特別適合當主色調使用。

負面印象:

血腥,警告,恐怖。

「乾貨」色彩教程-小紅書

左邊:雖然是很冷靜的版式,但是紅色就已經可以變得非常血拼促銷的感覺了。

右邊:非常個性的感覺。

關於左邊這張,我調一下色相,發現這個版式並不是那種促銷感的,配色幫了它很大的忙。

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

左邊:紅色與金色的配搭,皇室般的高端感。

右邊:紅色配黑色,個性時尚感強烈。

美食

紅色的美味感是與身俱來的,而我們從小到大也被這種自然認知不斷地加強印象。

「乾貨」色彩教程-小紅書

ru'g

上圖:紅色的蘋果加上粉紅色的產品,不用問,甜的。

下圖:無論這一勺子,是草莓醬還是辣椒醬,都不會影響它表現出來的美味感。而且這個設計特意採用了木質的勺子,讓人感覺這個東西是天然的,無加工的,好感更加強烈。

所以我們在做設計執行的時候,需要考慮的不僅僅是設計的形式感,更要考慮用戶心理,看到這個畫面會有怎樣的感受。

「乾貨」色彩教程-小紅書

我們對大自然的色彩認知比感性認知更加強烈。

「乾貨」色彩教程-小紅書

(攝影師:Shiguangli時光裡)

中國風

傳統的中國紅一般是正紅,例如這種設計,我們經常看到,這個是發自內心的土到掉渣。

「乾貨」色彩教程-小紅書

如果你不想讓頁面看起來過於正經隆重,可以嘗試讓顏色偏一點橙色或者玫紅,這樣可以讓頁面顯得沒那麼“老氣”。

「乾貨」色彩教程-小紅書

同樣是金色配紅色,但是這三張都不會讓人感覺很土氣。

那這個時候你可能說了,我的老闆就是土鱉,喜歡那種金光燦燦的東西,怎麼辦?

呵呵,你必須指著老闆的鼻子說:有錢就可以為所欲為嗎?

「乾貨」色彩教程-小紅書

別說了,改吧!

把純度增加,滿足老闆,然後和朋友說,這個不是你設計的。

「乾貨」色彩教程-小紅書

海報

關於紅色的海報,應用得太多太多了,尤其是越個性的內容越是適合,例如音樂的。

「乾貨」色彩教程-小紅書

例如崔健的演唱會海報,經常都是純紅色配黑色,舞臺燈光也是這種趨勢。

而中國好聲音的視覺表現也是紅色,這些都是有利於品牌的個性暗示和形象傳達。

「乾貨」色彩教程-小紅書

嗯,這些海報也都是很有個性的心理暗示。

運動

運動的屬性有什麼?激情,速度,力量,那麼在色彩上如何表現這些屬性呢?

「乾貨」色彩教程-小紅書

例如這張設計,大紅的背景色,力量感十足,後面的漩渦一樣的圖形,增加了速度感,明快的色彩對比,加大畫面的張力。

如果同樣的形,換一下色會怎樣?

「乾貨」色彩教程-小紅書

畫面的舒適性還在,但是力量感完全失去了。

「乾貨」色彩教程-小紅書

這張設計也是,大色塊的對比,增加力量感,而傾斜的造型,增加了速度感,你可以知道,設計師每一個色彩使用,元素的增加,都為圍繞這最終的設計目的而服務,並不是為了美。

促銷

「乾貨」色彩教程-小紅書

大紅色做促銷設計,不要太容易了!!簡直就是那個不痛,月月輕鬆!

只要紅色一鋪,隨手加點粗字體,促銷感就要爆棚了!

因為紅色是典型的膨脹色、前進色,在視覺上它會主動搶你的眼球。平常促銷的頁面大多是高飽和度的紅色,也是儘量放大紅色前進和膨脹的兩大特性。因此,大紅色簡直就是促銷的代名詞。

注意

紅色的實用,要注意主題這個大前提,在需要激發這種特殊情緒的時候就可以用。

例如下圖,雖然Tiffany色很好看,但是在七夕這種日子,愛情應該是紅紅的愛意,使用青色,總讓人感受不到感情,太冷了。

「乾貨」色彩教程-小紅書

-----------------------------------------

03.暗紅色!

屬於低明度+高純度的紅顏色。

「乾貨」色彩教程-小紅書

暗紅色的取色位置。

「乾貨」色彩教程-小紅書

正面情緒:

高品質,有內涵,有個性,有力量,深沉感。

負面情緒:

低落,憂鬱。

女性

「乾貨」色彩教程-小紅書

深紅色和深藍色的搭配,再輔以有質感的背景紋理,能夠很好的體現出女性成熟優雅的感覺,看到這些頁面,你就會知道這個品牌應該很貴。

海報

「乾貨」色彩教程-小紅書

關於新年主題,如果只是單純到深紅色,會讓人略感壓抑,但是如果加上點紋理,整個品質感馬上就得到提升。

「乾貨」色彩教程-小紅書

大紅到深紅的變化,畫面會多很多張力,故事性大大增加。

運動

「乾貨」色彩教程-小紅書

剛剛說到粉紅色可以體現女性的柔美,

而深紅色就完全相反,可以體現男性的力量!

美食

「乾貨」色彩教程-小紅書

鮮紅色是好吃,而暗紅呢?那就是增加品質感,說白了就是告訴用戶,沒錢別來吃,我很貴!

遊戲

「乾貨」色彩教程-小紅書

說到遊戲頁面設計,我要多說幾句。

為什麼其它類目的設計師都羨慕遊戲類目的設計師呢?

第一,優秀的素材多。

人物原畫,精美場景等,這些隨手一放,基本上就是一個精美畫面。

第二,可以隨便用暗色調。

要知道,暗色調比亮色調更容易出畫面效果,暗中看亮光效果,比亮中看黑色的物體,更容易讓人集中視覺焦點。這個就是暗色設計的好處。

「乾貨」色彩教程-小紅書

這個是我2011年做的一張圖,用到的就是暗紅色調。

「乾貨」色彩教程-小紅書

中國風

「乾貨」色彩教程-小紅書

深紅色搭配藏青色有著傳統的國畫的風格,這是很有韻味的中國。

注意

深紅色的畫面一般比較偏暗,質感厚重,因此在設計的過程中要特別注意,避免讓整個頁面過於沉悶消極,解決辦法是可以在局部使用亮色,提高頁面的對比度。

「乾貨」色彩教程-小紅書

不要讓你的主角埋沒在環境中

「乾貨」色彩教程-小紅書

三個不同的紅色體系說完了,

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

但是不能光說不練對不對?

幹活!

「乾貨」色彩教程-小紅書

就拿一個化妝品的產品做測試配色的案例吧!

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

「乾貨」色彩教程-小紅書

希望這篇文章可以幫到你。

如果你第一次系統地接觸配色,那麼請你收藏這篇文章反覆讀幾次。

如果你覺得寫得特別好,可以分享給你的朋友,同事。

「乾貨」色彩教程-小紅書


分享到:


相關文章: