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

視覺(jué)層次是什么?

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

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

畫(huà)面元素的層次

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

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

顏色的層次

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

一大堆，這里我就不詳細說(shuō)了，主要說(shuō)怎么通過(guò)用色來(lái)表現層次感。

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

通過(guò)上圖，大家可以看到，就算圖片去色后，只剩下黑灰白，圖片也不顯得單調也不平，是因為設計師在顏色的明暗度和純度上做了調整，所以就算是去色后看著(zhù)也很有層次。

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

詳細解析WEB設計中的視覺(jué)層次,PS教程,

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

總結

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