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

來源：http://www.uisdc.com/banner-click-rate

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

零：項目背景

百度網(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)粘Ｉ钪?，大部分都是在工作時，或者是特定的時段內(nèi)才會使用到。所以把握好商業(yè)產(chǎn)品的特性，是做好商業(yè)產(chǎn)品用戶體驗(yàn)的關(guān)鍵。

研究一個產(chǎn)品的特性，一個比較簡單的方法就是觀察產(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é)約時間。因?yàn)樯虡I(yè)產(chǎn)品更像是一個用戶的工具，如果工具不能夠操作，那么用戶就沒有使用的動力了。因此，對于商業(yè)產(chǎn)品來講，功能>性能>易用>美觀。

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

 

二.可用性走查

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

對整個系統(tǒng)超過30個頁面進(jìn)行可用性走查，根據(jù)用戶體驗(yàn)設(shè)計要素，把系統(tǒng)按照結(jié)構(gòu)層、框架層和表現(xiàn)層來進(jìn)行梳理。結(jié)構(gòu)層解決用戶如何導(dǎo)到某個頁面，做完去哪里。在梳理結(jié)構(gòu)層的過程中不具體思考交互方式，只是從任務(wù)出發(fā)，來看流程和結(jié)構(gòu)上能不能滿足功能，在滿足功能的基礎(chǔ)上有沒有提升的空間。框架層則解決頁面的具體布局和交互方式，對系統(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è)計師最初設(shè)計相差甚遠(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)在頁面下方，并能夠展開和收起，使用時一鍵啟用和關(guān)閉，真正按需呈現(xiàn)。

 

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

 

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

 

四.設(shè)計思考：

1.適度設(shè)計

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

2.知行合一

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

3.形式追隨功能

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