2014-3-13 藍藍設計的小編
轉載藍藍設計( www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
隨著互聯網信息爆炸式增長，用戶瀏覽單個網頁時，并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看，那么朋友們和藍藍設計一起了解如何在設計中建立良好的視覺層級！
一、 視覺層級為什么重要
左側是設計師期望用戶的瀏覽方式，右側為用戶實際的瀏覽方式—摘自《Don’t make me think》
用戶來到一個網站有他自己特定的目標，如閱讀新聞、購物、查看新消息，然而信息量太大，逐一查看需要大量時間，這就要求網站設計能抓住主流用戶特征，將重點推送給他，用戶找到自己的目標或感興趣的點，才有可能繼續瀏覽或產生下一步動作，否則就會離開。
用戶時間有限加上互聯網信息量巨大，這兩項原因正是考驗視覺設計師要建立良好的視覺層級呈現給用戶，幫助用戶快速找到目標的功力。
二、 建立良好視覺層級的作用
1、 提高識別效率
2、 激發受眾興趣
舉幾個例子：
左地圖是市級展示的地名，當用戶搜索到街道級別時，才會把本街區內的店鋪展示給用戶，在特定的情況下只展示必要的信息，有利于用戶找到自己的目標
我們看新聞時首先要關注的當天的頭條新聞，其次是編輯推薦的，時代周刊首頁很好的讓頭條新聞和logo一起第一眼被我們捕捉到，主次處理的很清晰
辛德勒名單電影中的某鏡頭，通過色彩強烈的對比拉開視覺層次，給觀眾留下了深刻的印象同時成為經典
三、 如何建立視覺層級
我整理了三個方向內容供大家參考：
1、決定不要展示什么
頁面簡約的前提是所呈現的內容都是主流用戶多數情況下必需的，這樣可以讓設計師專注于解決有限的重要問題，而不是大量的信息沒有經過篩選就開始排列優先級
上圖是我們家中常用的遙控器，大多數功能使用量很少甚至一次都沒有用過，右圖將不常用的功能鍵做簡單的刪除，前后對比，后者看起來讓人輕松多了—摘自《簡約至上》
再由設計師對剩下的按鍵進行設計，相信遙控器使用起來會更簡單，干擾更少。
Outlook郵件網頁界面設計，默認情況下對郵件的操作入口都是隱藏的，只有當用戶選擇了郵件之后，才會出現對郵件的操作，同時不常用的操作也會被隱 藏到下拉菜單中，如“答復”菜單下隱藏的“全部答復、轉發”，這種隱藏非核心內容的處理方式，能讓用戶更集中于他可關注的信息和主要操作
2、 深度加工信息
為了更快速的讓信息被感知和接收，我們需要對信息進行加工，簡單的文字羅列需要用戶靜下心閱讀，而經過深層分析的比表層分析的信息，給用戶留下的印象會深刻很多。
舉個例子：國家地理藍鯨網站為了呼吁保護藍鯨，首先要讓人們了解藍鯨的特征及當前的威脅，網站設計通過動態的將藍鯨與其他生物和人造物進行對比，形象直觀的傳達藍鯨的重量、大小，加上視頻展示目前藍鯨的主要生活威脅，用戶即使不閱讀文字也能大致明白網站想要傳達的信息
3、組織信息
1） 表達信息之間的關系
信息之間的關系有并列、關聯、包含、因果等，每種關系都可以通過多種視覺表現形式來傳達，這塊可以深入去探討，我大致舉一些實際項目過程中對信息關系處理的案例，來看看前后的變化
信息的關聯
設計中的留白是很重要的元素，它能很直接的影響用戶對信息關聯關系的理解，如上圖，因為留白的不當，“楚中天”被輕易理解為“林蛋大”
信息的并列
對軟件中眾多功能進行并列的分塊組織，能讓用戶在大塊中再尋找小塊，提高識別效率，如Excel界面，當我們想要對字體樣式進行編輯時，能很快定位到第二模塊進行尋找，而不受其他模塊的干擾
案例：外貿郵界面優化
上面的是我們外貿郵界面目前的狀態，所有的操作都并列擺放，隨著功能的增多，用戶識別的效率大大降低，優化的方案是將相關的操作進行分組，正是運用關聯和并列的信息關系進行設計
信息的因果順序關系
上圖是一個減肥飲料的廣告，通過前后人物的變化，輕松的表達產品的功效，而在我們網頁界面中，主要還是通過色彩的對比和方向指向來傳達順序關系
如常見的步驟條，當前步驟為最顯著焦點，已進行的為二級，讓人感受為已激活的，未走過的步驟為灰色，層級最弱
下圖是PayPal支付頁面的一次優化過程，老版視覺雖然有層級區別，卻打亂了完成任務的視線順序，優化后強調行動點，行動前的視覺順序在同一方向上，順序的關系很明顯，能提升用戶的任務完成率。
信息的包含關系
Fluent新型電子郵件界面設計，箭頭指向、縮進的表現形式很清晰的表達信息的包含關系，雖然這個創業團隊沒有成功，但產品的設計還是很值得借鑒的
2） 呈現信息的重要級別
理順信息之間的關系之后，把握整體頁面的重點，再和次要信息拉開層次呈現給用戶，這是視覺設計師在設計單個頁面時發揮功力的重點。不多說，看一些案例：）
上圖是Airbnb的租房信息detail頁面，租客在租房時最關心的信息為：房間實景、價格、房東的信息；看它的detail信息，也存在很多種類型，但用戶最關心的三類信息因為位置、占用的面積大小讓租客一眼就能掌握房子的基本信息，如有興趣再繼續看更多詳情。
上圖是UI設計師對數據表格的優化過程，第一版為簡單的信息羅列；去掉重復的文案后并將表格本身的界面設計弱化，突出內容本身，第二版相對清晰了很多；第三版繼續將重點進行加粗，改變排列方式可再次減少文案重復情況；第四版是該表格用戶調研過程中反映最好的版本，因為用戶會長期使用該表格來獲取數據，設計將 非重點文案進行隱藏，用戶鼠標移上后才顯示該數據代表的含義，教育過一次后用戶再看這個表格就不再受眾多解釋文案的干擾，直接獲取想要的信息；一個看似簡 單的表格，抓住重點信息，優化空間還是很大的。
上圖我們團隊對alibaba.com提供的服務介紹頁面進行改版的項目，改版前的設計層級區分不明顯，使得用戶進入該頁面時不能快速了解服務的概況，來判 斷是否繼續深入了解；而改版后通過大小的對比，呈現抓住用戶第一眼印象的信息，初步判斷符合自己的需求，用戶才會繼續瀏覽。
3）圍繞用戶行為設計層次
把握整體頁面的重點是設計的前提，但如何才能判斷重點？這需要我們了解用戶特征，以及他來到該頁面的主要任務是什么，再進行設計能保證我們做了正確的事，否則設計的再有層次感也不一定是用戶想要的。
支付寶近期在測試新版首頁，我們來到支付寶首頁最常進行的操作就是登錄，而老版首頁視覺第一焦點是導航及活動推廣位，導航只要在固定的位置，用戶在需要時能 找到就已經達到目的了，它不應該成為頁面的視覺焦點，除非用戶經常在導航進行切換以了解網站提供的服務，在這點上新版首頁弱化了導航及其他應用入口，強化 支付寶本身的品牌傳達及登錄行為，很符合主流用戶的行為習慣。近期在團隊內部推進后臺風格的改版，也涉及到這點，左圖為后臺延續了多年的導航風格，作為操作型界面設計，用戶目的性很強，導航的強化會干擾用戶對內容的識別效率，
右圖為根據用戶行為特征，弱化導航的UI設計，這樣可以將用戶的焦點集中在主內容操作區。
經過在線調研，得出的數據結論表明：新風格導航雖然在視覺上進行弱化，但尋找某任務入口的點擊率要高于老風格，且尋找時間略低于老風格，總體新風格表現更好。
相反，如果我們沒有足夠了解用戶的行為特征，如在原有頁面上增加新功能，再強化也有可能輕易被忽略，舉個我們實際項目例子：
下面左圖框出部分是增加的功能，希望買家在發詢盤給供應商時能對當前的采購需求建組并復用上次的內容，在內部討論時，大家都覺得要強化該選項，讓它成為其他內容的統領，然而調研的結果卻大相徑庭，用戶無法理解這塊內容或干脆以為是貼的廣告內容而忽略；
調整后的版本把新選項弱化為簡單的選擇，復用詢盤的功能分開，得到了用戶和行業專家的認可，設計和用戶期望一致，視覺層級才是有效的。
總結一下，建立有效的視覺層級主要從以下四個方面著手：
1、簡約：有選擇的展現信息，讓用戶在有限的信息中發現重點
2、組織：預先對信息進行科學的分類，整理好優先級，可以得到更好的傳播效果
3、呈現：多種表現方法結合，呈現最好的視覺層級效果，這個點細化后有很多可挖，這里總結了幾個點，歡迎繼續哈
4、引導：遵循用戶習慣，同時給予適當的引導推薦
一些拙見，與君共勉：）