眾所周知，相較於平淡無奇，毫無重點的網頁UI設計，具有良好視覺層次結構的網頁UI設計更受用戶青睞。為什麼呢？答案其實很簡單。極賦視覺層次感的頁面設計不僅極具設計美感，取悅用戶身心。而且還建立了清晰直觀的視覺層級， 方便用戶簡單快速的識別和讀取需要的頁面內容，從而提升用戶體驗，降低跳出率。
1.利用界面元素尺寸大小建立層級結構
界面元素（例如文字，圖片或形狀等）尺寸越大，越突出，越容易吸引用戶的注意。所以，在具體的網頁界面設計中，設計師可以通過有梯度的尺寸變化，創建頁面信息的層級關係。當然內容重要性上，也應該是與尺寸大小成正比的（即越大越重要）。
如圖，利用文字的尺寸大小，體現網頁信息的層級。
注意：尺寸大小也要控制在用戶能夠接受的範圍內
太大，能夠展示的內容有限。太小，易讀性差，也會比較繁雜。
原型設計技巧：
在利用Mockplus (一款具有豐富組件庫和圖標庫的原型工具)創建網頁原型時，絕大部分的組件都是可以簡單通過寬高屬性或拖拉邊框兩種方式調整其尺寸，輕鬆創建直觀的層次結構。
如圖，Mockplus允許用戶簡單通過寬高屬性或拖拉邊框的方式調整組件尺寸大小。
2.利用界面元素明暗，陰影以及透明度的不同，體現簡單層級
如白底黑字般，同類元素，同一色彩，不同的明暗，陰影以及透明度，也可體現簡單的層級關係。當然，在沒有過多顏色的參與下，不同文字，圖片等多種的頁面元素結合透明度，陰影以及明暗，也可使整款設計極具簡約風和層次感。（點擊鏈接更多的簡約風網頁設計技巧）
如圖，文字明暗，結合尺寸變化，讓頁面層級更加清晰簡約：
原型設計技巧：
如若，需要添加元素陰影，也可輕鬆通過組件的重疊實現。
如圖，“圖片”與“形狀”組件的組合，實現陰影的添加。
3.利用色彩，劃分頁面層級
色彩，作為設計師最常使用的視覺層次工具，也為他們創建極富層級感的網頁設計發揮著舉足輕重的作用。而具體的設計技巧，大家可以參考以下幾點：
首先，色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。如圖：
如圖，明亮的紅色和黃色更易從相對較柔和的粉色背景中脫穎而出。
而且，某些色彩，尤其是某些主題配色方案的選擇，對於確定網頁的整體基調，吸引用戶注意，作用也非常明顯。例如，藍色，一般代表平靜祥和，適合一些日常事物管理類軟件選擇。而紅色，則代表熱情喜氣，適合一些節日相關購物促銷類軟件選擇。
如圖，利用紅色突出網頁促銷信息。
其次，色彩飽和度的梯度變化，也可體現直觀而豐富的層次結構。
同一色彩，飽和度的梯度變化，也可幫助展現網站元素的層次結構。如圖：
最後，色彩模塊，對於體現界面元素的邏輯關係，作用也是顯而易見
存在同一邏輯關係的各個頁面元素就近放置在同一色彩模塊，可以讓頁面組織結構更加清晰，易於用戶快速查看相關內容。
如圖，利用色彩模塊，更直觀地劃分功能區。
原型設計技巧：
而這一方面，Mockplus提供了非常強大的色彩選擇器，設計師們可以簡單點擊實現色彩的選擇和添加。其色彩收藏功能，也為以後複用和保持整款設計配色的一致性提供了可能。
當然，結合“形狀”組件，為頁面添加豐富的功能色塊，以及添加“鼠標懸停時”或“點擊時”的簡單色彩交互狀態，也不是難事。
如圖，添加色塊劃分界面功能結構。
4.利用頁面佈局，展現網頁層級結構
頁面佈局也是設計師們常用的視覺工具之一。一方面，同一網站，內部各個頁面可以根據軟件或產品展示內容需求，採用多樣的佈局模式，增加頁面的多變性和可讀性。另一方面，也可直接在不同頁面採用重複的頁面佈局，方便幫助用戶形成一定的閱讀習慣，快速有效的查詢需要的信息。
而具體單個頁面的佈局模式，大家可以嘗試以下的方式實現：
*利用網格劃分不同頁面模塊
網格是公認的劃分頁面功能模塊的工具之一。而它在組織界面視覺內容方面，作用也不可小視。加之，結合各個網格的色彩變化，也能使整個頁面更加炫酷直觀。如下圖：
*利用位置不同體現邏輯關係
同一邏輯關係（比如同類，從屬，因果等）或相近/相關的元素放在同一或並列的網頁位置或模塊內，更易於用戶瀏覽所需頁面信息。
當然，每個邏輯關係內，結合大小標題和列表進行展示，層級關係會更加深入清晰。
*利用點線
網頁設計中，設計師不僅可以直接使用點線標出需要強調的內容，還可以利用點線劃分頁面板塊和佈局。
如圖，通過位置的不同體現內容之間的邏輯關係。同時，利用線條劃分頁面結構和佈局。
*利用對齊方式的不同
文字，圖片以及相關元素的對齊方式，也是體驗不同層級結構的重要工具。
總之，頁面佈局也可幫助設計師們創建更具美感和層次感的網頁設計。
原型設計技巧：
在使用Mockplus時，設計師可簡單使用“快速格子+自動填充”的功能組合，實現界面網格的輕鬆添加。而且，在具體的設計過程中，對齊方式，標尺以及參考線等工具的使用，也可使網頁佈局設計更加簡便快捷。
如圖，利用Mockplus的快速格子和自動填充功能製作網頁網格，劃分界面功能結構。
5.利用留白和間距，突出界面視覺內容
留白的巧妙運用，能夠非常有效地突出頁面信息。而頁面內部元素之間，保持適當的間距，讓彼此之間的相互聯繫而不“擁擠雜亂”，也是吸引用戶注意的不錯策略。如圖：
6.利用對比，凸顯網頁層級結構關係
以上所提及的各種視覺組織工具，例如尺寸，色彩，明暗，間距等等，同類或不同類之間的鮮明對比，也可以讓頁面視覺上更加美觀而豐富，同時體現元素之間的結構層次關係。
如圖，利用色彩的強烈對比，突出頁面層級。
此外，頁面元素的相互疊加，清晰度，以及細節展示程度的對比，也能有效地凸顯網頁內容的重要性層級。
如圖，靠前的圖片和文字應該更加重要，清晰，細節也應更豐富，從而方便用戶識別讀取，避免層次混亂。
7.採用不同的界面風格，打造獨特的網頁視覺層級
當然，並不是說設計師就必須通過以上的設計工具展示網頁重要性層級結構。實際上，結合設計師特有創意，獨特紋理（texture），圖形或圖像元素等，打造出具有設計師獨特風格的視覺層級，也會是不錯的嘗試。如下圖：
總之，不管是否使用以上的設計工具，結合設計師創意，打造獨具一格的視覺層級風格，都是不錯的設計理念。
原型設計技巧：
而在這一點上，Mockplus提供了很多優質功能，幫助設計師隨心設計，並簡單快捷的原型化，測試和迭代這些天馬行空的創意。
比如，其團隊協作和團隊管理功能，方便設計師更加高效地完成設計。其8種演示和分享方式，例如導出圖片，HTML以及演示包等等，為設計師根據切實需要，選擇適當的方式測試和分享相關設計提供了便利。
此外，其組件樣式庫，也為保存和分享需要的組件樣式並隨時複用提供了可能。
8.分析用戶需求和網頁瀏覽模式，優化頁面內容和位置
在進行網頁界面層級結構化的過程中，並不是毫無章法，盲目的隨意添加或突出某個部分，而是需要分析用戶行為，根據用戶需求等級進行相應結構層次的劃分。否則，再怎麼賦有層次感，用戶也會因為找不到需要的東西，莞爾離開。
此外，除了根據用需求決定哪些內容需要放在最緊要，最突出的位置，以吸引用戶。同時還需要根據用戶瀏覽網頁時的閱讀模式，分析重要內容的頁面位置。
根據美國著名網站設計工程師Nielsen Norman Group研究表示，用戶總是在網頁瀏覽中慣用“F”或“Z”型閱讀模式，即用戶常常是從左到右，開頭結尾詳細閱讀，而中間部分則根據網頁或文章大小標題結構，選擇性閱讀的模式。如下圖：
那麼，網頁設計中，設計師就需要注意頁面首尾內容的趣味性和實用性，以及中間主體部分注意大小標題簡潔明瞭，建立清晰的框架層次結構。
總之，無論是用戶行為畫像，還是用戶瀏覽模式分析，最終都是希望能夠根據用戶需求，更加合理的安排和分佈頁面內容，直觀清晰，易識別。
9.其他設計工具
而其它視覺設計工具，例如界面文本方面，文本字體，排版，對齊方式等等，也可突出頁面的層級關係。
原型設計技巧：
如若設計師希望通過網頁文本的尺寸，字體，顏色，排版以及對齊方式等實現框架結構的構建時，Mockplus的“單行文字”和“多行文字”組件就可以輕鬆幫助實現。而且，適當的結合一定的交互設計，也可使整款設計更具吸引力。
結語：
當然，層次結構化不僅能讓網頁更加直觀清晰，賞心悅目。而且，具有一定侷限性的Android 或iOS app，例如頁面尺寸的限制，設備屏幕的限制，響應與否的限制等等，更需要清晰的層次結構，讓頁面擺脫混亂繁雜，吸引更多用戶點擊使用。而這方面，也同樣適用以上所有設計技巧。
總之， 無論如何， 及時地將各種設計想法，通過一款實用且強大的原型工具（比如以上介紹到的Mockplus）, 轉化成直觀可視的原型，更進一步的測試和迭代，才是創建真正美觀實用，深受用戶喜愛的web/app的必經之道。
總之，希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。
閱讀更多 Mockplus摹客 的文章
