2020-2-14 資深UI設(shè)計(jì)者
「層次感」這個(gè)詞在設(shè)計(jì)中的出現(xiàn)頻率是很高的，主要體現(xiàn)在信息層級(jí)關(guān)系和視覺(jué)豐富度這兩點(diǎn)，而缺少層次感的設(shè)計(jì)會(huì)給人一種信息雜亂、畫(huà)面單調(diào)的視覺(jué)感受，甚至枯燥、乏味，這也恰恰與設(shè)計(jì)目的相悖。那么當(dāng)我們的作品出現(xiàn)層次感缺失時(shí)，應(yīng)該從哪些方面著手改善、解決呢？本期內(nèi)容希望能對(duì)大家有所幫助。
營(yíng)造視覺(jué)元素的差異化可以起到很好的改變畫(huà)面信息層級(jí)關(guān)系的作用，從而增強(qiáng)設(shè)計(jì)作品的層次感，這和對(duì)比手法很雷同。無(wú)論是畫(huà)面中的視覺(jué)元素多還是少，都要做到有主有次、有大有小、有粗有細(xì)、元素與元素之間形成對(duì)比關(guān)系，舉個(gè)簡(jiǎn)單的例子：
很明顯第一排的形狀之間是完全相同的，在視覺(jué)上給人的感覺(jué)就會(huì)很平，缺少變化；而下面兩排在視覺(jué)上都營(yíng)造了一個(gè)與周?chē)嬖诓町惢囊曈X(jué)元素，使得整體在視覺(jué)上有了閱讀的先后順序，形成了簡(jiǎn)單的信息層級(jí)關(guān)系。
當(dāng)畫(huà)面中的視覺(jué)元素相同或者相似時(shí)，信息的層級(jí)關(guān)系就相對(duì)而言不容易體現(xiàn)出來(lái)，那么此時(shí)就需要我們營(yíng)造具有差異化的視覺(jué)元素打破這一現(xiàn)象，從而增強(qiáng)畫(huà)面的視覺(jué)層次感，無(wú)論切入點(diǎn)是什么。再比如我們看到的風(fēng)景照：
從近到遠(yuǎn)在視覺(jué)上存在著很明顯的差異化，比如：近實(shí)遠(yuǎn)虛、近大遠(yuǎn)小、近處的飽和度高遠(yuǎn)處飽和度低、近處的明度暗遠(yuǎn)處的明度亮等等，大自然的風(fēng)景本身就能很好地詮釋視覺(jué)層次感，所謂「設(shè)計(jì)源于生活」正是如此。那么這些應(yīng)用到設(shè)計(jì)中又應(yīng)該如何體現(xiàn)呢？下面再看一個(gè)例子：
如果產(chǎn)品這么擺放的話，那么何來(lái)層次感而言呢？只能理解為重要的事情重復(fù)三遍。做個(gè)小小的改變：
畫(huà)面有了大小關(guān)系，故而有了主次關(guān)系，此時(shí)視覺(jué)的層次感已經(jīng)有所體現(xiàn)：
大小與虛實(shí)的雙重結(jié)合，視覺(jué)層次感更加強(qiáng)烈了，加點(diǎn)透視看看：
這里做了點(diǎn)透視效果，結(jié)合大小、虛實(shí)的變化，是不是有種由近到遠(yuǎn)的既視感？通過(guò)營(yíng)造視覺(jué)元素的差異化，視覺(jué)層次感也更加強(qiáng)烈，這種虛實(shí)結(jié)合的形式在設(shè)計(jì)中也非常實(shí)用，下面我們?cè)倏窗咐?
這種虛實(shí)對(duì)比的形式也是視覺(jué)元素差異化體現(xiàn)形式之一，很直觀地提升了整體的視覺(jué)層次感，包括在一些文字排版中也很實(shí)用。所以當(dāng)我們的作品整體視覺(jué)層次感不夠強(qiáng)烈時(shí)，不妨試試通過(guò)營(yíng)造視覺(jué)元素差異化的形式進(jìn)行提升和改變，只是既然用了這種表現(xiàn)手法，就要做得足夠明顯，否則只會(huì)適得其反。
我們前面說(shuō)了，提升視覺(jué)層次感可以從兩個(gè)點(diǎn)切入，即：提升信息層次感以及畫(huà)面整體豐富度，而裝飾性元素的使用剛好可以契合這兩點(diǎn)，它既有提升信息層次感的作用，又能起到很好豐富畫(huà)面的作用。下面我們看個(gè)案例：
通過(guò)上下兩個(gè)案例的對(duì)比我們發(fā)現(xiàn)：
需要注意：裝飾性元素也不能過(guò)多的使用，因?yàn)檫^(guò)量使用很容易在視覺(jué)上形成散亂、不夠整體的情況，要根據(jù)實(shí)際情況合理使用。
使用肌理是設(shè)計(jì)中非常實(shí)用的一個(gè)設(shè)計(jì)手法，肌理有著很好的豐富畫(huà)面、增加細(xì)節(jié)、提升層次感的作用，比如可以用做一些海報(bào)的底紋、文字的材質(zhì)，甚至是一些形式感很強(qiáng)的肌理可以作為畫(huà)面的抽象主體。下面舉個(gè)例子：
案例中將遠(yuǎn)山風(fēng)景圖片通過(guò)透明度調(diào)整作為肌理使用，這樣做的好處在于：首先肌理相較于整個(gè)畫(huà)面來(lái)說(shuō)不是那么顯眼，這樣就避免搶了主體；其次因?yàn)檫h(yuǎn)山給人的視覺(jué)感受就是層次感強(qiáng)烈，而這里當(dāng)作肌理既起到了一定的填充、豐富的作用，又保留了一些遠(yuǎn)山的屬性，在視覺(jué)上層次感更加強(qiáng)烈。
再比如一些文字也會(huì)使用肌理，用于增強(qiáng)文案信息的視覺(jué)層次感受，比如：
主要字體使用肌理會(huì)在讓其形象更加鮮明，與正常文案形成對(duì)比，也能間接提升文字排版的視覺(jué)層次感。
當(dāng)作品視覺(jué)層次感不夠強(qiáng)烈時(shí)，我們可以轉(zhuǎn)化為思考如何提升畫(huà)面豐富度以及信息層次感。比如前面說(shuō)的：對(duì)比、裝飾元素、肌理都可以與之對(duì)應(yīng)起來(lái)，那么為什么說(shuō)合理的使用色彩在一定程度上也能起到提升視覺(jué)豐富度的作用呢？下面舉個(gè)例子：
這里是通過(guò)有彩色與無(wú)彩色的案例對(duì)比，以視覺(jué)感受來(lái)看：左側(cè)明顯比右側(cè)顯得更空一些，因?yàn)樯室彩且环N信息傳達(dá)的媒介，也就是說(shuō)顏色也在傳遞信息，所以當(dāng)畫(huà)面顯得空、缺少層次感的時(shí)候，通過(guò)顏色的調(diào)整也能起到一定的增加視覺(jué)層次感的作用，舉個(gè)例子：
這里只是改變了底色，在視覺(jué)豐富度上給人的感受差距一目了然，因?yàn)榧儼椎讜?huì)給人一種空、缺少內(nèi)容的視覺(jué)感受，所以一般情況下我們的處理方式會(huì)選擇添加一些視覺(jué)元素，比如：裝飾性元素、材質(zhì)、線條等等，現(xiàn)在我們又多了一個(gè)選項(xiàng)，就是無(wú)彩色向有彩色的改變，雖然這種方法有一定的局限性，但也不失為一種可行的解決方式。
其實(shí)這種營(yíng)造前后疊加關(guān)系的方式在之前的文章中也提到過(guò)，其實(shí)就是尋找元素與元素之間的物理疊加關(guān)系，會(huì)給人一種很強(qiáng)烈的層次變化，對(duì)于提升畫(huà)面層次感能起到立竿見(jiàn)影的作用，比如：
案例中的文字與主體物之間存在著視覺(jué)上的前后疊加關(guān)系，給用戶更強(qiáng)烈的視覺(jué)層次感，這種營(yíng)造前后疊加關(guān)系的處理手法在標(biāo)題設(shè)計(jì)中也很實(shí)用。
透視也可以理解為營(yíng)造空間關(guān)系的手法，當(dāng)平面的視覺(jué)元素賦予其透視關(guān)系后，會(huì)形成一種類似三維空間的視覺(jué)感受，在一定程度上也能起到增強(qiáng)畫(huà)面視覺(jué)層次感的作用。下面舉個(gè)例子：
很明顯，透視的感覺(jué)會(huì)給人一種空間感、延伸感，視覺(jué)層次更加強(qiáng)烈，這種形式在日常的設(shè)計(jì)中也很實(shí)用，比如：
改變透視會(huì)在視覺(jué)上形成一種縱向的延伸感，空間上層次關(guān)系更加強(qiáng)烈，只是這種形式有一定的局限性。
結(jié)合今天所說(shuō)到的這些手法，通過(guò)不斷演變的形式，我們簡(jiǎn)單做一組文字排版的案例：
這就是一句普通的話，沒(méi)有主次、沒(méi)有修飾、毫無(wú)層次感，改變一下：
已經(jīng)有了信息的層級(jí)關(guān)系，即大小對(duì)比，視覺(jué)元素之間形成了差異化的表現(xiàn)，還可以繼續(xù)深入：
通過(guò)改變顏色，對(duì)比更加強(qiáng)烈，層次感稍加增強(qiáng)，感覺(jué)還不夠？下面我們繼續(xù)再改：
這里通過(guò)肌理、虛實(shí)結(jié)合以及改變字體形態(tài)的表現(xiàn)形式，使得整體視覺(jué)層次感又提升了一個(gè)檔次，如果還想繼續(xù)提升，那么就要想，還缺少點(diǎn)什么？比如裝飾性元素試一試？
增加了裝飾性元素之后，畫(huà)面整體的豐富度提升了很多，而且對(duì)比的形式更多元化。案例中主要用到了：差異化元素、對(duì)比、肌理、裝飾性元素這四種表現(xiàn)形式，當(dāng)然這也許不是最好的表現(xiàn)形式，目的是為了讓理論成為實(shí)踐。
當(dāng)作品缺少層次感時(shí)，上述的一些改變方法可以供大家參考，但是不要僅僅局限于這些，還有一些我們常用的，比如：投影就非常實(shí)用，可以給文字、色塊、主體物等等做投影，拉開(kāi)前后關(guān)系，這樣也會(huì)一定程度上增強(qiáng)視覺(jué)層次感。再比如：倒影、環(huán)境感等等，這些目的都是盡可能去豐富畫(huà)面、營(yíng)造信息層次關(guān)系。并不是說(shuō)這些手法一定要完全體現(xiàn)在一個(gè)作品上，層次關(guān)系過(guò)多反而會(huì)使得畫(huà)面整體散亂，一定要根據(jù)實(shí)際情況選擇使用，切記并不是視覺(jué)層次數(shù)越多就越好，這是一個(gè)誤區(qū)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com