畫(huà)面中的各個(gè)元素合理的、清晰的、有節(jié)奏的組合在一起，使整個(gè)畫(huà)面看起來(lái)更加的舒適、愉悅和協(xié)調(diào)。

在我們做設(shè)計(jì)的時(shí)候，很多同學(xué)可能都會(huì)遇到一種情況，客戶(hù)或需求方看完設(shè)計(jì)稿后一邊摸著下巴一邊說(shuō)：“我總感覺(jué)少了點(diǎn)什么…… 你再改改?！?或者說(shuō)：“太平了”、“有點(diǎn)單調(diào)” 其實(shí)這些都是缺乏層次的表現(xiàn)。

而什么是層次感？

把畫(huà)面中的各個(gè)元素合理的、清晰的、有節(jié)奏的組合在一起，使整個(gè)畫(huà)面看起來(lái)更加的舒適、愉悅和協(xié)調(diào)。是不是感覺(jué)很深?yuàn)W？好吧，換句簡(jiǎn)單的話(huà)來(lái)說(shuō)就是——不多、不少，看起來(lái)舒服正好！

我的這篇文章分為3個(gè)章節(jié)，而每個(gè)章節(jié)都有若干細(xì)分的知識(shí)點(diǎn)，各位看官請(qǐng)仔細(xì)看哦！

一.  畫(huà)面的層次

1. 使用點(diǎn)、線(xiàn)、面來(lái)分割畫(huà)面

點(diǎn)、線(xiàn)、面是設(shè)計(jì)中最基本的設(shè)計(jì)元素，學(xué)過(guò)平面構(gòu)成的同學(xué)應(yīng)該都有些了解，連點(diǎn)成線(xiàn)、連線(xiàn)成面、而面縮小到一定程度就是點(diǎn)。而面的邊界就是線(xiàn)，線(xiàn)的寬度增加和點(diǎn)擴(kuò)散到一定的面積也就成為面。

我們下面來(lái)舉個(gè)例子。

上圖就基本可以把點(diǎn)、線(xiàn)、面的所有變化全部概括。下面我們來(lái)分析一下。

紅圈里的十字元素可以看作為“點(diǎn)”做為整體畫(huà)面中的裝飾元素出現(xiàn)。要注意的是所謂的“點(diǎn)”并不只是圓形的哦。任何在畫(huà)面中尺寸和面積相對(duì)最小的元素都可以看做成“點(diǎn)”。而畫(huà)面中的小圓點(diǎn)既可以看做“點(diǎn)”，也可以看作“面”。所以連點(diǎn)成面也是沒(méi)錯(cuò)的。

黃色圈里的線(xiàn)大家認(rèn)為是什么？我認(rèn)為它并不是線(xiàn)而是點(diǎn)。為什么呢？因?yàn)闊o(wú)論從它在畫(huà)面中的占比還是所起到的作用來(lái)看，它都屬于點(diǎn)的屬性。而線(xiàn)在哪？在綠色塊和紅色塊的交界處。還有色塊的邊界處。而這正說(shuō)明了“線(xiàn)”的一個(gè)重要的用途——分割。畫(huà)面中的“線(xiàn)”把整個(gè)畫(huà)面分割成了4個(gè)大小不一的區(qū)域，這種分割讓畫(huà)面更加有趣味性也更加有層次感。

而線(xiàn)分割出來(lái)的4個(gè)區(qū)域也就是元素“面”。

這個(gè)圖例不僅說(shuō)明了點(diǎn)線(xiàn)面的幾個(gè)重要的特征，也證明了點(diǎn)線(xiàn)面并不會(huì)因?yàn)樗男螤疃潭ǖ?，而是?huì)不斷變化的。

最后總結(jié)一下點(diǎn)線(xiàn)面的一些特點(diǎn)：

點(diǎn)：是最有裝飾性的元素，因此大多情況下在畫(huà)面中起到裝飾作用。

線(xiàn)：除了裝飾作用外還起到對(duì)畫(huà)面的分割、元素的穿插和對(duì)視覺(jué)引導(dǎo)的作用。

面：往往起到穩(wěn)定畫(huà)面和承載重要信息的作用。

另外要注意的是：點(diǎn)線(xiàn)面是組合使用的，想想看沒(méi)有面的襯托又怎么能顯示出點(diǎn)和線(xiàn)的特征呢？

