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