個人公眾號：魚大大設計鋪，ID：ydsjp2018

轉載請私信作者，並註明來源公眾號：美工美邦

「層次感」這個詞在設計中的出現頻率是很高的，主要體現在信息層級關係和視覺豐富度這兩點，而缺少層次感的設計會給人一種信息雜亂、畫面單調的視覺感受，甚至枯燥、乏味，這也恰恰與設計目的相悖！那麼當我們的作品的出現層次感缺失時，應該從哪些方面著手改善、解決呢？本期內容希望能對大家有所幫助。

營造視覺元素的差異化可以起到很好的改變畫面信息層級關係的作用，從而增強設計作品的層次感，這和對比手法很雷同，無論是畫面中的視覺元素多還是少，都要做到有主有次、有大有小、有粗有細、元素與元素之間形成對比關係，舉個簡單的例子：

很明顯第一排的形狀之間是完全相同的，在視覺上給人的感覺就會很平，缺少變化；而下面兩排在視覺上都營造了一個與周圍存在存在差異化的視覺元素，使得整體在視覺上有了閱讀的先後順序，形成了簡單的信息層級關係！

當畫面中的視覺元素相同或者相似時，信息的層級關係就相對而言不容易體現出來，那麼此時就需要我們營造具有差異化的視覺元素打破這一現象，從而增強畫面的視覺層次感，無論切入點是什麼。再比如我們看到的風景照：

從近到遠在視覺上存在著很明顯的差異化，比如：近實遠虛、近大遠小、近處的飽和度高遠處飽和度低、近處的明度暗遠處的明度亮等等，大自然的風景本身就能很好的詮釋視覺層次感，所謂「設計源於生活」正是如此。那麼這些應用到設計中應該如何體現呢？下面再看一個例子：

如果產品這麼擺放的話，那麼何來層次感而言呢？只能理解為重要的事情重複三遍

。做個小小的改變：

畫面有了大小關係，故而有了主次關係，此時視覺的層次感已經有所體現：

大小與虛實的雙重結合，視覺層次感更加強烈了，加點透視看看：

這裡做了點透視效果，結合大小、虛實的變化，是不是有種由近到遠的既視感，通過營造視覺元素的差異化，視覺層次感也更加強烈，這種虛實結合的形式在設計中也非常實用，下面我們再看案例：

這種虛實對比的形式也是視覺元素差異化體現形式之一，很直觀的提升了整體的視覺層次感，包括在一些文字排版也很實用。所以當我們的作品整體視覺層次感不夠強烈時，不妨試試通過營造視覺元素差異化的形式進行提升和改變，只是既然用了這種表現手法，就要做的足夠明顯，否則只會適得其反。

我們前面說了，提升視覺層次感可以從兩個點切入，即：提升信息層次感以及畫面整體豐富度，而裝飾性元素的使用剛好可以契合這兩點，它既有提升信息層次感的作用，又能起到很好豐富畫面的作用，下面我們看個案例：

通過上下兩個案例的對比我們發現：

第一：上側案例畫面整體的豐富度欠缺，甚至感覺有些空；而且文字信息沒有形成很好的對比關係，信息的層次感受也比較單一，所以給人的感覺層次感不夠。

第二：下側案例中用到了一些裝飾性的文字、線條、形狀符號等，首先在視覺豐富度上較上側案例中就提升了很多，不會給用戶一種空的感覺；其次這些裝飾性的元素與主文案在視覺上也形成了很好的對比，使得畫面有了主次、大小之分，視覺形態的變化形式更多，視覺層次感也更加強烈。第三：裝飾性元素可以是文字、線條、形狀、圖形等等一些點狀、線狀的元素，甚至於一些塊狀元素（比如：水印文字、產品等），目的是通過增加畫面豐富度和視覺形態變化的多樣性提升整體視覺層次感。

需要注意：裝飾性元素也不能過多的使用，因為過量的使用很容易在視覺上形成散亂、不夠整體的情況出現，要根據實際情況合理使用！

使用肌理是設計中非常實用的一個設計手法，肌理有著很好的豐富畫面、增加細節、提升層次感的作用，比如可以用作一些海報的底紋、文字的材質、甚至是一些形式感很強的肌理可以作為畫面的抽象主體，下面舉個例子：

