網易老司機告訴你如何才能做(zuò)到色彩平衡

作者：龍 時(shí)間：2018-08-01 浏覽：

網易UEDC – 熊貓 : 你好色嗎？我相信大(dà)家都是好色的(de)，隻是每個(gè)人(rén)好色的(de)程度不一樣罷了(le)。有些老司機會天天開火車，你會跟不上他(tā)的(de)節奏。那其實配色也(yě)是一樣，每個(gè)人(rén)對(duì)色彩的(de)敏感度不同，配色弱一點的(de)同學總是不敢用(yòng)色，也(yě)可(kě)能不知道爲什(shén)麽用(yòng)這(zhè)樣的(de)顔色？那麽，讓老司機熊貓帶你上車，探索你不知道的(de)色彩密碼！

首先我們來(lái)看一個(gè)顔色

當我們盯著(zhe)它看10秒再看白色的(de)地方，會有什(shén)麽不一樣？有沒有出現一個(gè)新的(de)顔色呢(ne)？

是不是出現了(le)這(zhè)麽一個(gè)顔色的(de)殘影(yǐng)，那麽爲何會這(zhè)樣？因爲我們的(de)眼睛需要看到完整的(de)東西，當視覺受到一定刺激後，心理(lǐ)産生了(le)平衡這(zhè)個(gè)色彩的(de)渴望，需要通(tōng)過看到的(de)顔色的(de)互補色來(lái)平衡你的(de)心理(lǐ)需求。

平衡的(de)色彩關系是心理(lǐ)和(hé)生理(lǐ)的(de)渴望

上圖中圖1這(zhè)個(gè)畫(huà)面中隻用(yòng)了(le)一個(gè)紅色系，而且都是暗紅色，畫(huà)面就會變得(de)陰森、恐懼和(hé)詭異；而圖2運用(yòng)到了(le)我們的(de)生理(lǐ)補色，整個(gè)畫(huà)面就會變得(de)美(měi)觀、自然和(hé)舒适。

如何才能做(zuò)帶色彩平衡

1. 冷(lěng)暖色的(de)平衡

什(shén)麽是絕對(duì)冷(lěng)暖

絕對(duì)冷(lěng)暖就是你一眼就能看出這(zhè)個(gè)顔色的(de)冷(lěng)暖差異。比如偏紅的(de)是暖色，偏藍的(de)是冷(lěng)色，這(zhè)是我們最常見的(de)晚霞，我們會覺得(de)很美(měi)，他(tā)是天然的(de)冷(lěng)暖色平衡。所以冷(lěng)暖色的(de)搭配符合自然平衡的(de)規律，也(yě)會影(yǐng)響你的(de)心理(lǐ)情緒。

那麽我們在設計與繪畫(huà)中将冷(lěng)暖色分(fēn)爲三種色調：

• 暖色調分(fēn)爲紅橙黃(huáng)
• 冷(lěng)色調分(fēn)爲青色、藍色
• 紫色和(hé)綠(lǜ)色相對(duì)中性，因爲他(tā)們偏冷(lěng)暖的(de)調性不強，紫色介于紅藍之間，綠(lǜ)色介于黃(huáng)藍之間。

案例1

△ 圖1：情感失衡； 圖2：冷(lěng)暖色平衡合理(lǐ)

冷(lěng)暖色的(de)搭配是情感的(de)表達。我們有意識的(de)去将畫(huà)面進行冷(lěng)暖平衡搭配的(de)時(shí)候，我們的(de)視覺就能得(de)到滿足。而其中的(de)比例關系需要我們根據情感去調整，如果我們需要一種個(gè)性張揚的(de)冷(lěng)暖配色。那我們就把各自的(de)比例放大(dà)。

大(dà)面積的(de)使用(yòng)冷(lěng)暖對(duì)色會使情感更加誇張，通(tōng)常我們使用(yòng)飽和(hé)度比較高(gāo)的(de)冷(lěng)暖搭配會使産品變得(de)很炫酷。

案例2

