視覺缺少層次感怎么解決?

2020-2-14    資深UI設(shè)計(jì)者

「層次感」這個詞在設(shè)計(jì)中的出現(xiàn)頻率是很高的,主要體現(xiàn)在信息層級關(guān)系和視覺豐富度這兩點(diǎn),而缺少層次感的設(shè)計(jì)會給人一種信息雜亂、畫面單調(diào)的視覺感受,甚至枯燥、乏味,這也恰恰與設(shè)計(jì)目的相悖。那么當(dāng)我們的作品出現(xiàn)層次感缺失時,應(yīng)該從哪些方面著手改善、解決呢?本期內(nèi)容希望能對大家有所幫助。

視覺元素差異化

營造視覺元素的差異化可以起到很好的改變畫面信息層級關(guān)系的作用,從而增強(qiáng)設(shè)計(jì)作品的層次感,這和對比手法很雷同。無論是畫面中的視覺元素多還是少,都要做到有主有次、有大有小、有粗有細(xì)、元素與元素之間形成對比關(guān)系,舉個簡單的例子:

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

當(dāng)畫面中的視覺元素相同或者相似時,信息的層級關(guān)系就相對而言不容易體現(xiàn)出來,那么此時就需要我們營造具有差異化的視覺元素打破這一現(xiàn)象,從而增強(qiáng)畫面的視覺層次感,無論切入點(diǎn)是什么。再比如我們看到的風(fēng)景照:

從近到遠(yuǎn)在視覺上存在著很明顯的差異化,比如:近實(shí)遠(yuǎn)虛、近大遠(yuǎn)小、近處的飽和度高遠(yuǎn)處飽和度低、近處的明度暗遠(yuǎn)處的明度亮等等,大自然的風(fēng)景本身就能很好地詮釋視覺層次感,所謂「設(shè)計(jì)源于生活」正是如此。那么這些應(yīng)用到設(shè)計(jì)中又應(yīng)該如何體現(xiàn)呢?下面再看一個例子:

如果產(chǎn)品這么擺放的話,那么何來層次感而言呢?只能理解為重要的事情重復(fù)三遍。做個小小的改變:

畫面有了大小關(guān)系,故而有了主次關(guān)系,此時視覺的層次感已經(jīng)有所體現(xiàn):

大小與虛實(shí)的雙重結(jié)合,視覺層次感更加強(qiáng)烈了,加點(diǎn)透視看看:

這里做了點(diǎn)透視效果,結(jié)合大小、虛實(shí)的變化,是不是有種由近到遠(yuǎn)的既視感?通過營造視覺元素的差異化,視覺層次感也更加強(qiáng)烈,這種虛實(shí)結(jié)合的形式在設(shè)計(jì)中也非常實(shí)用,下面我們再看案例:

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

裝飾性元素

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

通過上下兩個案例的對比我們發(fā)現(xiàn):

  • 上側(cè)案例畫面整體的豐富度欠缺,甚至感覺有些空;而且文字信息沒有形成很好的對比關(guān)系,信息的層次感受也比較單一,所以給人感覺層次感不夠。
  • 下側(cè)案例中用到了一些裝飾性的文字、線條、形狀符號等,首先在視覺豐富度上較上側(cè)案例中就提升了很多,不會給用戶一種空的感覺。其次這些裝飾性的元素與主文案在視覺上也形成了很好的對比,使得畫面有了主次、大小之分,視覺形態(tài)的變化形式更多,視覺層次感也更加強(qiáng)烈。
  • 裝飾性元素可以是文字、線條、形狀、圖形等等一些點(diǎn)狀、線狀的元素,甚至于一些塊狀元素(比如:水印文字、產(chǎn)品等),目的是通過增加畫面豐富度和視覺形態(tài)變化的多樣性提升整體視覺層次感。

需要注意:裝飾性元素也不能過多的使用,因?yàn)檫^量使用很容易在視覺上形成散亂、不夠整體的情況,要根據(jù)實(shí)際情況合理使用。

使用肌理

使用肌理是設(shè)計(jì)中非常實(shí)用的一個設(shè)計(jì)手法,肌理有著很好的豐富畫面、增加細(xì)節(jié)、提升層次感的作用,比如可以用做一些海報(bào)的底紋、文字的材質(zhì),甚至是一些形式感很強(qiáng)的肌理可以作為畫面的抽象主體。下面舉個例子:

案例中將遠(yuǎn)山風(fēng)景圖片通過透明度調(diào)整作為肌理使用,這樣做的好處在于:首先肌理相較于整個畫面來說不是那么顯眼,這樣就避免搶了主體;其次因?yàn)檫h(yuǎn)山給人的視覺感受就是層次感強(qiáng)烈,而這里當(dāng)作肌理既起到了一定的填充、豐富的作用,又保留了一些遠(yuǎn)山的屬性,在視覺上層次感更加強(qiáng)烈。