案例中將遠山風景圖片通過透明度調整作為肌理使用，這樣做的好處在於：首先肌理相較於整個畫面來說不是那麼顯眼，這樣就避免了搶了主體；其次因為遠山給人的視覺感受就是層次感強烈，而這裡當做肌理即起到了一定的填充、豐富的作用，又保留了一些遠山的屬性，在視覺上層次感更加強烈。

再比如一些文字也會使用肌理，用於增強文案信息的視覺層次感受，比如：

主要字體使用肌理會在讓其形象更加鮮明，與正常文案形成很好的對比，也能間接的提升文字排版的視覺層次感。

當作品視覺層次感不夠強烈時，我們可以轉化為思考如何提升畫面豐富度以及信息層次感，比如前面說的：對比、裝飾元素、肌理都可以與之對應起來，那麼為什麼說合理的使用色彩在一定程度上也能起到提升視覺豐富度的作用呢？下面舉個例子：

這裡是通過有彩色與無彩色的案例對比，以視覺感受來看：左側明顯比右側顯得更空一些，因為色彩也是一種信息傳達的媒介，也就是說顏色也在傳遞信息，所以當畫面顯得空、缺少層次感的時候，通過顏色的調整也能起到一定的增加視覺層次感的作用，舉個例子：

這裡只是改變了底色，在視覺豐富度上給人的感受差距一目瞭然，因為純白底會給人一種空、缺少內容的視覺感受，所以一般情況下我們的處理方式會選擇添加一些視覺元素，比如：裝飾性元素、材質、線條等等，現在我們又多了一個選項，就是無彩色向有彩色的改變，雖然這種方法有一定的侷限性，但是也不失為一種可行的解決方式。

其實這種營造前後疊加關係的方式在之前的文章中也提到過，其實就是尋找元素與元素之間的物理疊加關係，會給人一種很強烈的層次變化，對於提升畫面層次感能起到立竿見影的作用，比如：

案例中的文字與主體物之間存在著視覺上的前後疊加關係，給用戶更強烈的視覺層次感，這種營造前後疊加關係的處理手法在標題設計中也很實用。

透視也可以理解為營造空間關係的手法，當平面的視覺元素賦予其透視關係後，會形成一種類似三維空間的視覺感受，在一定程度上也能起到增強畫面視覺層次感的作用，下面舉個例子：

很明顯，透視的感覺會給人一種空間感、延伸感，視覺層次更加強烈，這種形式在日常的設計中也很實用，比如：

改變透視會在視覺上形成一種縱向的延伸感，空間上層次關係更加強烈，只是這種形式有一定的侷限性。

結合今天所說到的這些手法，通過不斷演變的形式下面我們簡單做一組文字排版的案例：

這就是一句普通的話，沒有主次、沒有修飾、毫無層次感，改變一下：

已經有了信息的層級關係，即大小對比，視覺元素之間形成了差異化的表現，還可以繼續深入：

通過改變顏色，對比更加強烈，層次感稍加增強，感覺還不夠？下面我們繼續再改：

這裡通過肌理、虛實結合以及改變字體形態的表現形式，使得整體視覺層次感又提升了一個檔次，如果還想繼續提升，那麼就要想，還缺少點什麼？比如裝飾性元素試一試？

問：設計師，還能再強烈點嗎？

答：emmm~我再試試（內心：頭髮都沒了，MMP...）

增加了裝飾性元素之後，畫面整體的豐富度提升了很多，而且對比的形式更多元化；案例中主要用到了：差異化元素、對比、肌理、裝飾性元素這四種表現形式，當然這不也許不是最好的表現形式，目的是為了讓理論成為實踐。

當作品缺少層次感時，上述的一些改變方法可以供大家參考，但是不要僅僅侷限於這些，還有一些我們常用的，比如：投影就非常實用，可以給文字、色塊、主體物等等做投影，拉開前後關係，這樣也會一定程度上增強視覺層次感；再比如：倒影、環境感等等，這些目的都是儘可能的去豐富畫面、營造信息層次關係。並不是說這些手法一定要完全體現在一個作品上，層次關係過多反而會使得畫面整體亂，一定要根據實際情況選擇使用，切記並不是視覺層次數越多就越好，這是一個誤區。

個人公眾號：魚大大設計鋪，ID：ydsjp2018

轉載請私信作者，並註明來源公眾號：美工美邦


推薦閱讀：
相關文章