3招讓你的設計更有層次感

愛生活！愛設計！

文章版權歸：蒸個饅頭所有

在我們做設計的時候，很多同學可能都會遇到一種情況，客戶或需求方看完設計稿後一邊摸著下巴一邊說：「我總感覺少了點什麼... 你再改改。」 或者說：「太平了」、「有點單調」 其實這些都是缺乏層次的表現。

目錄

一、畫面的層次

1.使用點、線、面來分割畫面

2.留白

3.在攝影中找層次

二、色彩的層次

1.顏色的對比

2.漸變色的流行

3.多種顏色搭配的控制

三、文字的層次

1.字體的對比

2.文字的對比

而什麼是層次感？

把畫面中的各個元素合理的、清晰的、有節奏的組合在一起，使整個畫面看起來更加的舒適、愉悅和協調。是不是感覺很深奧？好吧，換句簡單的話來說就是——不多、不少，看起來舒服正好！

我的這篇文章分為3個章節，而每個章節都有若干細分的知識點，各位看官請仔細看哦！

一、畫面的層次

1.使用點、線、面來分割畫面

點、線、面是設計中最基本的設計元素，學過平面構成的同學應該都有些了解，連點成線、連線成面、而面縮小到一定程度就是點。而面的邊界就是線，線的寬度增加和點擴散到一定的面積也就成為面。

上面的這幾句話看起來比較複雜，其實仔細想想這就是世界裡一切元素的原理甚至是宇宙星空。我們下面來舉個例子。

上圖就基本可以把點、線、面的所有變化全部概括。

下面我們來分析一下。

紅圈裡的十字元素可以看作為「點」做為整體畫面中的裝飾元素出現。要注意的是所謂的「點」並不只是圓形的哦。任何在畫面中尺寸和面積相對最小的元素都可以看做成「點」。

而畫面中的小圓點既可以看做「點」，也可以看作「面」。所以連點成面也是沒錯的。

黃色圈裡的線大家認為是什麼？

我認為它並不是線而是點。為什麼呢？

因為無論從它在畫面中的佔比還是所起到的作用來看，它都屬於點的屬性。而線在那？在綠色塊和紅色塊的交界處。還有色塊的邊界處。

而這正說明了「線」的一個重要的用途——分割。畫面中的「線」把整個畫面分割成了4個大小不一的區域，這種分割讓畫面更加有趣味性也更加有層次感。

而線分割出來的4個區域也就是元素「面」。

這個圖例不僅說明了點線面的幾個重要的特徵，也證明了點線面並不會因為它的形狀而固定的，而是會不斷變化的。

最後總結一下點線面的一些特點：

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

線：除了裝飾作用外還起到對畫面的分割、元素的穿插和對視覺引導的作用。

面：往往起到穩定畫面和承載重要信息的作用。

另外要注意的是：點線面是組合使用的，想想看沒有面的襯托又怎麼能顯示出點和線的特徵呢？

通過這些設計案例我們可以分析並總結出，有效的利用點線面的組合可設計出層次豐富的作品。

2.留白

留白是我們設計中很常用的手法，留白除了讓畫面整潔、乾淨和透氣外，更是對「面」的更深刻的理解和使用。

而現在用的非常廣泛的極簡設計就是在留白的處理上用的比較好的一種設計類型。

我們這裡再說一下留白對層次的影響，先看幾個設計案例。

上面的幾個設計作品的共同特點就是有大量的設計留白，並且在留白的同時對畫面的層次進行了處理，例如留白與主圖之間的大小對比，標題與補充性文字直接的對比。

我把上面的圖做了個處理，分成背景層，留白層，主體模特層，標題文案層和功能文案層。從這裡我們就能看出這幅設計的層次是如何設計的了。大家也不妨把自己喜歡的設計這樣分層解構，來研究一下設計的層次。

3.在攝影中找層次

現在的設計中，攝影圖片的使用也是越來越多了，尤其是質量高的攝影作品往往能最大限度的提高設計的品質。但是這是為什麼大家想過嗎？其中一個原因是攝影中也存在著層次。

這個裝B耳機大家熟悉吧，這就是用攝影的方式來做的，並且其中近景，中景，遠景三個層次全都有。

不僅看起來畫面非常細膩豐富，而且也品質感十足。

但是如果圖片層次少怎麼辦？

很簡單，我們可以使用文字來做為圖案元素來增加畫面層次。

二、色彩的層次

1.顏色的對比

使用對比色和反差大的顏色來設計也是增加層次感的一個常用方法，因為有非常強烈的顏色對比，畫面的衝擊力會非常強烈，給人們的視覺觀感也會更加刺激。

