看看高手在視覺缺少層次感時的解決方法!

資訊頻道 - 設計技 來源:中國設計在線 作者:cdo 2020-02-14

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

01#視覺元素差異化

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

看看高手在視覺缺少層次感時的解決方法!

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

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

02#裝飾性元素

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

看看高手在視覺缺少層次感時的解決方法!

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

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

03#使用肌理

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

看看高手在視覺缺少層次感時的解決方法!

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

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

看看高手在視覺缺少層次感時的解決方法!

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

04#改變配色形式

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

05#營造疊加關系

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

看看高手在視覺缺少層次感時的解決方法!

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

06#透視

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

07#案例

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

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

看看高手在視覺缺少層次感時的解決方法!

看看高手在視覺缺少層次感時的解決方法!

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

07#總結

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


歡迎關注作者的微信公眾號:「美工美邦」

聲明:站內網友所發(fā)表的所有內容及言論僅代表其本人,并不反映任何網站意見及觀點。

全部評論

暫無相關推薦