這(zhè)是我在一家餐廳門口看到的(de)易拉寶，先不說他(tā)字體排版的(de)問題，我們看到他(tā)想突出的(de)内容是什(shén)麽？

他(tā)把最重要的(de)信息忽略了(le)，因爲他(tā)把背景用(yòng)了(le)暖色，然後想突出「砍」和(hé)「省」字，加了(le)一個(gè)大(dà)紅色，這(zhè)是我們設計中最忌諱的(de)配色，在一個(gè)暖色上加了(le)一個(gè)更暖的(de)顔色，會讓你的(de)畫(huà)面看不清，如果你對(duì)顔色的(de)敏感度不高(gāo)，在冷(lěng)暖搭配中運用(yòng)不好，那我這(zhè)有個(gè)小技巧——暖前冷(lěng)後搭配法。

畫(huà)過色彩油畫(huà)的(de)同學應該都知道，每一個(gè)顔色都是有冷(lěng)暖的(de)，會有冷(lěng)色的(de)紅，也(yě)有暖色的(de)青。這(zhè)是我10年前畫(huà)的(de)一副色彩，當時(shí)老師就說，你前面的(de)物(wù)體畫(huà)暖一點，後面畫(huà)的(de)冷(lěng)一點，你們有發現嗎？

其實設計也(yě)是一樣的(de)，我們在做(zuò)設計時(shí)，也(yě)需要做(zuò)冷(lěng)暖對(duì)比的(de)平衡原則，冷(lěng)暖對(duì)比并不是說一個(gè)紅就一定要一個(gè)藍色去撞色，那是一種比較強烈的(de)冷(lěng)暖對(duì)比，剛剛講的(de)絕對(duì)冷(lěng)暖是一個(gè)大(dà)環境，相對(duì)冷(lěng)暖是顔色的(de)細節冷(lěng)暖。

這(zhè)是我工作中做(zuò)的(de)一些設計稿。運用(yòng)冷(lěng)暖配色，背景爲冷(lěng)色，前景是暖色，這(zhè)樣我們的(de)信息可(kě)讀性會更強。

什(shén)麽是相對(duì)冷(lěng)暖

我們來(lái)看一下(xià)Ps的(de)色相盤，最中間的(de)是青色，也(yě)就是這(zhè)個(gè)色盤的(de)冷(lěng)極點，當上面的(de)紅色往下(xià)走的(de)時(shí)候是越來(lái)越冷(lěng)的(de)，走到了(le)冷(lěng)極點後，在往下(xià)走是越來(lái)越暖的(de)。所以上面的(de)紅色是偏冷(lěng)，也(yě)就是冷(lěng)紅，下(xià)面的(de)紅偏暖，也(yě)就是暖紅。

我們來(lái)看一個(gè)案例來(lái)說明(míng)一下(xià)。

△ 淘寶的(de)兩個(gè)入口按鈕

當我們去吸他(tā)色值的(de)時(shí)候發現：紅色是偏冷(lěng)的(de)紅，藍色是偏冷(lěng)的(de)藍。所以有些同學在做(zuò)設計時(shí)一些細節上的(de)顔色會不在一個(gè)調子上面，這(zhè)時(shí)候你要檢查一下(xià)，同一個(gè)屬性裏面是否都在一個(gè)色調裏面，除非你是要突出某個(gè)東西刻意去做(zuò)的(de)不一樣。

小結：冷(lěng)暖色是情感傾向的(de)表達，平衡視覺心理(lǐ)。不同的(de)主題适合不同的(de)冷(lěng)暖，過冷(lěng)或者過暖都會導緻情感失衡。

2. 互補色的(de)平衡

互補色，是我們最常見也(yě)是用(yòng)的(de)最廣泛的(de)配色。色環180°左右的(de)兩個(gè)色區(qū)爲互補，注意是180左右，因爲顔色是不絕對(duì)的(de)。

案例1

當我們會設計海報時(shí)，做(zuò)成這(zhè)樣已經覺得(de)還(hái)不錯了(le)，可(kě)能你覺得(de)這(zhè)樣的(de)配色很舒服，但是你想表達什(shén)麽？是好好吃(chī)飯？還(hái)是袋鼠的(de)眼睛？

