本文出自Mockplus團隊，Mockplus是一款更快更簡單的原型設計工具。
眾所周知，相較於平淡無奇，毫無重點的網頁UI設計，具有良好視覺層次結構的網頁UI設計更受使用者青睞。為什麼呢？答案其實很簡單。極賦視覺層次感的頁面設計不僅極具設計美感，取悅使用者身心。而且還建立了清晰直觀的視覺層級， 方便使用者簡單快速的識別和讀取需要的頁面內容，從而提升使用者體驗，降低跳出率。
但是，究竟如何才能結合網頁/產品特色和使用者的真實需求， 將頁面視覺內容層級化， 從而提供更加優質的使用者體驗，實現與使用者的互動， 最終促成產品購買呢？下面小編就結合最新且具有極佳視覺層次感的網頁設計例項分析和介紹視覺內容組織技巧，以及在原型化這些網頁設計的過程中（結合小編最愛的一款又快又簡單的原型工具Mockplus）需要注意的原型設計技巧：
1.利用介面元素尺寸大小建立層級結構
介面元素（例如文字，圖片或形狀等）尺寸越大，越突出，越容易吸引使用者的注意。所以，在具體的網頁介面設計中，設計師可以通過有梯度的尺寸變化，建立頁面資訊的層級關係。當然內容重要性上，也應該是與尺寸大小成正比的（即越大越重要）。
如圖，利用文字的尺寸大小，體現網頁資訊的層級。
注意：尺寸大小也要控制在使用者能夠接受的範圍內
太大，能夠展示的內容有限。太小，易讀性差，也會比較繁雜。
原型設計技巧：
在利用Mockplus (一款具有豐富元件庫和圖示庫的原型工具)建立網頁原型時，絕大部分的元件都是可以簡單通過寬高屬性或拖拉邊框兩種方式調整其尺寸，輕鬆建立直觀的層次結構。
如圖，Mockplus允許使用者簡單通過寬高屬性或拖拉邊框的方式調整元件尺寸大小。
2.利用介面元素明暗，陰影以及透明度的不同，體現簡單層級
如白底黑字般，同類元素，同一色彩，不同的明暗，陰影以及透明度，也可體現簡單的層級關係。當然，在沒有過多顏色的參與下，不同文字，圖片等多種的頁面元素結合透明度，陰影以及明暗，也可使整款設計極具簡約風和層次感。（點選連結更多的簡約風網頁設計技巧）
如圖，文字明暗，結合尺寸變化，讓頁面層級更加清晰簡約：
原型設計技巧：
而在這一方面，小編髮現Mockplus提供了專門透明度屬性，可以根據層級設計需求，修改屬性數值進行設定。
如若，需要新增元素陰影，也可輕鬆通過元件的重疊實現。
如圖，“圖片”與“形狀”元件的組合，實現陰影的新增。
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的必經之道。
總之，希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。