轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.miumiuwan.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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/banner-click-rate

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

零：項(xiàng)目背景

百度網(wǎng)盟推廣平臺是配合網(wǎng)盟推廣用戶的在線營銷平臺，推廣客戶可以在平臺上實(shí)現(xiàn)全方位的推廣管理，包括搭建賬戶結(jié)構(gòu)、配置預(yù)算、定向方式、監(jiān)控賬戶投放效果等等復(fù)雜的賬戶操作。但是由于系統(tǒng)的復(fù)雜度和功能性的增加，原有的系統(tǒng)對新功能的支撐顯得有些捉襟見肘，所以在今年8月份，我們開始了對系統(tǒng)體驗(yàn)的分析和優(yōu)化工作。

 

一：產(chǎn)品理解

廣告投放平臺廣義上屬于商業(yè)產(chǎn)品體系，商業(yè)產(chǎn)品和用戶產(chǎn)品在體驗(yàn)的關(guān)注點(diǎn)上是有顯著區(qū)別的。最大的區(qū)別就是使用需求不同，商業(yè)產(chǎn)品一般不會出現(xiàn)在我們?nèi)粘Ｉ钪?，大部分都是在工作時(shí)，或者是特定的時(shí)段內(nèi)才會使用到。所以把握好商業(yè)產(chǎn)品的特性，是做好商業(yè)產(chǎn)品用戶體驗(yàn)的關(guān)鍵。

研究一個(gè)產(chǎn)品的特性，一個(gè)比較簡單的方法就是觀察產(chǎn)品的“零容忍點(diǎn)”，也就是產(chǎn)品的哪些特性如果不能夠滿足用戶，用戶就會產(chǎn)生強(qiáng)烈反感，甚至放棄使用。比如說現(xiàn)在非?；鸬囊苿踊ヂ?lián)網(wǎng)應(yīng)用，也就是app產(chǎn)品，用戶的零容忍點(diǎn)基本上會停留在視覺層面上。因?yàn)槲覀兊囊苿釉O(shè)備分辨率較高以及產(chǎn)品的使用場景（都是近距離使用）的關(guān)系，用戶對產(chǎn)品的視覺效果會非常嚴(yán)苛，如果產(chǎn)品的icon或者界面丑陋，基本上就不會用了。但是，對于一些小說站點(diǎn)或者視頻站點(diǎn)來說，視覺就不是用戶最主要關(guān)注的了，這類產(chǎn)品，用戶最關(guān)注的是他們的內(nèi)容，如果內(nèi)容不夠好，別人有的你沒有，那么用戶就會離開，即使你的界面十分精美，只能是華而不實(shí)。同樣，如果把思路切換到商業(yè)產(chǎn)品上，我們會發(fā)現(xiàn)用戶最在意的是能夠能夠在使用的功能滿足和節(jié)約時(shí)間。因?yàn)樯虡I(yè)產(chǎn)品更像是一個(gè)用戶的工具，如果工具不能夠操作，那么用戶就沒有使用的動力了。因此，對于商業(yè)產(chǎn)品來講，功能>性能>易用>美觀。

所以，對于商業(yè)產(chǎn)品設(shè)計(jì)師來說，我們的思維中要一直有一個(gè)聲音，那就是我們的優(yōu)化是不是能夠真正的提高用戶的效率，在效率和效果面前，我們要強(qiáng)迫自己選擇前者。

 

二.可用性走查

平臺系統(tǒng)的復(fù)雜度之高，超出預(yù)期，怎樣衡量復(fù)雜系統(tǒng)的操作效率提升是體驗(yàn)優(yōu)化的一個(gè)難題，思考之后，把產(chǎn)品的易學(xué)性作為我的設(shè)計(jì)出發(fā)點(diǎn)，就是通過統(tǒng)一、規(guī)范的系統(tǒng)能夠讓用戶更容易學(xué)習(xí)和掌握平臺產(chǎn)品具體的使用方法。