黑黃對比是非常經典配色方案，雖然只有兩個顏色，但是通過畫面中的文案和圖片的組合也會顯得非常豐富，在這種極簡的配色中更加需要對點線面的合理運用否則會顯得有些單調。

從上面的設計來看，設計師在用黑黃配色的時候又用了黃色的對比色——藍色，這樣既可以讓畫面的顏色更加豐富不會單調，又會讓畫面中的一些重要元素凸顯出來，起到強調作用。

黃藍配色和紅綠配色也是經常用到的經典配色，上面兩個案例可以看到，黃藍配色多用飽和度比較高，這樣顯得年輕時尚有科技感，而另一個設計是紅綠藍的配色，飽和度較低，顯得更加復古和深沉。

2.漸變色的流行

漸變色已經流行了幾年，今年淘寶的手機app也是以漸變色來設計的，可見漸變色的使用範圍也是越來越大了。而漸變色本身就具有層次豐富的特點，因此，使用漸變色加上合理的點線面元素的搭配會在具有衝擊力的同時最大限度的豐富畫面的層次。

在我們日常的設計中漸變色的使用還是需要更加精心的選擇顏色的色值，一般來說會選擇同色漸變、鄰近色漸變和對比色漸變。而漸變的顏色數量也不宜超過2種。2種以上的漸變色就需要非常強的控色能力來駕馭了。（我這裡說的是在同一漸變色里的2種以上的顏色哦）

漸變色的使用大多都出現在UI設計中，而隨著UI設計的發展，web端的設計，無論是網頁還是電商也有很多借鑒UI設計的設計方法和配色方法。

漸變色的配色是可以搭配使用的，例如上圖，都屬於同色漸變，但是這樣使用有一個規則，就是互相搭配的幾個漸變色的飽和度要基本一致，否則會出現顏色「花」的問題。

3.多種顏色搭配的控制

對於多顏色的設計我們要做的就是控制飽和度和明度，盡量使各個顏色的飽和度和明度保持協調的一致。無論是清淡的中國風，還是濃烈的歐美風，都會讓畫面豐富有層次的同時不會「亂掉」、「花掉」。

我們可以看到，上面的幾個圖例里的顏色非常多，但是為什麼我們會感覺非常豐富而又有層次呢？

沒錯，就是飽和度和明度的控制到位。

三、文字的層次

1.字體的對比

字體是我們設計中必須使用並且比較難的一個環節，但是正式這個讓大家比較鬧心的環節會使畫面的層次變得異常豐富，即使在只有文字沒有圖案的時候，只要排版合理也可以得到驚人的效果。

不同的字體表達不同的意境和涵義，尤其是中文字體傳承幾千年每一個字都有特定的涵義。而西文主要是以襯線體和非襯線體的字形裝飾的變化。時而粗獷，時而纖細。

2.文字的對比

這裡的對比包括文字的字體、大小、粗細、顏色等等。為什麼單單要挑對比來說呢？因為對比是最能拉開並體現層次的方法，我們逐個來說。

我來那這個作品來分析解構一下，30%是文字裡面積最大的，也同樣是畫面元素里佔比最大的，通過DISCOUNT VOUCHER的解釋說明這是折扣信息，而這個解釋也是畫面里第二大佔比的文字。然後就是下面的時間、地址、電話等信息，使用最小號的文字。

通過這三種文字大小來把層次拉開，並且一下就得到3個層次，在加上最後面的花紋背景、白色背景和金色蝴蝶結總共是6個層次。另外為了統一畫面，文字的字體都採用了襯線體。

上面的這兩個海報也是同樣的道理，大家可以解讀一下。

字體的顏色，上面兩個aranya的海報是個系列，分別把主題文字aranya的顏色換成綠色和藍色，一方面可以增加文案的層次感，另一方面可以與視覺主體的顏色統一。下面是一些設計的案例大家可以試著分析一下。

最後說一說對齊，對齊是使畫面更加有秩序，看起來更合理且舒服。我們用上面這個海報來分析一下。

看這些藍色的線，就是這幅海報的對齊方式。

總結

其實層次是在綜合的運用了點線面的分割，色彩的搭配和文字的排版而形成的，並且在大小比例，顏色選擇，對齊等這些細節上精益求精，層次自然立現。

每日一設計挑戰

每天一個不加班的理由

設計師交流QQ群：

推薦訂閱

Dribbbble

【設計薦書】《品牌至上》+《書法字體設計》

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 零設計 的精彩文章: