本文出自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的必經之道。
總之，希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。