眾所周知，相較于平淡無奇，毫無重點的網頁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的必經之道。
總之，希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
