詳細(xì)解析WEB設(shè)計(jì)中的視覺層次發(fā)布者：本站     時間：2021-12-23 10:12:19

視覺層次是什么?

領(lǐng)導(dǎo)和客戶經(jīng)常說的一個點(diǎn)就是，xxx，這個設(shè)計(jì)總感覺少了點(diǎn)什么東西，太”平”了，沒有層次呀，你再改改吧~~你腦中可能一片霧水，層次聽過也知道，但怎么做呢?

那什么是視覺層次呢?其實(shí)視覺層次沒有明確的官方定義，但我們可以理解為通過點(diǎn)、線、面、色彩、圖形等造型元素來表達(dá)平面構(gòu)成與空間構(gòu)成的方式，合理的點(diǎn)、線、面、色彩、圖形的排布會讓平面和空間更加合理，即有視覺層次。視覺層次通過很多方面來體現(xiàn)，比如顏色、元素的大小和對比等，由于本人是做游戲視覺的，以下會多用游戲網(wǎng)站來給大家講解如何在做網(wǎng)站時把視覺層次做好。但設(shè)計(jì)是相通的，所以時于其他行業(yè)的設(shè)計(jì)也是適用的。

畫面元素的層次

在做設(shè)計(jì)的時候，如果你只是把素材啪啪的放上去，而不去處理元素之間的層次關(guān)系。比如元素之間的光源和透視，那么做出來的東西肯定會顯得平亂花，如下圖：

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

大家可能會有疑問，該放的元素我也已經(jīng)放了呀，怎么還是會顯得沒有層次呢?咱們可以從-些好的攝影作品中去學(xué)習(xí)他們的處理元素的手法。視覺層次和攝影中透觀其實(shí)是-個道理，這會讓你受益匪淺。

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

上圖這些都是我對照片的-些解析，大家從圖中可以看出，攝影師處理視覺層次的-些手法。一般攝影照片中都會存在前中遠(yuǎn)三景，并通對這三者的不同處理方法來實(shí)現(xiàn)視覺層次。如果把前景作為視覺中心(如圖一圖二)，那么前景一定最大最清晰明亮可見的，遠(yuǎn)景一定是最模糊視覺上最弱的。如果把中景作為視覺中心點(diǎn)(如圖三)，那么前景和遠(yuǎn)景在視覺上是最弱的。這樣處理的話，整個照片就顯得很有層次?？粗沧匀弧Ｒ?yàn)槿搜垡彩沁@樣看事物的。至于如何加強(qiáng)或弱化，無非就是大小、明暗、清晰度。說了這么多，那么這些跟咱們的設(shè)計(jì)有毛關(guān)系呢，這些如何用到咱們的網(wǎng)頁設(shè)計(jì)中呢?讓我們看看優(yōu)秀的設(shè)計(jì)師們是如何處理的吧~

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

上面的這個網(wǎng)頁是EA公司旗下一款MVP棒球游戲的展示站，做的很棒，這是其中-張。大家可以看到，這個網(wǎng)站層次鮮明，那么他們又是如何做的呢’下面咱們來解析下他們的處理手法吧。

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

可以很清晰的從網(wǎng)頁中看出網(wǎng)頁分為前、中、遠(yuǎn)三景。以前景為視覺中心點(diǎn)。并通過不同層次的元素進(jìn)行不同的處理方法，如圖所示，前景做了銳化、中景和遠(yuǎn)景都做模糊處理。

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

跟上圖比這個的處理方法有些不同，是以中景為視覺中心的。所以中景的元素是最清晰可見的，前景和遠(yuǎn)景都通i過模糊等弱化處理。這種處理手法會顯得更加有層次感。

顏色的層次

-個優(yōu)秀的網(wǎng)頁，你光做好元素的層次是遠(yuǎn)遠(yuǎn)不夠的，顏色也是至最重要，關(guān)于如何配色，網(wǎng)上的教程和文章已經(jīng)

一大堆，這里我就不詳細(xì)說了，主要說怎么通過用色來表現(xiàn)層次感。

大家都知道做設(shè)計(jì)時會有主色和輔色，對比色。但不知道為什么做出來的東西不是單調(diào)就是花哨。那么這可能是色彩的層次關(guān)系沒處理好。色彩的層次是指當(dāng)我把作品去色后，作品中有沒有表現(xiàn)出從黑到灰到白的存在比例。如果一個作品的黑色比較多那么整體的效果就會顯得很沉重，而如果白色很多的話那么整體效果就會顯得很蒼白，如果灰色很多，白色與黑色都少，那么整個版面就顯得很臟了!

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

通過上圖，大家可以看到，就算圖片去色后，只剩下黑灰白，圖片也不顯得單調(diào)也不平，是因?yàn)樵O(shè)計(jì)師在顏色的明暗度和純度上做了調(diào)整，所以就算是去色后看著也很有層次。

顏色的之間的比例也會影響視覺層次，如下圖，主色是藍(lán)色、黑色，輔色是白色和黃色，大家可以看到這幾種顏色的比例并不是均等的，如果所有的地方都只用-種顏色，那這個網(wǎng)頁肯定又掉入色彩單調(diào)的坑中了，如果各種顏色太多，每種顏色占的比例都很大，那么肯定掉入了顏色花哨的坑中了，所以顏色的比例也一定要把握好。-般都是重點(diǎn)的地方想辦法突出，作為視覺中心點(diǎn)，弱化不重要的，加強(qiáng)對比，這樣層次就能出來，如下圖：

詳細(xì)解析WEB設(shè)計(jì)中的視覺層次,PS教程,

大家可以看到重要的信息是在整個網(wǎng)頁中是突出的。通過跟明暗、大小對比，以突出視覺層次，從而實(shí)現(xiàn)視覺層次，這樣做出的網(wǎng)頁看著也不單調(diào)也不花哨，方便瀏覽者找尋重要信息。

總結(jié)

視覺層次是小伙伴們值得去好好研究的一塊地方，單視覺層次只是做設(shè)計(jì)的一部分，除此之外還有字體排版、素材的選擇等等都需要去好好鉆研。講的不是特別詳細(xì)，但希望小伙伴們都能知道講的這些在做設(shè)計(jì)的時候是需要注意的，是需要去思考的。