再比如一些文字也會使用肌理,用于增強(qiáng)文案信息的視覺層次感受,比如:

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

改變配色形式

當(dāng)作品視覺層次感不夠強(qiáng)烈時,我們可以轉(zhuǎn)化為思考如何提升畫面豐富度以及信息層次感。比如前面說的:對比、裝飾元素、肌理都可以與之對應(yīng)起來,那么為什么說合理的使用色彩在一定程度上也能起到提升視覺豐富度的作用呢?下面舉個例子:

這里是通過有彩色與無彩色的案例對比,以視覺感受來看:左側(cè)明顯比右側(cè)顯得更空一些,因?yàn)樯室彩且环N信息傳達(dá)的媒介,也就是說顏色也在傳遞信息,所以當(dāng)畫面顯得空、缺少層次感的時候,通過顏色的調(diào)整也能起到一定的增加視覺層次感的作用,舉個例子:

這里只是改變了底色,在視覺豐富度上給人的感受差距一目了然,因?yàn)榧儼椎讜o人一種空、缺少內(nèi)容的視覺感受,所以一般情況下我們的處理方式會選擇添加一些視覺元素,比如:裝飾性元素、材質(zhì)、線條等等,現(xiàn)在我們又多了一個選項(xiàng),就是無彩色向有彩色的改變,雖然這種方法有一定的局限性,但也不失為一種可行的解決方式。

營造疊加關(guān)系

其實(shí)這種營造前后疊加關(guān)系的方式在之前的文章中也提到過,其實(shí)就是尋找元素與元素之間的物理疊加關(guān)系,會給人一種很強(qiáng)烈的層次變化,對于提升畫面層次感能起到立竿見影的作用,比如:

案例中的文字與主體物之間存在著視覺上的前后疊加關(guān)系,給用戶更強(qiáng)烈的視覺層次感,這種營造前后疊加關(guān)系的處理手法在標(biāo)題設(shè)計(jì)中也很實(shí)用。

透視

透視也可以理解為營造空間關(guān)系的手法,當(dāng)平面的視覺元素賦予其透視關(guān)系后,會形成一種類似三維空間的視覺感受,在一定程度上也能起到增強(qiáng)畫面視覺層次感的作用。下面舉個例子:

很明顯,透視的感覺會給人一種空間感、延伸感,視覺層次更加強(qiáng)烈,這種形式在日常的設(shè)計(jì)中也很實(shí)用,比如:

改變透視會在視覺上形成一種縱向的延伸感,空間上層次關(guān)系更加強(qiáng)烈,只是這種形式有一定的局限性。

案例

結(jié)合今天所說到的這些手法,通過不斷演變的形式,我們簡單做一組文字排版的案例:

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

已經(jīng)有了信息的層級關(guān)系,即大小對比,視覺元素之間形成了差異化的表現(xiàn),還可以繼續(xù)深入:

通過改變顏色,對比更加強(qiáng)烈,層次感稍加增強(qiáng),感覺還不夠?下面我們繼續(xù)再改:

這里通過肌理、虛實(shí)結(jié)合以及改變字體形態(tài)的表現(xiàn)形式,使得整體視覺層次感又提升了一個檔次,如果還想繼續(xù)提升,那么就要想,還缺少點(diǎn)什么?比如裝飾性元素試一試?

增加了裝飾性元素之后,畫面整體的豐富度提升了很多,而且對比的形式更多元化。案例中主要用到了:差異化元素、對比、肌理、裝飾性元素這四種表現(xiàn)形式,當(dāng)然這也許不是最好的表現(xiàn)形式,目的是為了讓理論成為實(shí)踐。

總結(jié)

當(dāng)作品缺少層次感時,上述的一些改變方法可以供大家參考,但是不要僅僅局限于這些,還有一些我們常用的,比如:投影就非常實(shí)用,可以給文字、色塊、主體物等等做投影,拉開前后關(guān)系,這樣也會一定程度上增強(qiáng)視覺層次感。再比如:倒影、環(huán)境感等等,這些目的都是盡可能去豐富畫面、營造信息層次關(guān)系。并不是說這些手法一定要完全體現(xiàn)在一個作品上,層次關(guān)系過多反而會使得畫面整體散亂,一定要根據(jù)實(shí)際情況選擇使用,切記并不是視覺層次數(shù)越多就越好,這是一個誤區(qū)。

分享本文至:

日歷

鏈接

個人資料

存檔