當一個(gè)顔色在畫(huà)面中過多(duō)時(shí)就會造成缺失感。我們很多(duō)同學在做(zuò)推廣的(de)時(shí)候，經常會遇到這(zhè)些問題，需求要你突出産品還(hái)是文案，還(hái)是兩者都要突出，在這(zhè)些推廣中，如果都是屬于張揚的(de)畫(huà)面，我們會将背景與産品文案用(yòng)互補色平衡的(de)方法，調節你補色的(de)明(míng)度和(hé)飽和(hé)度，這(zhè)樣你的(de)頁面會很跳。

案例2

在這(zhè)個(gè)畫(huà)面中其實沒有大(dà)問題，他(tā)用(yòng)黑(hēi)色去平衡畫(huà)面，黑(hēi)白灰的(de)平衡我們後面會講到。

我們隻要看畫(huà)面的(de)視覺沖擊，如果使用(yòng)互補色會怎樣？我們看到紅綠(lǜ)色版本的(de)視覺沖擊會更強，更有張力！所以當我們再設計一些品牌推廣的(de)時(shí)候，需要搶占用(yòng)戶的(de)眼球，這(zhè)時(shí)候用(yòng)互補色的(de)平衡對(duì)比，大(dà)膽使用(yòng)顔色，利用(yòng)飽和(hé)度、明(míng)度去嘗試能讓你的(de)畫(huà)面産生不一樣的(de)效果。

案例3

△ 暖紅與暖綠(lǜ)的(de)互補

小結：互補色能補充色彩情感表達的(de)缺失感，調節互補色的(de)明(míng)度、飽和(hé)度能改變情感的(de)走向。

3. 深淺色的(de)平衡

說到深淺色用(yòng)的(de)最多(duō)的(de)地方是漸變，漸變是爲了(le)讓畫(huà)面更加通(tōng)透和(hé)具有層次感。但漸變也(yě)是要講究色彩的(de)韻律，它不是随意的(de)。

案例

之前很火的(de)一款遊戲叫紀念碑谷，這(zhè)款遊戲用(yòng)到了(le)很多(duō)深淺色的(de)配色方法來(lái)豐富畫(huà)面的(de)層次。

我們把這(zhè)類深淺稱爲單色深淺，隻需調整他(tā)的(de)明(míng)暗就可(kě)以做(zuò)出不同程度的(de)漸變了(le)。這(zhè)樣我們在單色裏可(kě)以做(zuò)到不同的(de)層次關系和(hé)明(míng)暗關系。

單色深淺

我們可(kě)以制作一個(gè)深淺的(de)調色闆，從5%-100%的(de)一個(gè)亮度調色闆。

比如，我們在制作按鈕的(de)狀态時(shí)也(yě)是如此。我們可(kě)添加10%亮度得(de)到一個(gè)hover的(de)狀态，降低10%明(míng)度得(de)到一個(gè)點擊狀态，如果10%不夠，那就20%。切記深淺平衡并不是說用(yòng)透明(míng)度去調，這(zhè)樣很不專業而且顔色會偏離。

案例

深淺色運用(yòng)的(de)地方很多(duō)，比如我們的(de)Ps和(hé)Ai。左深右淺、背景深、文字淺，這(zhè)樣的(de)一個(gè)對(duì)比關系能拉開信息的(de)層次。

多(duō)色深淺

一些家裝設計的(de)色彩搭配也(yě)能運用(yòng)到設計上，通(tōng)常我們用(yòng)相鄰色的(de)不同深淺去搭配，比如黃(huáng)綠(lǜ)色。

△ 無印良品的(de)紅金搭配

小結：深淺色調節畫(huà)面的(de)節奏感，是畫(huà)面層次更加豐富；通(tōng)過調節色彩的(de)明(míng)度，拉開主次關系，突出重點。

4. 黑(hēi)白灰的(de)平衡

案例1

