2020-4-27 資深UI設(shè)計(jì)者
今天跟大家聊聊設(shè)計(jì)中焦點(diǎn)配色這個(gè)話題。焦點(diǎn)這個(gè)詞對(duì)于設(shè)計(jì)師來說應(yīng)該不會(huì)感到陌生，但是這節(jié)課我們主要是從色彩的角度，來看看焦點(diǎn)在設(shè)計(jì)中的作用以及色彩焦點(diǎn)的重要性。首先我們要知道設(shè)計(jì)的目的就是通過視覺來傳達(dá)信息，而視覺的表現(xiàn)形式是有一定規(guī)律性的，在這些眾多的規(guī)律性當(dāng)中，其中有一條就是通過色彩來實(shí)現(xiàn)，而焦點(diǎn)配色就是色彩設(shè)計(jì)中最有效的一個(gè)手段。
其實(shí)無論是繪畫、攝影還是我們的設(shè)計(jì)，都存在大量的焦點(diǎn)配色，只是我們平時(shí)沒有特別去注意而已。比如莫奈的這幅《日出·印象》，我們來嘗試分析一下焦點(diǎn)的設(shè)置和移動(dòng)。
我想絕大多數(shù)人都應(yīng)該是這種移動(dòng)路線，也就是在大面積灰色調(diào)和冷色調(diào)中先被強(qiáng)暖色的太陽所吸引，然后是近景全黑色的船，接著順延到另一條船上，當(dāng)然每個(gè)人都會(huì)有所不同。
比如也可能是這種從遠(yuǎn)景到近景的順序。
也可能有的人是從近到遠(yuǎn)的觀看順序，但是無論你是哪一種，都不重要，為什么？
因?yàn)闊o論你的視線是怎么移動(dòng)的，都不會(huì)影響到我們最終焦點(diǎn)的歸屬。大家可以感受一下，當(dāng)你看這幅畫的時(shí)候，無論你先看哪后看哪，最終你的眼睛都會(huì)被這個(gè)橙紅色的太陽所吸引，這就是色彩焦點(diǎn)的魅力。
我們?cè)賮砜匆粋€(gè)攝影作品，這個(gè)跟剛才那幅畫來比，焦點(diǎn)就更加清晰了，而且這里也不需要焦點(diǎn)的移動(dòng)，很明顯焦點(diǎn)就是這個(gè)人物。
但是這個(gè)焦點(diǎn)是怎么通過色彩得到強(qiáng)化的呢？可能有的人會(huì)說這么明顯的人物肯定是焦點(diǎn)啊，但是你可以嘗試把人物后面的暖色光去掉看看，雖然人物同樣是這個(gè)畫面的焦點(diǎn)，但是一定沒有現(xiàn)在這樣搶眼，因?yàn)榕捅尘暗睦渖纬闪藦?qiáng)烈的對(duì)比。
所以無論是繪畫、攝影還是我們接下來會(huì)看到的設(shè)計(jì)，其中都會(huì)包含一種故意的或者是有意識(shí)的色彩焦點(diǎn)的安排，而這種焦點(diǎn)的形成是怎么實(shí)現(xiàn)的呢？其實(shí)就是通過色彩對(duì)比，因?yàn)橛猩蕦?duì)比必定產(chǎn)生焦點(diǎn)，即使沒有焦點(diǎn)我們也會(huì)努力去尋找焦點(diǎn)。我們聯(lián)想下平時(shí)的生活就會(huì)發(fā)現(xiàn)，無論是我們看到一幅畫面，或者是置身于一個(gè)真實(shí)的環(huán)境中，我們都會(huì)不自覺地去尋找色彩最突出或者最醒目的東西，這就是作為人的一種本能，也就是自然而然地去尋找焦點(diǎn)。
下面我們來看一些設(shè)計(jì)作品，我們看這三個(gè)界面，不能說沒有焦點(diǎn)，有，就是圖片，準(zhǔn)確地說應(yīng)該是沒有色彩焦點(diǎn)，所以我們接收到的就是圖片加上信息排在一起，我們很難在短時(shí)間內(nèi)區(qū)分出哪些是重要信息哪些是次要信息。我們不知道視線應(yīng)該落在哪里，因?yàn)闆]有突出的東西，這種不知所措會(huì)讓看的人感到不舒服，這就是沒有焦點(diǎn)會(huì)造成的一種情況。
同樣這三個(gè)界面，我們什么都不變，只是在想強(qiáng)調(diào)的部分填充一個(gè)顏色，這樣就會(huì)讓看的人可以通過色彩毫不猶豫地感受到焦點(diǎn)，這種交互才是人性化的交互，而這個(gè)簡(jiǎn)單的過程其實(shí)就是色彩設(shè)計(jì)。
我們?cè)賮砜匆粋€(gè)更加簡(jiǎn)單易懂的，比如現(xiàn)在這個(gè)，就是在一個(gè)藍(lán)色背景上編排純白的文字，可能通過字號(hào)和距離的安排我們也知道孰輕孰重，但是如果從色彩的角度來看還不夠，因?yàn)闆]有形成讓人快速識(shí)別的焦點(diǎn)。
如果在想強(qiáng)調(diào)的地方，適當(dāng)?shù)奶畛湟粋€(gè)顏色，那么瞬間就有了焦點(diǎn)，而這個(gè)顏色和背景色的對(duì)比越強(qiáng)，焦點(diǎn)就越明顯。
我們看這個(gè)海報(bào)，當(dāng)我們看到這個(gè)畫面的時(shí)候首先注意到的是什么？
首先注意的肯定是上方的圖片，其次會(huì)根據(jù)信息的層級(jí)大小去看主標(biāo)題，然后是次要信息。這種沒有設(shè)置色彩焦點(diǎn)的形式，雖然不太會(huì)影響信息的閱讀，但我們不妨試試有色彩焦點(diǎn)的情況。
當(dāng)原本就是畫面中比較重要的標(biāo)題信息和突出的英文被填充紅色之后，焦點(diǎn)就產(chǎn)生了并且得到強(qiáng)化。
這時(shí)候當(dāng)我們?cè)倏催@個(gè)作品，就可以在短時(shí)間內(nèi)迅速獲得信息，如果想繼續(xù)了解也可以繼續(xù)閱讀，這就是有焦點(diǎn)和沒焦點(diǎn)或者焦點(diǎn)不突出的差別。
我們看這個(gè) banner，這里我們不說它的版式怎么樣，我們就看色彩和焦點(diǎn)，這個(gè)畫面有什么問題呢？就是焦點(diǎn)設(shè)置錯(cuò)誤，什么意思？
也就是大家看這個(gè)畫面的時(shí)候，雖然都會(huì)先看月餅的圖片，然后是標(biāo)題到進(jìn)入專場(chǎng)，但是大家發(fā)現(xiàn)沒有，你的視線總會(huì)被中間這個(gè)粉色的花瓣吸引。
就是那種你不想看它，但是又不得不看的感覺，因?yàn)檫@個(gè)花瓣的顏色完全沒必要出現(xiàn)在這里，因?yàn)樗皇切畔?，為什么要充?dāng)焦點(diǎn)呢？這就是焦點(diǎn)錯(cuò)誤。
我們把花瓣去掉試試，這樣焦點(diǎn)就很清晰明確了。
現(xiàn)在我們知道了有焦點(diǎn)和沒焦點(diǎn)的差別，那焦點(diǎn)的設(shè)置其實(shí)也是有多種情況的。我們就拿這個(gè)網(wǎng)頁來舉例，版式部分保持不變，你想突出哪里就在哪里設(shè)置焦點(diǎn)。我們來看看通過色彩把焦點(diǎn)安排在不同的地方，這個(gè)頁面產(chǎn)生什么樣的效果。
比如我們可以把焦點(diǎn)設(shè)置在上半部分，也就是頂部的品牌和導(dǎo)航區(qū)域。
也可以把焦點(diǎn)設(shè)置在主標(biāo)題的文字信息上。
還可以設(shè)置在底部區(qū)域，形成色塊。
當(dāng)然也可以是自由式的焦點(diǎn)設(shè)置，強(qiáng)調(diào)你想強(qiáng)調(diào)的部分，這種情況下就有了焦點(diǎn)的移動(dòng)。
通過之前的案例分析我們總結(jié)一下有焦點(diǎn)的好處：首先它滿足了人的生理需求，其次滿足了視覺傳達(dá)的需求，最后滿足了審美的需求。也就是說我們所要做的視覺設(shè)計(jì)是需要傳達(dá)信息的，你得讓受眾看到你的信息才行，而要想有效的讓人看到信息，焦點(diǎn)的設(shè)置就要滿足前面三個(gè)需求，如果沒有滿足，一定程度上說明你的作品是失敗的。實(shí)際人都是充滿惰性的，也都不喜歡延遲，當(dāng)人們看到所有的信息在它應(yīng)該在的位置，不需要眼睛和大腦再去閱讀，這時(shí)候就得到了一種觀看和閱讀的滿足感。
說了這么多焦點(diǎn)的好處，下面我們就來看看如何通過配色形成或者強(qiáng)化焦點(diǎn)。首先我們要知道的就是焦點(diǎn)是通過對(duì)比實(shí)現(xiàn)的，而這里包括了色相對(duì)比形成焦點(diǎn)、冷暖對(duì)比形成焦點(diǎn)、深淺對(duì)比形成焦點(diǎn)、有彩色與無彩色對(duì)比形成焦點(diǎn)、花色與純色對(duì)比形成焦點(diǎn)、色彩面積對(duì)比形成焦點(diǎn)。
首先我們來看色相對(duì)比形成焦點(diǎn)，這里的色相對(duì)比通常是指互補(bǔ)色或?qū)Ρ壬g的對(duì)比，因?yàn)樯嗖町愒酱笤饺菀桩a(chǎn)生焦點(diǎn)。比如這個(gè)海報(bào)就是藍(lán)色和黃色的互補(bǔ)色對(duì)比，當(dāng)然需要注意的是，我們所列舉出的這些對(duì)比并不是單獨(dú)存在的，它們往往都是相互結(jié)合的，比如這個(gè)海報(bào)最明顯的就是色相上的互補(bǔ)色對(duì)比，當(dāng)然你也可以說是冷暖對(duì)比，同時(shí)也包括面積對(duì)比。
這個(gè)網(wǎng)頁作品，藍(lán)色與綠色形成了色相上的對(duì)比，同時(shí)它們二者又與背景形成了有彩色與無彩色的對(duì)比。
這個(gè)圣誕主題的 banner，整體是大面積的暗紅色，這就讓人物頭頂?shù)木G色圣誕樹成為了焦點(diǎn)，也就是色相對(duì)比中通過對(duì)比色形成焦點(diǎn)。
然后是冷暖色對(duì)比產(chǎn)生焦點(diǎn)，這個(gè)版面很簡(jiǎn)單，就是文字編排加上背景，但是很明顯，通過在強(qiáng)調(diào)的地方使用藍(lán)色與背景的粉紅色形成一種冷暖對(duì)比，讓焦點(diǎn)一目了然。
這個(gè)同樣也是紅色與藍(lán)色的冷暖對(duì)比強(qiáng)調(diào)焦點(diǎn)，讓人一眼就能抓住重點(diǎn)。
這個(gè)同樣也是通過冷暖對(duì)比形成焦點(diǎn)，只不過這個(gè)畫面并不是單一焦點(diǎn)的形式，是多個(gè)焦點(diǎn)從大到小或從近到遠(yuǎn)的移動(dòng)。
如果色相對(duì)比不夠明顯，那么通過單一色彩或近似色彩的深淺對(duì)比也可以很好的形成焦點(diǎn)，同樣純度和明度差異越大越容易產(chǎn)生焦點(diǎn)。比如這個(gè)畫面中的焦點(diǎn)面包與背景形成的就是深淺對(duì)比。
這個(gè)畫面整體是褐色的基調(diào)，但是杯子中的茶湯是比背景更亮一些的顏色，所以它自然而然地就成為了畫面的焦點(diǎn)，而且這個(gè)焦點(diǎn)也是符合這個(gè)版面的設(shè)計(jì)邏輯的。
這個(gè)頁面的背景是偏深一些的粉紅色，當(dāng)然圖片肯定是這個(gè)畫面的第一焦點(diǎn)，但除此之外，這個(gè)畫面中還有另外兩個(gè)焦點(diǎn)，就是比背景偏暗一些的嘴唇，這就是利用深淺色對(duì)比形成焦點(diǎn)。
焦點(diǎn)的作用以及如何強(qiáng)調(diào)焦點(diǎn)都很好理解和操作，但是設(shè)置焦點(diǎn)背后的原理是什么呢？就是我們之前講過的色彩營(yíng)銷，因?yàn)樵O(shè)計(jì)的目的是通過視覺傳達(dá)信息，而傳遞信息的目的是為了營(yíng)銷，所以答案也就很明了了。也就是如何設(shè)置焦點(diǎn)以及讓誰成為焦點(diǎn)，這背后的邏輯要依據(jù)營(yíng)銷的目的，換句話說焦點(diǎn)的設(shè)置一定要滿足以上的需求，假如設(shè)置了錯(cuò)誤的焦點(diǎn)，就會(huì)適得其反，倒不如不設(shè)置焦點(diǎn)了，這個(gè)道理大家一定要明白。
我們接著往下看，下一個(gè)就是有彩色與無彩色對(duì)比產(chǎn)生焦點(diǎn)。比如我們看上面這個(gè)海報(bào)，圖片整體是黑白的，只有雨傘的部分是紅色，非常醒目的被凸顯出來，當(dāng)然就是第一焦點(diǎn)，其次就是紅色的標(biāo)題性文字。因?yàn)楹谏c紅色很好的對(duì)比效果，所以類似這種形式的攝影作品大家也一定見過很多，就是整體是黑白，個(gè)別地方用紅色的形式。
雖然這個(gè)網(wǎng)頁頁面上的有彩色并不是單一色彩，但是與背景黑色的搭配，整體上依然是有彩色與無彩色搭配所產(chǎn)生的對(duì)比，從而產(chǎn)生焦點(diǎn)。
這個(gè)雖然也是有彩色與無彩色的對(duì)比，但是這個(gè)很巧妙，因?yàn)樵O(shè)計(jì)者并沒有直接在主標(biāo)題上填充有彩色，而是在標(biāo)題下方使用了一個(gè)有彩色的色塊，這也是一種變相突顯焦點(diǎn)的方式。
接下來是花色與純色對(duì)比產(chǎn)生焦點(diǎn)，這個(gè)算是很常見很通用的一種形式了，尤其是照片上編排文字的形式，如果圖片本身的色彩就比較豐富，那么文字色必然要使用單一的色彩才能保證很好的識(shí)別。
這個(gè)雜志封面的背景是由多種色彩所形成的插畫圖形，而人物一身黑色位于中間形成了第一焦點(diǎn)，其次是位于人物上的綠色文字，可以說既是有彩色與無彩色的對(duì)比，又是有彩色與花色之間的對(duì)比。
這個(gè)海報(bào)上的圖片雖然色彩并沒有多純，但是由于色彩比較分散，所以可想而知，在它上方編排文字難免會(huì)造成識(shí)別度很低的情況，所以設(shè)計(jì)師也很巧妙地使用了添加色塊的方式，利用這種圖片花色與色塊純色的對(duì)比來突出焦點(diǎn)。
最后就是通過色彩面積大小產(chǎn)生焦點(diǎn)，這種面積的對(duì)比可以說是非常常見的，可以說大部分有色彩焦點(diǎn)的畫面都是之前的那幾種形式與面積對(duì)比的一個(gè)結(jié)合，但是并沒有誰重要誰不重要一說，就比如這個(gè)海報(bào)上的紅色圓形，無論你是把它的面積放大，還是把它換成和藍(lán)色相近的顏色，焦點(diǎn)的效果都沒有現(xiàn)在的好。所以我們?cè)诰唧w設(shè)計(jì)配色的時(shí)候千萬不要有強(qiáng)迫癥，因?yàn)檫@些方法往往都是結(jié)合使用的。
這個(gè)也是面積對(duì)比產(chǎn)生的焦點(diǎn)，同時(shí)又有藍(lán)色與紅色的冷暖對(duì)比。
這個(gè)頁面也是，通過在大面積綠色調(diào)中使用一個(gè)紅色塊，快速形成對(duì)比，從而確定焦點(diǎn)。
以上我們主要講解了通過配色形成焦點(diǎn)的一些方法，但其實(shí)細(xì)心的同學(xué)就會(huì)發(fā)現(xiàn)，這里面還是有一些潛規(guī)則的，有的是和色彩有關(guān)，有的可能和色彩無關(guān)。比如說同樣的色彩或同樣大小的對(duì)象，具象的東西比抽象的東西容易形成焦點(diǎn)、人物比場(chǎng)景或風(fēng)景容易形成焦點(diǎn)、圖像比文字容易形成焦點(diǎn)、標(biāo)題文字比內(nèi)文容易形成焦點(diǎn)、暖色比冷色容易形成焦點(diǎn)、強(qiáng)對(duì)比比弱對(duì)比容易形成焦點(diǎn)，最后我們就分別來看一下。
具象的事物比抽象的事物容易形成焦點(diǎn)，這個(gè)似乎沒什么可說的，大家應(yīng)該都能明顯的感覺到，就比如這個(gè)海報(bào)，即使人臉的周圍有著密密麻麻的抽象圖像，我們的注意力依然在人臉的部分。
人物要比場(chǎng)景更容易產(chǎn)生焦點(diǎn)，比如這個(gè)海報(bào)，同時(shí)存在兩張圖片，雖然上方的圖片是一匹馬不是人，但是道理是一樣的，我們的視線總是想關(guān)注這個(gè)馬的眼睛，而下方的海水我們可能只是一掃而過。
圖片比文字更容易形成焦點(diǎn)，這個(gè)也是無需多說的一點(diǎn)，因?yàn)榧词苟际呛诎椎膱D片和文字，我們也會(huì)首先注意到圖片，這是圖片所具有的天然魅力。比如這個(gè)海報(bào)，假如我們把圖片遮掉，那么紅色的「魂」字毋庸置疑就是第一焦點(diǎn)，因?yàn)樵谝欢押谏淖种兴鼘?shí)在太顯眼了，但是加上人物圖片的話，就沒有多少人會(huì)去關(guān)注「魂」字了。
標(biāo)題比內(nèi)文更容易產(chǎn)生焦點(diǎn)，這是因?yàn)闃?biāo)題所具有的天然優(yōu)勢(shì)，也就是面積優(yōu)勢(shì)，比如我們看這個(gè)海報(bào)，其實(shí)它這里的標(biāo)題使用與圖片一樣的藍(lán)色并不是很突出，雖然日期和副標(biāo)題使用了色相對(duì)比，也確實(shí)成為了焦點(diǎn)，但是對(duì)于主標(biāo)題的影響并不是很大，我們依然不會(huì)忽略掉主標(biāo)題，這就是面積原因所造成的，因?yàn)樗銐虼蟆?
暖色比冷色更容易形成焦點(diǎn)，這個(gè)海報(bào)就是一個(gè)很好的說明，因?yàn)楹?bào)中兩個(gè)圖片大小相當(dāng)，唯一的區(qū)別就是一個(gè)是暖色一個(gè)是冷色，那么哪個(gè)更吸引你呢？一定是暖色，如果你說你就是被冷色所吸引那也沒關(guān)系，但是你自己保留意見，我不接受反駁。
最后就是強(qiáng)對(duì)比大于弱對(duì)比，比如我們看這個(gè)海報(bào)，其實(shí)本身背景色上有色相的對(duì)比，但是因?yàn)閷?duì)比不夠強(qiáng)，所以就讓上方的紅色成為了焦點(diǎn)，因?yàn)榧t色與整體背景形成了強(qiáng)烈的深淺對(duì)比。
簡(jiǎn)單總結(jié)一下，首先我們通過一些案例說明了色彩焦點(diǎn)的重要性，也就是滿足了人的三種需求：生理需求、視覺傳達(dá)的需求以及審美的需求。其次我們講解了如何形成或強(qiáng)調(diào)焦點(diǎn)，也就是通過一些色彩對(duì)比來實(shí)現(xiàn)。最后補(bǔ)充了一些焦點(diǎn)配色中存在的潛規(guī)則，也就是哪些內(nèi)容或形式具有形成焦點(diǎn)的天然優(yōu)勢(shì)。當(dāng)然這一切的落腳點(diǎn)還要?dú)w到視覺傳達(dá)以及色彩營(yíng)銷上。
文章來源：優(yōu)設(shè) 作者：研習(xí)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com