第13章　解讀設(shè)計中的層次

因為經(jīng)常拍照的緣故，我經(jīng)常會無意中發(fā)現(xiàn)攝影上的一些觀察和技巧其實也可以運用在設(shè)計當中，并讓你的設(shè)計作品更加飽滿和有層次感，那么如何讓自己的作品富有層次？今天給大家分享幾個技能。

需要說明的是，增加層次的技巧其實說白了主要就是運用對比或呼應(yīng)的手法，這一章我就先給大家講一講對比在設(shè)計當中的運用，并現(xiàn)場手把手演示到底該如何解鎖這些技能！

不過需要說明的是，對比其實有很多種，比如動靜對比、明暗對比、大小對比、色彩對比、虛實對比、遠近對比、繁簡對比等。

13.1　動靜對比

先來以一張照片舉例，比如左下這張照櫥窗的照片，這樣看原本是安安靜靜的對不對？這樣其實也不是不好看，但總感覺缺少點什么。

后來，我給它加了一個人影并動感模糊了一下，如下圖所示，感覺是不是立馬變了？畫面里面靈動起來了，因為這個人物的動與背景櫥窗的靜形成了對比，反而使得櫥窗里的商品視覺上更加突出了，畫面層次感也就出來了。

大家可以再對比看看：

而像我這種處理方法其實就運用到了動靜對比和遠近對比，比如人物既充當了動態(tài)的元素，也充當了近景，而櫥窗既充當了靜態(tài)的元素，也充當了遠景（當然了，如果是更加廣闊的空間，比如是在展覽館里，也許這種對比效果會更加明顯一些）。

這種手法在Banner設(shè)計、陳列設(shè)計、攝影、影視等中都經(jīng)常會用到。

比如下圖，就運用到了很多種對比的手法：

13.2　明暗對比

有時候總感覺畫面太過于平了太空了怎么辦？其實只需要利用明暗對比，就可以解決這個問題，如下圖所示。

沒有明暗對比的時候，畫面是比較平的，如下圖所示。

而通過將畫面中間加亮，四周壓暗之后，畫面立馬聚焦了，層次感也出來了，如下圖所示。

將四周壓暗，畫面就聚焦在中心了，是不是立馬感覺空間層次感出來了？上圖就運用到了動靜對比、明暗對比、遠近對比等手法。

13.3　大小對比

同樣是拿這個粉色的Banner圖做示例，假設(shè)畫面中所有的元素都是一樣大小比例的話，整個畫面就會沒有重點，也就沒有層次，如下圖所示。

上圖簡直亂糟糟對不對？但是有了大小對比之后呢？畫面立馬層次清晰了，如下圖所示。

在電商設(shè)計中這種大小對比的玩法是非常普遍的，因為我們既要氛圍渲染，也要重點突出，那么主角就該只有一個，讓主角最大最清晰最亮眼就是最常用的突出它的方式，其他配角都要比它弱才好，我們接著往下看其他對比方式。

13.4　色彩對比

說到色彩對比，大家應(yīng)該都會想到對比色吧（假設(shè)選定一個顏色為基準色，那么在24色相環(huán)上與這個基準色相距120度到150度之間的顏色就與這個基準色互為對比色），如下圖所示。

那么再次以我們前面做的這個玫粉色Banner為例，玫粉色就是在玫紅色里面添加了白色的顏色，它們都屬于紅色系的顏色，所以，我們可以在藍色系和綠色系里選擇一種對比色，看在這個畫面中加入色彩對比后會有什么不同的感受吧。

因為一個Banner畫面是由背景、文案、產(chǎn)品（模特）、點綴元素組成的，所以我在這里分別改變它們的顏色為對比色給大家看看會有什么不同的感受。