對整個(gè)系統(tǒng)超過30個(gè)頁面進(jìn)行可用性走查，根據(jù)用戶體驗(yàn)設(shè)計(jì)要素，把系統(tǒng)按照結(jié)構(gòu)層、框架層和表現(xiàn)層來進(jìn)行梳理。結(jié)構(gòu)層解決用戶如何導(dǎo)到某個(gè)頁面，做完去哪里。在梳理結(jié)構(gòu)層的過程中不具體思考交互方式，只是從任務(wù)出發(fā)，來看流程和結(jié)構(gòu)上能不能滿足功能，在滿足功能的基礎(chǔ)上有沒有提升的空間?？蚣軐觿t解決頁面的具體布局和交互方式，對系統(tǒng)頁面的控件、布局等詳細(xì)梳理，尋找改進(jìn)空間。表現(xiàn)層解決產(chǎn)品的視覺呈現(xiàn)。

 

走查的主要結(jié)果如下：

結(jié)構(gòu)層：

1.新建流程和修改流程不可逆，也就是說新建流程的設(shè)置，在修改的過程中無法完全一致的修改，這難免會讓用戶產(chǎn)生困惑，我去哪里修改呢。

2.工具使用頁面跳轉(zhuǎn)次數(shù)多，有的能夠跳回，有的不能夠跳回。

框架層：

1.多版本共存，遺留下來的一些最初版本的頁面，交互和布局都和新頁面不一致。

2.細(xì)節(jié)交互不一致，同一操作區(qū)域button的操作方式存在多種。

3.異常提示五花八門，沒有規(guī)范。

表現(xiàn)層：

1.頁面線條過多，影響視線的元素較多。

2.前端出于性能考慮提高了圖片壓縮比率，使得視覺呈現(xiàn)與設(shè)計(jì)師最初設(shè)計(jì)相差甚遠(yuǎn)。

 

三.改進(jìn)方案

針對走查過程中的問題，在改進(jìn)方案的確定過程中，充分考慮到系統(tǒng)的性能和用戶的操作流，打磨系統(tǒng)結(jié)構(gòu)和框架，列舉一些體驗(yàn)優(yōu)化點(diǎn)，如下：

 

1.引入全浮層的操作方式，能夠在線性結(jié)構(gòu)中帶入想要的控件和模塊，讓層級更明了，打破新建和修改流程的壁壘。

 

2.將工具作為工具箱出現(xiàn)在頁面下方，并能夠展開和收起，使用時(shí)一鍵啟用和關(guān)閉，真正按需呈現(xiàn)。

 

3.全新的視覺方案，從系統(tǒng)性能出發(fā)和前端共建產(chǎn)品視覺規(guī)范。優(yōu)化后的系統(tǒng)UI，漸變和圓角均由css完成，考慮到瀏覽器的兼容性問題，還提供了純色版本的配色方案。

 

4.建立產(chǎn)品交互及視覺規(guī)范，提高溝通效率，降低風(fēng)險(xiǎn)。

 

四.設(shè)計(jì)思考：

1.適度設(shè)計(jì)

商業(yè)產(chǎn)品對于適度設(shè)計(jì)的訴求更強(qiáng)烈，用使用者常見的操作方式，例如checkbox、redio button等互聯(lián)網(wǎng)成型的交互方式更容易讓用戶接受和理解。另外，在選取交互和視覺方案的過程中，要充分考慮后期的實(shí)現(xiàn)成本和性能成本，低碳的設(shè)計(jì)能夠讓系統(tǒng)運(yùn)行的更加安全流暢，更受歡迎。

2.知行合一

商業(yè)產(chǎn)品的使用者在使用產(chǎn)品的過程中是有著明確目的的，是在明確的decision上進(jìn)行的操作，所以盡可能少在流程中打斷用戶，讓他們困惑，最好在用戶需要的時(shí)候能夠提供工具或者解釋說明等手段減少用戶思考時(shí)間，提高使用效率。

3.形式追隨功能

商業(yè)產(chǎn)品的視覺要更好的為功能服務(wù)，炫酷的視覺和交互經(jīng)不起半秒鐘的延遲，最受挫的是用戶根本care不到（他們真的很忙）。