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

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

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

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

一、 視覺層級(jí)為什么重要

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

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

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

二、 建立良好視覺層級(jí)的作用

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

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

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

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

三、 如何建立視覺層級(jí)

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

1、決定不要展示什么

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

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

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

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

2、 深度加工信息

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

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

3、組織信息

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

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

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

設(shè)計(jì)中的留白是很重要的元素，它能很直接的影響用戶對(duì)信息關(guān)聯(lián)關(guān)系的理解，如上圖，因?yàn)榱舭椎牟划?dāng)，“楚中天”被輕易理解為“林蛋大”

信息的并列

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一些拙見，與君共勉：）