假設(shè)將某一個點綴元素變?yōu)榉鬯{色，這樣一看是不是不太合適？視覺焦點全都跑到點綴元素身上去了。

假設(shè)將背景變?yōu)榉鬯{色，這樣看也不是不可以但總感覺有點生硬對不對？因為背景的顏色跟產(chǎn)品以及點綴元素毫無關(guān)聯(lián)，但是偏偏它又是畫面里占比比較大的主色，所以也不太合適。

那么我們協(xié)調(diào)一下看看呢？比如說背景色換為了粉藍色，同時把前景的點綴元素做一些顏色修改，這樣一來，整個畫面就變得協(xié)調(diào)多了是不是？

但是跟原圖對比的話，其實還是要看需求方想要重點體現(xiàn)什么，這兩種配色其實都可以，但是明顯會感覺畫面里出現(xiàn)對比色之后整體畫面就活躍了許多，看起來可能就是整體氛圍感強過產(chǎn)品信息了，而且如果設(shè)計師把握不好的話會讓整體顯得凌亂，而下圖的同色系顏色整體畫面就會更安靜一些，產(chǎn)品信息也更突出一些，并且也更不容易出錯，是比較保險和耐看的選擇方向。

所以色彩對比的運用確實可以讓畫面更有層次和熱鬧氛圍，但是對于基礎(chǔ)不太好的設(shè)計師來說可能難度就會大一些，同時也要明白你用色彩對比手法的目的是什么，是突出產(chǎn)品呢？還是突出氛圍呢？想清楚這個問題才好做出合適的配色和設(shè)計。

13.5　虛實對比

依舊是以我們這個玫粉色Banner為例，其實我這里就運用到了虛實對比的手法，目的就是讓畫面有層次，讓主體突出，而如果沒有這些虛實對比會怎么樣呢？

我們對比來看看，下圖是所有元素都是實的情況，整體的重點就有點不明顯了對不對，甚至那顆大棒棒糖還搶了香水的風頭。

而有虛實對比之后的效果呢？明顯畫面層次就出來了，如下圖所示。

所以這里也有一個技巧可以傳授給大家，假設(shè)我們不小心讓點綴元素過大了，那么我們其實可以通過虛化它來達到弱化它的目的，那些不重要的元素我們都可以通過虛化的方式讓它弱化掉。

13.6　遠近對比

所謂遠近對比，其實就是通過虛實對比和大小對比來體現(xiàn)的，因為根據(jù)透視原理，近則大，遠則小，近到一定距離物體會變虛，遠到一定距離物體也會變虛，所以我們會看到這個粉色Banner里分別有近景、中景、遠景幾個層，香水作為中景是完全清晰的，而遠景的小點綴物和近景的大點綴物分別都被我虛化了，從而也就營造出了畫面層次感。

這里還要說明的是，其實所謂近和遠其實都是相對的，比如中間的香水相對于我上面標出的近景遠景來說是中景，但是相對于FASHION來說則是前景，而FASHION是中景，背景圖層是遠景，大家只要記住任何對比其實都是相對的就好了。

13.7　繁簡對比

所謂繁簡對比，其實分為兩個方面，一方面是主體周圍所在環(huán)境和外面環(huán)境比有繁簡之分，另一方面是主體自己跟外界比有繁簡之分。

我依舊拿這個玫粉色Banner舉例，說到主體周圍所在環(huán)境和外面環(huán)境比有繁簡之分，那么可以看我不斷地去掉點綴元素后會有什么感覺變化。

原圖：

去掉部分元素后：

繼續(xù)去掉部分元素后：

將所有點綴元素去掉后：

所以你可以理解為，簡就是多留白，畫面會更加透氣，但是也會讓人感覺到高冷或疏遠，不敢靠近，常用于大牌產(chǎn)品或性冷淡文藝風里面，而繁就是復(fù)雜熱鬧，越繁越熱鬧畫面氛圍越濃烈，越讓人感覺可以靠近，很多低價促銷風格的設(shè)計都是比較繁雜的，但是繁也不意味著都低端，主要在于一個度的問題，主要看你如何去控制這個度了，高手也可以把繁雜的東西做得很高級。

而當我將這個香水放置在背景比較復(fù)雜的畫面上的時候，你會發(fā)現(xiàn)，這張圖其實差不多沒法看了，也找不到重點，原因就是背景相對于香水來說太過于繁雜了，如下圖所示。

可是，當我們將背景虛化后，通過虛實對比，我們將原本繁雜的畫面變?yōu)榱撕啙嵉漠嬅妫黧w終于又突顯出來了。

所以其實很多手法和原理都是相通的，基礎(chǔ)牢固了，思維開闊了自然就有方法去補救，并且任意切換這些手法和原理從而達到讓你的畫面有層次的目的。