2018網頁UI設計：輕鬆搞定視覺層次感

本文出自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的必經之道。

總之，但願以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啓發。