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