健身房里的欲乱h文_筱惠欲乱美女全文免费_欧美无遮挡一区二区三区_国产极品粉嫩福利在线观看

詳細解析WEB設計中的視覺層次發布者：本站     時間：2021-12-23 10:12:19

視覺層次是什么?

領導和客戶經常說的一個點就是，xxx，這個設計總感覺少了點什么東西，太”平”了，沒有層次呀，你再改改吧~~你腦中可能一片霧水，層次聽過也知道，但怎么做呢?

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

畫面元素的層次

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

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

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

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

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

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

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

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

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

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

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

顏色的層次

-個優秀的網頁，你光做好元素的層次是遠遠不夠的，顏色也是至最重要，關于如何配色，網上的教程和文章已經

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

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

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

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

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

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

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

總結

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