轉(zhuǎn)載藍藍設(shè)計(   m.sdgs6788.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

隨著互聯(lián)網(wǎng)信息爆炸式增長，用戶瀏覽單個網(wǎng)頁時，并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看，那么朋友們和藍藍設(shè)計一起了解如何在設(shè)計中建立良好的視覺層級！

一、 視覺層級為什么重要

左側(cè)是設(shè)計師期望用戶的瀏覽方式，右側(cè)為用戶實際的瀏覽方式—摘自《Don’t make me think》

用戶來到一個網(wǎng)站有他自己特定的目標，如閱讀新聞、購物、查看新消息，然而信息量太大，逐一查看需要大量時間，這就要求網(wǎng)站設(shè)計能抓住主流用戶特征，將重點推送給他，用戶找到自己的目標或感興趣的點，才有可能繼續(xù)瀏覽或產(chǎn)生下一步動作，否則就會離開。

用戶時間有限加上互聯(lián)網(wǎng)信息量巨大，這兩項原因正是考驗視覺設(shè)計師要建立良好的視覺層級呈現(xiàn)給用戶，幫助用戶快速找到目標的功力。

二、 建立良好視覺層級的作用

1、 提高識別效率
2、 激發(fā)受眾興趣
舉幾個例子：

左地圖是市級展示的地名，當用戶搜索到街道級別時，才會把本街區(qū)內(nèi)的店鋪展示給用戶，在特定的情況下只展示必要的信息，有利于用戶找到自己的目標

我們看新聞時首先要關(guān)注的當天的頭條新聞，其次是編輯推薦的，時代周刊首頁很好的讓頭條新聞和logo一起第一眼被我們捕捉到，主次處理的很清晰

辛德勒名單電影中的某鏡頭，通過色彩強烈的對比拉開視覺層次，給觀眾留下了深刻的印象同時成為經(jīng)典

三、 如何建立視覺層級

我整理了三個方向內(nèi)容供大家參考：

1、決定不要展示什么

頁面簡約的前提是所呈現(xiàn)的內(nèi)容都是主流用戶多數(shù)情況下必需的，這樣可以讓設(shè)計師專注于解決有限的重要問題，而不是大量的信息沒有經(jīng)過篩選就開始排列優(yōu)先級

上圖是我們家中常用的遙控器，大多數(shù)功能使用量很少甚至一次都沒有用過，右圖將不常用的功能鍵做簡單的刪除，前后對比，后者看起來讓人輕松多了—摘自《簡約至上》

再由設(shè)計師對剩下的按鍵進行設(shè)計，相信遙控器使用起來會更簡單，干擾更少。

Outlook郵件網(wǎng)頁界面設(shè)計，默認情況下對郵件的操作入口都是隱藏的，只有當用戶選擇了郵件之后，才會出現(xiàn)對郵件的操作，同時不常用的操作也會被隱 藏到下拉菜單中，如“答復”菜單下隱藏的“全部答復、轉(zhuǎn)發(fā)”，這種隱藏非核心內(nèi)容的處理方式，能讓用戶更集中于他可關(guān)注的信息和主要操作

2、 深度加工信息

為了更快速的讓信息被感知和接收，我們需要對信息進行加工，簡單的文字羅列需要用戶靜下心閱讀，而經(jīng)過深層分析的比表層分析的信息，給用戶留下的印象會深刻很多。

舉個例子：國家地理藍鯨網(wǎng)站為了呼吁保護藍鯨，首先要讓人們了解藍鯨的特征及當前的威脅，網(wǎng)站設(shè)計通過動態(tài)的將藍鯨與其他生物和人造物進行對比，形象直觀的傳達藍鯨的重量、大小，加上視頻展示目前藍鯨的主要生活威脅，用戶即使不閱讀文字也能大致明白網(wǎng)站想要傳達的信息

3、組織信息

1） 表達信息之間的關(guān)系

信息之間的關(guān)系有并列、關(guān)聯(lián)、包含、因果等，每種關(guān)系都可以通過多種視覺表現(xiàn)形式來傳達，這塊可以深入去探討，我大致舉一些實際項目過程中對信息關(guān)系處理的案例，來看看前后的變化

信息的關(guān)聯(lián)

設(shè)計中的留白是很重要的元素，它能很直接的影響用戶對信息關(guān)聯(lián)關(guān)系的理解，如上圖，因為留白的不當，“楚中天”被輕易理解為“林蛋大”

信息的并列

對軟件中眾多功能進行并列的分塊組織，能讓用戶在大塊中再尋找小塊，提高識別效率，如Excel界面，當我們想要對字體樣式進行編輯時，能很快定位到第二模塊進行尋找，而不受其他模塊的干擾

案例：外貿(mào)郵界面優(yōu)化

上面的是我們外貿(mào)郵界面目前的狀態(tài)，所有的操作都并列擺放，隨著功能的增多，用戶識別的效率大大降低，優(yōu)化的方案是將相關(guān)的操作進行分組，正是運用關(guān)聯(lián)和并列的信息關(guān)系進行設(shè)計

信息的因果順序關(guān)系

上圖是一個減肥飲料的廣告，通過前后人物的變化，輕松的表達產(chǎn)品的功效，而在我們網(wǎng)頁界面中，主要還是通過色彩的對比和方向指向來傳達順序關(guān)系
如常見的步驟條，當前步驟為最顯著焦點，已進行的為二級，讓人感受為已激活的，未走過的步驟為灰色，層級最弱

下圖是PayPal支付頁面的一次優(yōu)化過程，老版視覺雖然有層級區(qū)別，卻打亂了完成任務(wù)的視線順序，優(yōu)化后強調(diào)行動點，行動前的視覺順序在同一方向上，順序的關(guān)系很明顯，能提升用戶的任務(wù)完成率。

信息的包含關(guān)系

Fluent新型電子郵件界面設(shè)計，箭頭指向、縮進的表現(xiàn)形式很清晰的表達信息的包含關(guān)系，雖然這個創(chuàng)業(yè)團隊沒有成功，但產(chǎn)品的設(shè)計還是很值得借鑒的

2） 呈現(xiàn)信息的重要級別

理順信息之間的關(guān)系之后，把握整體頁面的重點，再和次要信息拉開層次呈現(xiàn)給用戶，這是視覺設(shè)計師在設(shè)計單個頁面時發(fā)揮功力的重點。不多說，看一些案例：）

上圖是Airbnb的租房信息detail頁面，租客在租房時最關(guān)心的信息為：房間實景、價格、房東的信息；看它的detail信息，也存在很多種類型，但用戶最關(guān)心的三類信息因為位置、占用的面積大小讓租客一眼就能掌握房子的基本信息，如有興趣再繼續(xù)看更多詳情。

上圖是UI設(shè)計師對數(shù)據(jù)表格的優(yōu)化過程，第一版為簡單的信息羅列；去掉重復的文案后并將表格本身的界面設(shè)計弱化，突出內(nèi)容本身，第二版相對清晰了很多；第三版繼續(xù)將重點進行加粗，改變排列方式可再次減少文案重復情況；第四版是該表格用戶調(diào)研過程中反映最好的版本，因為用戶會長期使用該表格來獲取數(shù)據(jù)，設(shè)計將 非重點文案進行隱藏，用戶鼠標移上后才顯示該數(shù)據(jù)代表的含義，教育過一次后用戶再看這個表格就不再受眾多解釋文案的干擾，直接獲取想要的信息；一個看似簡 單的表格，抓住重點信息，優(yōu)化空間還是很大的。

上圖我們團隊對alibaba.com提供的服務(wù)介紹頁面進行改版的項目，改版前的設(shè)計層級區(qū)分不明顯，使得用戶進入該頁面時不能快速了解服務(wù)的概況，來判 斷是否繼續(xù)深入了解；而改版后通過大小的對比，呈現(xiàn)抓住用戶第一眼印象的信息，初步判斷符合自己的需求，用戶才會繼續(xù)瀏覽。

3）圍繞用戶行為設(shè)計層次

把握整體頁面的重點是設(shè)計的前提，但如何才能判斷重點？這需要我們了解用戶特征，以及他來到該頁面的主要任務(wù)是什么，再進行設(shè)計能保證我們做了正確的事，否則設(shè)計的再有層次感也不一定是用戶想要的。

支付寶近期在測試新版首頁，我們來到支付寶首頁最常進行的操作就是登錄，而老版首頁視覺第一焦點是導航及活動推廣位，導航只要在固定的位置，用戶在需要時能 找到就已經(jīng)達到目的了，它不應(yīng)該成為頁面的視覺焦點，除非用戶經(jīng)常在導航進行切換以了解網(wǎng)站提供的服務(wù)，在這點上新版首頁弱化了導航及其他應(yīng)用入口，強化 支付寶本身的品牌傳達及登錄行為，很符合主流用戶的行為習慣。近期在團隊內(nèi)部推進后臺風格的改版，也涉及到這點，左圖為后臺延續(xù)了多年的導航風格，作為操作型界面設(shè)計，用戶目的性很強，導航的強化會干擾用戶對內(nèi)容的識別效率，

右圖為根據(jù)用戶行為特征，弱化導航的UI設(shè)計，這樣可以將用戶的焦點集中在主內(nèi)容操作區(qū)。

經(jīng)過在線調(diào)研，得出的數(shù)據(jù)結(jié)論表明：新風格導航雖然在視覺上進行弱化，但尋找某任務(wù)入口的點擊率要高于老風格，且尋找時間略低于老風格，總體新風格表現(xiàn)更好。

相反，如果我們沒有足夠了解用戶的行為特征，如在原有頁面上增加新功能，再強化也有可能輕易被忽略，舉個我們實際項目例子：
下面左圖框出部分是增加的功能，希望買家在發(fā)詢盤給供應(yīng)商時能對當前的采購需求建組并復用上次的內(nèi)容，在內(nèi)部討論時，大家都覺得要強化該選項，讓它成為其他內(nèi)容的統(tǒng)領(lǐng)，然而調(diào)研的結(jié)果卻大相徑庭，用戶無法理解這塊內(nèi)容或干脆以為是貼的廣告內(nèi)容而忽略；
調(diào)整后的版本把新選項弱化為簡單的選擇，復用詢盤的功能分開，得到了用戶和行業(yè)專家的認可，設(shè)計和用戶期望一致，視覺層級才是有效的。

總結(jié)一下，建立有效的視覺層級主要從以下四個方面著手：

1、簡約：有選擇的展現(xiàn)信息，讓用戶在有限的信息中發(fā)現(xiàn)重點
2、組織：預(yù)先對信息進行科學的分類，整理好優(yōu)先級，可以得到更好的傳播效果
3、呈現(xiàn)：多種表現(xiàn)方法結(jié)合，呈現(xiàn)最好的視覺層級效果，這個點細化后有很多可挖，這里總結(jié)了幾個點，歡迎繼續(xù)哈
4、引導：遵循用戶習慣，同時給予適當?shù)囊龑扑]

一些拙見，與君共勉：）