設(shè)計(jì)分享:你不知道的色彩密碼
你好色嗎?我相信每個(gè)人都是好色的,只是好色的程度不一樣罷了。
你好色嗎?我相信大家都是好色的,只是每個(gè)人好色的程度不一樣罷了。有些老司機(jī)會(huì)天天開火車,你會(huì)跟不上他的節(jié)奏。那其實(shí)配色也是一樣,每個(gè)人對(duì)色彩的敏感度不同,配色弱一點(diǎn)的同學(xué)總是不敢用色,也可能不知道為什么用這樣的顏色?那么老司機(jī)熊貓帶你上車,探索你不知道的色彩密碼!
首先我們來(lái)看一個(gè)顏色
當(dāng)我們盯著它看10秒再看白色的地方,會(huì)有什么不一樣?有沒有出現(xiàn)一個(gè)新的顏色呢?
是不是出現(xiàn)了這么一個(gè)顏色的殘影,那么為何會(huì)這樣?因?yàn)槲覀兊难劬π枰吹酵暾臇|西,當(dāng)視覺受到一定刺激后,心理產(chǎn)生了平衡這個(gè)色彩的渴望,需要通過(guò)看到的顏色的互補(bǔ)色來(lái)平衡你的心理需求。
平衡的色彩關(guān)系是心理和生理的渴望
上圖中圖1這個(gè)畫面中只用了一個(gè)紅色系,而且都是暗紅色,畫面就會(huì)變得陰森、恐懼和詭異;而圖2運(yùn)用到了我們的生理補(bǔ)色,整個(gè)畫面就會(huì)變得美觀、自然和舒適。
如何才能做帶色彩平衡
1. 冷暖色的平衡
1.1. 什么是絕對(duì)冷暖
絕對(duì)冷暖就是你一眼就能看出這個(gè)顏色的冷暖差異,比如偏紅的是暖色,偏藍(lán)的是冷色,這是我們最常見的晚霞,我們會(huì)覺得很美,他是天然的冷暖色平衡。所以冷暖色的搭配符合自然平衡的規(guī)律,也會(huì)影響你的心理情緒。
那么我們?cè)谠O(shè)計(jì)與繪畫中將冷暖色分為三種色調(diào):
- 暖色調(diào)分為 紅橙黃
- 冷色調(diào)分為 青色、藍(lán)色
- 紫色和綠色相對(duì)中性,因?yàn)樗麄兤渑恼{(diào)性不強(qiáng),紫色介于紅藍(lán)之間,綠色介于黃藍(lán)之間。
案例1:
圖1:情感失衡; 圖2:冷暖色平衡合理。冷暖色的搭配是情感的表達(dá)。我們有意識(shí)的去將畫面進(jìn)行冷暖平衡搭配的時(shí)候,我們的視覺就能得到滿足。而其中的比例關(guān)系需要我們根據(jù)情感去調(diào)整,如果我們需要一個(gè)個(gè)性張揚(yáng)的冷暖配色。那我們就把各自的比例放大。
大面積的使用冷暖對(duì)色會(huì)是情感更加夸張,通常我們使用飽和度比較高的冷暖搭配會(huì)使產(chǎn)品變得很炫酷。
案例2:
這是我在一家餐廳門口看到的易拉寶,先去不說(shuō)他字體排版的問(wèn)題,我們看到他想突出的內(nèi)容是什么?
他把最重要的信息忽略了,因?yàn)樗驯尘坝昧伺?,然后想突出“砍”和“省”字,加了一個(gè)大紅色,這是我們?cè)O(shè)計(jì)中最忌諱的配色,在一個(gè)暖色上加了一個(gè)更暖的顏色,會(huì)讓你的畫面看不清,如果你對(duì)顏色的敏感度不高,在冷暖搭配中運(yùn)用不好,那我這有個(gè)小技巧——暖前冷后搭配法。
畫過(guò)色彩油畫的同學(xué)應(yīng)該都知道,每一個(gè)顏色都是有冷暖的,會(huì)有冷色的紅,也有暖色的青。這是我10年前畫的一副色彩,當(dāng)時(shí)老師就說(shuō),你前面的物體畫暖一點(diǎn),后面畫的冷一點(diǎn),你們有發(fā)現(xiàn)嗎?
其實(shí)設(shè)計(jì)也是一樣的,我們?cè)谧鲈O(shè)計(jì)時(shí),也需要做冷暖對(duì)比的平衡原則,冷暖對(duì)比并不是說(shuō)我一個(gè)紅就一定要一個(gè)藍(lán)色去撞色,那是一種比較強(qiáng)烈的冷暖對(duì)比,剛剛講的絕對(duì)冷暖是一個(gè)大環(huán)境,相對(duì)冷暖是顏色的細(xì)節(jié)冷暖。
這是我工作中做的一些設(shè)計(jì)稿,運(yùn)用冷暖配色,背景為冷色,前景是暖色,這樣我們的信息可讀性會(huì)更強(qiáng)。
1.2. 什么是相對(duì)冷暖
我們來(lái)看一下ps的色相盤,最中間的是青色,也就是這個(gè)色盤的冷極點(diǎn),當(dāng)上面的紅色往下走的時(shí)候是越來(lái)越冷的,走到了冷極點(diǎn)后,在往下走是越來(lái)越暖的。所以上面的紅色是偏冷,也就是冷紅,下面的紅偏暖,也就是暖紅。
我們來(lái)看一個(gè)案例來(lái)說(shuō)明一下。
淘寶的兩個(gè)入口按鈕
當(dāng)我們?nèi)ノ档臅r(shí)候發(fā)現(xiàn),紅色是偏冷的紅,藍(lán)色是偏冷的藍(lán)。所以有些同學(xué)在做設(shè)計(jì)時(shí)一些細(xì)節(jié)上的顏色會(huì)不在一個(gè)調(diào)子上面,這時(shí)候你要檢查一下,同一個(gè)屬性里面是否都在一個(gè)色調(diào)里面,除非你是要突出某個(gè)東西刻意去做的不一樣。
小結(jié):冷暖色是情感傾向的表達(dá),平衡視覺心理。不同的主題適合不同的冷暖,過(guò)冷或者過(guò)暖都會(huì)導(dǎo)致情感失衡。
2. 互補(bǔ)色的平衡
互補(bǔ)色,是我們最常見也是用的最廣泛的配色;色環(huán)180°左右的兩個(gè)色區(qū)為互補(bǔ),注意是180左右,因?yàn)轭伾遣唤^對(duì)的。
案例1:
當(dāng)我們會(huì)設(shè)計(jì)海報(bào)時(shí),做成這樣已經(jīng)覺得還不錯(cuò)了,可能你覺得這樣的配色很舒服,但是你想表達(dá)什么?是好好吃飯?還是袋鼠的眼睛?,當(dāng)一個(gè)顏色在畫面中過(guò)多時(shí)就會(huì)造成缺失感。我們很多同學(xué)在做推廣的時(shí)候,經(jīng)常會(huì)遇到這些問(wèn)題,需求要你突出產(chǎn)品還是文案,還是兩者都要突出,那么在這些推廣中,都是屬于張揚(yáng)的性格畫面,我們將背景與產(chǎn)品文案用互補(bǔ)色平衡的方法,調(diào)節(jié)你補(bǔ)色的明度和飽和度,這樣你的頁(yè)面會(huì)很跳。
案例2:
在這個(gè)畫面中其實(shí)沒有大問(wèn)題,他用黑色去平衡畫面,黑白灰的平衡我們后面會(huì)講到
我們只要看畫面的視覺沖擊,如果使用互補(bǔ)色會(huì)怎樣?我們看到紅綠色版本的視覺沖擊會(huì)更強(qiáng),更有張力!所以當(dāng)我們?cè)僭O(shè)計(jì)一些品牌推廣的時(shí)候,需要搶占用戶的眼球,這時(shí)候用互補(bǔ)色的平衡對(duì)比,大膽使用顏色,利用飽和度、明度去嘗試能讓你的畫面產(chǎn)生不一樣的效果。
案例3:
暖紅與暖綠的互補(bǔ)
小結(jié):互補(bǔ)色能補(bǔ)充色彩情感表達(dá)的缺失感,調(diào)節(jié)互補(bǔ)色的明度、飽和度能改變情感的走向。
3. 深淺色的平衡
說(shuō)到深淺色用的最多的地方是漸變,漸變是為了讓畫面更加通透和具有層次感。但漸變也是要講究色彩的韻律,他不是隨意的。
案例:
之前很火的一款游戲叫紀(jì)念碑谷,這款游戲火的原因就是因?yàn)樗玫搅撕芏嗌顪\色的配色方法來(lái)豐富畫面的層次。
我們把這類深淺稱為單色深淺,只需調(diào)整他的明暗就可以做出不同程度的漸變了。這樣我們?cè)趩紊锟梢宰龅讲煌膶哟侮P(guān)系和明暗關(guān)系。
3.1. 單色深淺
我們可以制作一個(gè)深淺的調(diào)色板,從5%-100%的一個(gè)亮度調(diào)色板。
比如。我們?cè)谥谱靼粹o的狀態(tài)時(shí)也是如此。我們可添加10%亮度得到一個(gè)hover的狀態(tài),降低10%明度得到一個(gè)點(diǎn)擊狀態(tài),如果10%不夠,那就20%。切記深淺平衡并不是說(shuō)用透明度去調(diào),這樣很不專業(yè)然后顏色會(huì)偏離。
案例:
深淺色運(yùn)用的地方很多,比如我們的ps,ai。左深右淺,背景深,文字淺,這樣的一個(gè)對(duì)比關(guān)系能拉開信息的層次。
3.2. 多色深淺
一些家裝設(shè)計(jì)的色彩搭配也能運(yùn)用到設(shè)計(jì)上,通常我們用相鄰色的不同深淺去搭配,比如黃綠色。
無(wú)印良品的紅金搭配
小結(jié):深淺色調(diào)節(jié)畫面的節(jié)奏感,是畫面層次更加豐富;通過(guò)調(diào)節(jié)色彩的明度,拉開主次關(guān)系,突出重點(diǎn)。
4. 黑白灰的平衡
案例1:
大衛(wèi)石膏像,畫過(guò)素描的同學(xué)應(yīng)該知道黑白灰在素描中的關(guān)系。一個(gè)完整的畫面中,是應(yīng)該出現(xiàn)黑白灰的三種平衡關(guān)系,最亮和最暗是這個(gè)畫面中最極端的那個(gè)點(diǎn),灰色則是綜合黑白之間的比例。那么設(shè)計(jì)中如何平衡黑白灰呢?
我們將rgb的色盤調(diào)成灰度模式。發(fā)現(xiàn)藍(lán)色是最暗的,青色和黃色是最亮的。越靠近藍(lán)色就越黑,越靠近黃色和青色的色系就越亮。
我們把紅黃藍(lán)綠放在黑色上對(duì)比,效果是很明顯的。黃色是最亮的,然后是綠色,紅色偏灰,藍(lán)色就很暗了。
案例2:
當(dāng)一個(gè)畫面產(chǎn)生多種顏色的時(shí)候,除去中性色,你就可以利用這個(gè)平衡法則,三種顏色是處于黑白灰的穩(wěn)定關(guān)系。
案例3:
同樣,看這個(gè)畫面,這個(gè)畫面看似顏色很多,好像很復(fù)雜的樣子。
除去中性色之后,其實(shí)藍(lán)色是最暗的,青色是最亮的,他在做一個(gè)漸變的是時(shí)候是按照黑白灰平衡的原理,所以漸變出來(lái)的顏色不會(huì)亂,很有韻律,所以它的配色也是成立的。
案例4:
我們回到之前互補(bǔ)色的這個(gè)畫面,我們用黑白灰的平衡法測(cè)試一下看是什么樣的效果?
我們發(fā)現(xiàn)紅綠都是灰色的。因?yàn)楫?dāng)你直接用紅綠互補(bǔ)的時(shí)候,畫面會(huì)很刺眼,辣眼睛對(duì)吧。這時(shí)候我們需要中性色黑白的介入去控制畫面的平衡,這樣的紅綠互補(bǔ)才會(huì)成立而且更美觀。
比如我用這個(gè)案例給你解釋一下:
當(dāng)我再綠色上面加個(gè)紅色,哇,是不是非常的辣眼睛,刺眼,難受。當(dāng)我加上黑白之后,這個(gè)辣眼睛的程度是不是被削弱了。
小結(jié):黑白灰的平衡能有效把控色彩的穩(wěn)定,能控制互補(bǔ)色的不平衡。
ps:利用灰度模式可以檢測(cè)畫面的黑白灰層級(jí)關(guān)系和比重。
那么問(wèn)題來(lái)了!你可能覺得這些都要出現(xiàn)在畫面里嗎?是不是要一定要用絕對(duì)的互補(bǔ)色?是不是都是要大面積出現(xiàn)?每個(gè)概念都是相對(duì)的,我只能說(shuō)每個(gè)概念都是相對(duì)的,因?yàn)樯适沁@個(gè)感性的東西,我們要根據(jù)我們的產(chǎn)品,需求來(lái)賦予他們?cè)撚械纳?。我們需要不斷的去看,去摸索,和練?xí)!
沒有不好的顏色,只有不好的搭配
色彩是設(shè)計(jì)中最具有表現(xiàn)力和感染力的因素,他通過(guò)人們的視覺感受產(chǎn)生一系列的生理,心理感受,換起用戶不同的情緒。
上車彩蛋:
- https://uigradients.com/
- http://zhongguose.com/
- http://www.colorhunt.com/
- https://webgradients.com/
作者: 熊貓,網(wǎng)易UEDC設(shè)計(jì)師
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,作者@熊貓
題圖來(lái)自u(píng)nsplash,基于 CC0 協(xié)議
ceshihyongli
牛,確實(shí)夠大咖。。。
這是大師級(jí)別的啊,講得通俗易懂,還透徹,厲害!
很受用。。。
彩蛋很給力 ? 果然夠騷
多謝分享理論干活。
受教了