眾所周知，相較于平淡無(wú)奇，毫無(wú)重點(diǎn)的網(wǎng)頁(yè)UI設計，具有良好視覺(jué)層次結構的網(wǎng)頁(yè)UI設計更受用戶(hù)青睞。為什么呢？答案其實(shí)很簡(jiǎn)單。極賦視覺(jué)層次感的頁(yè)面設計不僅極具設計美感，取悅用戶(hù)身心。而且還建立了清晰直觀(guān)的視覺(jué)層級， 方便用戶(hù)簡(jiǎn)單快速的識別和讀取需要的頁(yè)面內容，從而提升用戶(hù)體驗，降低跳出率。

        但是，究竟如何才能結合網(wǎng)頁(yè)/產(chǎn)品特色和用戶(hù)的真實(shí)需求， 將頁(yè)面視覺(jué)內容層級化， 從而提供更加優(yōu)質(zhì)的用戶(hù)體驗，實(shí)現與用戶(hù)的互動(dòng)， 最終促成產(chǎn)品購買(mǎi)呢？下面小編就結合最新且具有極佳視覺(jué)層次感的網(wǎng)頁(yè)設計實(shí)例分析和介紹視覺(jué)內容組織技巧，以及在原型化這些網(wǎng)頁(yè)設計的過(guò)程中（這里結合了 一款原型工具M(jìn)ockplus進(jìn)行詳細說(shuō)明）需要注意的原型設計技巧：

1.利用界面元素尺寸大小建立層級結構

        界面元素（例如文字，圖片或形狀等）尺寸越大，越突出，越容易吸引用戶(hù)的注意。所以，在具體的網(wǎng)頁(yè)界面設計中，設計師可以通過(guò)有梯度的尺寸變化，創(chuàng )建頁(yè)面信息的層級關(guān)系。當然內容重要性上，也應該是與尺寸大小成正比的（即越大越重要）。

2.利用界面元素明暗，陰影以及透明度的不同，體現簡(jiǎn)單層級

        如白底黑字般，同類(lèi)元素，同一色彩，不同的明暗，陰影以及透明度，也可體現簡(jiǎn)單的層級關(guān)系。當然，在沒(méi)有過(guò)多顏色的參與下，不同文字，圖片等多種的頁(yè)面元素結合透明度，陰影以及明暗，也可使整款設計極具簡(jiǎn)約風(fēng)和層次感。（點(diǎn)擊鏈接更多的簡(jiǎn)約風(fēng)網(wǎng)頁(yè)設計技巧）

3.利用色彩，劃分頁(yè)面層級

        色彩，作為設計師最常使用的視覺(jué)層次工具，也為他們創(chuàng )建極富層級感的網(wǎng)頁(yè)設計發(fā)揮著(zhù)舉足輕重的作用。而具體的設計技巧，大家可以參考以下幾點(diǎn)：

        首先，色彩明亮的頁(yè)面元素更容易從相對柔和的元素中脫穎而出。而且，某些色彩，尤其是某些主題配色方案的選擇，對于確定網(wǎng)頁(yè)的整體基調，吸引用戶(hù)注意，作用也非常明顯。例如，藍色，一般代表平靜祥和，適合一些日常事物管理類(lèi)軟件選擇。而紅色，則代表熱情喜氣，適合一些節日相關(guān)購物促銷(xiāo)類(lèi)軟件選擇。其次，色彩飽和度的梯度變化，也可體現直觀(guān)而豐富的層次結構。
同一色彩，飽和度的梯度變化，也可幫助展現網(wǎng)站元素的層次結構。最后，色彩模塊，對于體現界面元素的邏輯關(guān)系，作用也是顯而易見(jiàn)存在同一邏輯關(guān)系的各個(gè)頁(yè)面元素就近放置在同一色彩模塊，可以讓頁(yè)面組織結構更加清晰，易于用戶(hù)快速查看相關(guān)內容。

4.利用頁(yè)面布局，展現網(wǎng)頁(yè)層級結構

        頁(yè)面布局也是設計師們常用的視覺(jué)工具之一。一方面，同一網(wǎng)站，內部各個(gè)頁(yè)面可以根據軟件或產(chǎn)品展示內容需求，采用多樣的布局模式，增加頁(yè)面的多變性和可讀性。另一方面，也可直接在不同頁(yè)面采用重復的頁(yè)面布局，方便幫助用戶(hù)形成一定的閱讀習慣，快速有效的查詢(xún)需要的信息。

5.利用留白和間距，突出界面視覺(jué)內容

        留白的巧妙運用，能夠非常有效地突出頁(yè)面信息。而頁(yè)面內部元素之間，保持適當的間距，讓彼此之間的相互聯(lián)系而不“擁擠雜亂”，也是吸引用戶(hù)注意的不錯策略。

6.利用對比，凸顯網(wǎng)頁(yè)層級結構關(guān)系

        以上所提及的各種視覺(jué)組織工具，例如尺寸，色彩，明暗，間距等等，同類(lèi)或不同類(lèi)之間的鮮明對比，也可以讓頁(yè)面視覺(jué)上更加美觀(guān)而豐富，同時(shí)體現元素之間的結構層次關(guān)系。

7.采用不同的界面風(fēng)格，打造獨特的網(wǎng)頁(yè)視覺(jué)層級

        當然，并不是說(shuō)設計師就必須通過(guò)以上的設計工具展示網(wǎng)頁(yè)重要性層級結構。實(shí)際上，結合設計師特有創(chuàng )意，獨特紋理（texture），圖形或圖像元素等，打造出具有設計師獨特風(fēng)格的視覺(jué)層級，也會(huì )是不錯的嘗試。

8.分析用戶(hù)需求和網(wǎng)頁(yè)瀏覽模式，優(yōu)化頁(yè)面內容和位置

        在進(jìn)行網(wǎng)頁(yè)界面層級結構化的過(guò)程中，并不是毫無(wú)章法，盲目的隨意添加或突出某個(gè)部分，而是需要分析用戶(hù)行為，根據用戶(hù)需求等級進(jìn)行相應結構層次的劃分。否則，再怎么賦有層次感，用戶(hù)也會(huì )因為找不到需要的東西，莞爾離開(kāi)。

9.其他設計工具

        而其它視覺(jué)設計工具，例如界面文本方面，文本字體，排版，對齊方式等等，也可突出頁(yè)面的層級關(guān)系。