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

來(lái)源：http://http://ueo.baidu.com/?p=1997 

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

 

 

 

 

零：項(xiàng)目背景

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

 

一：產(chǎn)品理解

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

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

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

 

二.可用性走查

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

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

 

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

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

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

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

框架層：

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

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

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

表現(xiàn)層：

1.頁(yè)面線條過(guò)多，影響視線的元素較多。

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

 

三.改進(jìn)方案

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

 

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

 

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

 

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

 

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

 

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

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

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

2.知行合一

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

3.形式追隨功能

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