通過(guò)這些設(shè)計(jì)案例我們可以分析并總結(jié)出，有效的利用點(diǎn)線(xiàn)面的組合可設(shè)計(jì)出層次豐富的作品。而我們要如何做呢？——置換臨摹。借鑒好的設(shè)計(jì)作品的點(diǎn)線(xiàn)面的構(gòu)成元素再加以利用和創(chuàng)新。

2. 留白

留白是我們?cè)O(shè)計(jì)中很常用的手法，留白除了讓畫(huà)面整潔、干凈和透氣外，更是對(duì)“面”的更深刻的理解和使用。現(xiàn)在用的非常廣泛的極簡(jiǎn)設(shè)計(jì)就是在留白的處理上用的比較好的一種設(shè)計(jì)類(lèi)型，這在我上一篇文章《想做出極簡(jiǎn)風(fēng)格的電商設(shè)計(jì)，只需要學(xué)會(huì)這3個(gè)方法》也詳細(xì)的介紹過(guò)。

我們這里再說(shuō)一下留白對(duì)層次的影響，先看幾個(gè)設(shè)計(jì)案例。

上面的幾個(gè)設(shè)計(jì)作品的共同特點(diǎn)就是有大量的設(shè)計(jì)留白，并且在留白的同時(shí)對(duì)畫(huà)面的層次進(jìn)行了處理，例如留白與主圖之間的大小對(duì)比，標(biāo)題與補(bǔ)充性文字之間的對(duì)比。

將上圖分成背景層，留白層，主體模特層，標(biāo)題文案層和功能文案層。從這里我們就能看出這幅設(shè)計(jì)的層次是如何設(shè)計(jì)的了。大家也不妨把自己喜歡的設(shè)計(jì)這樣分層解構(gòu)，來(lái)研究一下設(shè)計(jì)的層次。

3. 在攝影中找層次

現(xiàn)在的設(shè)計(jì)中，攝影圖片的使用也是越來(lái)越多了，尤其是質(zhì)量高的攝影作品往往能最大限度的提高設(shè)計(jì)的品質(zhì)。但是這是為什么大家想過(guò)嗎？其中一個(gè)原因是攝影中也存在著層次。

這個(gè)耳機(jī)大家熟悉吧，這就是用攝影的方式來(lái)做的，并且其中近景、中景、遠(yuǎn)景三個(gè)層次全都有。不僅看起來(lái)畫(huà)面非常細(xì)膩豐富，而且也品質(zhì)感十足。

但是如果圖片層次少怎么辦？很簡(jiǎn)單，我們可以使用文字來(lái)做為圖案元素來(lái)增加畫(huà)面層次。

二. 色彩的層次

1. 顏色的對(duì)比

使用對(duì)比色和反差大的顏色來(lái)設(shè)計(jì)也是增加層次感的一個(gè)常用方法，因?yàn)橛蟹浅?qiáng)烈的顏色對(duì)比，畫(huà)面的沖擊力會(huì)非常強(qiáng)烈，給人們的視覺(jué)觀感也會(huì)更加刺激。

黑黃對(duì)比是非常經(jīng)典配色方案，雖然只有兩個(gè)顏色，但是通過(guò)畫(huà)面中的文案和圖片的組合也會(huì)顯得非常豐富，在這種極簡(jiǎn)的配色中更加需要對(duì)點(diǎn)線(xiàn)面的合理運(yùn)用，否則會(huì)顯得有些單調(diào)。

從上面的設(shè)計(jì)來(lái)看，設(shè)計(jì)師在用黑黃配色的時(shí)候又用了黃色的對(duì)比色——藍(lán)色，這樣既可以讓畫(huà)面的顏色更加豐富不會(huì)單調(diào)，又會(huì)讓畫(huà)面中的一些重要元素凸顯出來(lái)，起到強(qiáng)調(diào)作用。

黃藍(lán)配色和紅綠配色也是經(jīng)常用到的經(jīng)典配色，上面兩個(gè)案例可以看到，黃藍(lán)配色多用飽和度比較高，這樣顯得年輕時(shí)尚有科技感，而另一個(gè)設(shè)計(jì)是紅綠藍(lán)的配色，飽和度較低，顯得更加復(fù)古和深沉。