大(dà)衛石膏像，畫(huà)過素描的(de)同學應該知道黑(hēi)白灰在素描中的(de)關系。一個(gè)完整的(de)畫(huà)面中，是應該出現黑(hēi)白灰的(de)三種平衡關系，最亮和(hé)最暗是這(zhè)個(gè)畫(huà)面中最極端的(de)那個(gè)點，灰色則是綜合黑(hēi)白之間的(de)比例。那麽設計中如何平衡黑(hēi)白灰呢(ne)？

我們将RGB的(de)色盤調成灰度模式。發現藍色是最暗的(de)，青色和(hé)黃(huáng)色是最亮的(de)。越靠近藍色就越黑(hēi)，越靠近黃(huáng)色和(hé)青色的(de)色系就越亮。

我們把紅黃(huáng)藍綠(lǜ)放在黑(hēi)色上對(duì)比，效果是很明(míng)顯的(de)。黃(huáng)色是最亮的(de)，然後是綠(lǜ)色，紅色偏灰，藍色就很暗了(le)。

案例2

當一個(gè)畫(huà)面産生多(duō)種顔色的(de)時(shí)候，除去中性色，你就可(kě)以利用(yòng)這(zhè)個(gè)平衡法則，三種顔色是處于黑(hēi)白灰的(de)穩定關系。

案例3

同樣，看這(zhè)個(gè)畫(huà)面，這(zhè)個(gè)畫(huà)面看似顔色很多(duō)，好像很複雜(zá)的(de)樣子。

除去中性色之後，其實藍色是最暗的(de)，青色是最亮的(de)，他(tā)在做(zuò)一個(gè)漸變的(de)是時(shí)候是按照(zhào)黑(hēi)白灰平衡的(de)原理(lǐ)，所以漸變出來(lái)的(de)顔色不會亂，很有韻律，所以它的(de)配色也(yě)是成立的(de)。

案例4

我們回到之前互補色的(de)這(zhè)個(gè)畫(huà)面，我們用(yòng)黑(hēi)白灰的(de)平衡法測試一下(xià)看是什(shén)麽樣的(de)效果？

我們發現紅綠(lǜ)都是灰色的(de)。因爲當你直接用(yòng)紅綠(lǜ)互補的(de)時(shí)候，畫(huà)面會很刺眼，辣眼睛對(duì)吧。這(zhè)時(shí)候我們需要中性色黑(hēi)白的(de)介入去控制畫(huà)面的(de)平衡，這(zhè)樣的(de)紅綠(lǜ)互補才會成立而且更美(měi)觀。

比如我用(yòng)這(zhè)個(gè)案例給你解釋一下(xià)：

當我再綠(lǜ)色上面加個(gè)紅色。哇，是不是非常的(de)辣眼睛、刺眼、難受。當我加上黑(hēi)白之後，這(zhè)個(gè)辣眼睛的(de)程度是不是被削弱了(le)。

小結：黑(hēi)白灰的(de)平衡能有效把控色彩的(de)穩定，能控制互補色的(de)不平衡。

小技能：利用(yòng)灰度模式可(kě)以檢測畫(huà)面的(de)黑(hēi)白灰層級關系和(hé)比重。

那麽問題來(lái)了(le)！你可(kě)能覺得(de)這(zhè)些都要出現在畫(huà)面裏嗎？是不是要一定要用(yòng)絕對(duì)的(de)互補色？是不是都是要大(dà)面積出現？我隻能說每個(gè)概念都是相對(duì)的(de)，因爲色彩是個(gè)感性的(de)東西，我們要根據我們的(de)産品、需求來(lái)賦予他(tā)們該有的(de)色彩。我們需要不斷的(de)去看、去摸索、練習(xí)！

沒有不好的(de)顔色，隻有不好的(de)搭配

色彩是設計中最具有表現力和(hé)感染力的(de)因素，它通(tōng)過人(rén)們的(de)視覺感受産生一系列的(de)生理(lǐ)、心理(lǐ)感受，喚起用(yòng)戶不同的(de)情緒。