2. 漸變色的流行

漸變色已經(jīng)流行了幾年，今年淘寶的手機(jī)app也是以漸變色來(lái)設(shè)計(jì)的，可見(jiàn)漸變色的使用范圍也是越來(lái)越大了。而漸變色本身就具有層次豐富的特點(diǎn)，因此，使用漸變色加上合理的點(diǎn)線(xiàn)面元素的搭配會(huì)在具有沖擊力的同時(shí)最大限度的豐富畫(huà)面的層次。

在我們?nèi)粘５脑O(shè)計(jì)中漸變色的使用還是需要更加精心的選擇顏色的色值，一般來(lái)說(shuō)會(huì)選擇同色漸變、鄰近色漸變和對(duì)比色漸變。而漸變的顏色數(shù)量也不宜超過(guò)2種。2種以上的漸變色就需要非常強(qiáng)的控色能力來(lái)駕馭了。（我這里說(shuō)的是在同一漸變色里的2種以上的顏色哦）

漸變色的使用大多都出現(xiàn)在UI設(shè)計(jì)中，而隨著UI設(shè)計(jì)的發(fā)展，Web端的設(shè)計(jì)，無(wú)論是網(wǎng)頁(yè)還是電商也有很多借鑒UI設(shè)計(jì)的設(shè)計(jì)方法和配色方法。

漸變色的配色是可以搭配使用的，例如上圖，都屬于同色漸變，但是這樣使用有一個(gè)規(guī)則，就是互相搭配的幾個(gè)漸變色的飽和度要基本一致，否則會(huì)出現(xiàn)顏色“花”的問(wèn)題。

3. 多種顏色搭配的控制

對(duì)于多顏色的設(shè)計(jì)我們要做的就是控制飽和度和明度，盡量使各個(gè)顏色的飽和度和明度保持協(xié)調(diào)的一致。無(wú)論是清淡的中國(guó)風(fēng)，還是濃烈的歐美風(fēng)，都會(huì)讓畫(huà)面豐富有層次的同時(shí)不會(huì)“亂掉”、“花掉”。

我們可以看到，上圖例里的顏色非常多，但是為什么我們會(huì)感覺(jué)非常豐富而又有層次呢？沒(méi)錯(cuò)，就是飽和度和明度的控制到位。

三. 文字的層次

1. 字體的對(duì)比

字體是我們?cè)O(shè)計(jì)中必須使用并且比較難的一個(gè)環(huán)節(jié)，但是正是這個(gè)讓大家比較鬧心的環(huán)節(jié)會(huì)使畫(huà)面的層次變得異常豐富，即使在只有文字沒(méi)有圖案的時(shí)候，只要排版合理也可以得到驚人的效果。

不同的字體表達(dá)不同的意境和涵義，尤其是中文字體傳承幾千年，每一個(gè)字都有特定的涵義。而西文主要是以襯線(xiàn)體和非襯線(xiàn)體的字形裝飾的變化為主。時(shí)而粗獷，時(shí)而纖細(xì)。

2. 文字的對(duì)比

這里的對(duì)比包括文字的字體、大小、粗細(xì)、顏色等等。為什么單單要挑對(duì)比來(lái)說(shuō)呢？因?yàn)閷?duì)比是最能拉開(kāi)并體現(xiàn)層次的方法，我們逐個(gè)來(lái)說(shuō)。

字體的顏色，上面兩個(gè)aranya的海報(bào)是個(gè)系列，分別把主題文字aranya的顏色換成綠色和藍(lán)色，一方面可以增加文案的層次感，另一方面可以與視覺(jué)主體的顏色統(tǒng)一。下面的案例大家可以試著分析一下。

最后說(shuō)一說(shuō)對(duì)齊，對(duì)齊是使畫(huà)面更加有秩序，看起來(lái)更合理且舒服。我們用這個(gè)海報(bào)來(lái)分析一下。

看這些藍(lán)色的線(xiàn)，就是這幅海報(bào)的對(duì)齊方式。

總結(jié)

其實(shí)層次是在綜合運(yùn)用了點(diǎn)線(xiàn)面的分割，色彩的搭配和文字的排版而形成的，并且在大小比例，顏色選擇，對(duì)齊等這些細(xì)節(jié)上精益求精，層次自然立現(xiàn)。