題記：從2010年進(jìn)入公司至今2年半的時(shí)間，我一直負(fù)責(zé)廣告平臺(tái)部門的產(chǎn)品設(shè)計(jì)。從陌生到熟悉，不知不覺(jué)間我竟已對(duì)這些產(chǎn)品傾注進(jìn)了感情……
工具型網(wǎng)站的特點(diǎn)剖析
工具型網(wǎng)站萬(wàn)變而不離其宗地圍繞兩個(gè)關(guān)鍵詞在展開(kāi)屬于它們各自的情節(jié)，那便是：功能與數(shù)據(jù)。所以談至“體驗(yàn)”，其實(shí)設(shè)計(jì)目標(biāo)也就更加清晰和明確——
１。在保證功能流程順利走完的基礎(chǔ)上，讓用戶的感覺(jué)更加舒適；
２。在面對(duì)大量數(shù)據(jù)時(shí)，讓用戶輕松找到自己所需要的而不被滿屏幕的字符折騰地焦躁不安。
工具型產(chǎn)品普遍業(yè)務(wù)邏輯復(fù)雜且迥異，數(shù)據(jù)量大，往往還涉及不同角色的場(chǎng)景分類……套用一句老話：水很深。 設(shè)計(jì)目標(biāo)則成為了一盞心中的明燈，時(shí)刻提點(diǎn)自己要留神腳下的四伏的暗礁。
功能設(shè)計(jì)之我見(jiàn)
一級(jí)準(zhǔn)備
在處理功能設(shè)計(jì)之時(shí)，我奉行一句話：先弄明白了再下手。因?yàn)閭€(gè)體功能的修改牽涉到整個(gè)流程的走向，往往會(huì)在原有的基礎(chǔ)上增加操作分流；而平臺(tái)中的功能增加更會(huì)和其他的功能模塊發(fā)生交互行為或產(chǎn)生影響。在設(shè)計(jì)師自己還不能對(duì)該功能的設(shè)計(jì)了如指掌的時(shí)候就匆忙動(dòng)手，其結(jié)果就是設(shè)計(jì)進(jìn)行到一半，問(wèn)題暴露然后返工，更悲劇的是全套設(shè)計(jì)稿看似高效地做完，之后卻面對(duì)全盤洗稿的慘劇。
“腦圖”在這個(gè)階段的作用就變得至關(guān)重要。用什么工具出腦圖？專業(yè)軟件mindmanager、xmind、freemind也好，最原始的筆和紙也罷，只要能全面清晰地表現(xiàn)“關(guān)系”和“影響”就已經(jīng)完成了使命。
上個(gè)月正值“廣告經(jīng)理”在原有的支持pc端用戶建立廣告位并制作廣告，查看效果的基礎(chǔ)上，增加支持移動(dòng)平臺(tái)業(yè)務(wù)的功能。牽一發(fā)動(dòng)全身，移動(dòng)平臺(tái)業(yè)務(wù)的功能加入使得整個(gè)“廣告經(jīng)理”眾多模塊都受到影響。下圖便是在與產(chǎn)品經(jīng)理召開(kāi)需求會(huì)議的同時(shí)誕生的關(guān)聯(lián)模塊草圖。這張草圖既能在設(shè)計(jì)開(kāi)展前期就相對(duì)準(zhǔn)確的估計(jì)新版本的設(shè)計(jì)方向與工作量，又能在設(shè)計(jì)過(guò)程中保證設(shè)計(jì)側(cè)重點(diǎn)與功能設(shè)計(jì)的完整性，作用不可小覷。
“腦圖”不僅僅有宏觀把控的全局意義，而且也同樣可以具備指導(dǎo)設(shè)計(jì)工作細(xì)節(jié)的現(xiàn)實(shí)價(jià)值。
同樣以此次“廣告經(jīng)理-移動(dòng)平臺(tái)版”為例，加入了移動(dòng)業(yè)務(wù)，必然導(dǎo)致各原有主功能的走向出現(xiàn)分流，而基于廣告的業(yè)務(wù)邏輯，不同平臺(tái)上的廣告大到展現(xiàn)形式，小到允許輸入的字符數(shù)等等都會(huì)出現(xiàn)不同的變化。靜下心來(lái)通過(guò)“腦圖”梳理分流時(shí)的各種情況，然后淡定的打開(kāi)設(shè)計(jì)工具開(kāi)始工作，這肯定是比自以為很清楚，做到哪算哪來(lái)的科學(xué)和高效的，不是么？
功能的平臺(tái)表現(xiàn)形式
功能模塊具體落實(shí)到網(wǎng)站中，其表現(xiàn)形式大體包括：表單及其對(duì)應(yīng)控件、按鈕、信息反饋及提示，相互之間的關(guān)系便如下圖所示。
如此一來(lái)體驗(yàn)設(shè)計(jì)也便有了出發(fā)點(diǎn)和依托。舉幾個(gè)在廣平系統(tǒng)中用到的設(shè)計(jì)案例吧。
在智勝?gòu)V告平臺(tái)（adwin）的設(shè)計(jì)中，用戶登錄后便直接進(jìn)入“個(gè)人首頁(yè)”，在這里我們需要放置本平臺(tái)最基礎(chǔ)同時(shí)也是用戶所有活動(dòng)的出發(fā)點(diǎn)：創(chuàng)建廣告。因此我們有理由在這個(gè)頁(yè)面強(qiáng)調(diào)該入口，使它即能對(duì)新用戶起到傳達(dá)本平臺(tái)的最大功能同時(shí)引導(dǎo)操作的作用，又能讓老用戶在登錄之后直奔工作主題。
廣告系統(tǒng)的設(shè)計(jì)特殊性還表現(xiàn)在頁(yè)面的操作流程很大程度要參考廣告業(yè)內(nèi)既有的規(guī)范，這樣便于用戶理解流程的同時(shí)也能更高效的幫助用戶完成目標(biāo)工作。因此在設(shè)計(jì)過(guò)程中也會(huì)誕生很多“為廣告而生”的表單與控件。根據(jù)實(shí)際業(yè)務(wù)的不同，對(duì)待某些重要的業(yè)務(wù)流程，設(shè)計(jì)師在理解業(yè)務(wù)的基礎(chǔ)上，完全有必要跳出以往常規(guī)控件的束縛，為產(chǎn)品專門定制設(shè)計(jì)方案。比如為排期與資源專門設(shè)計(jì)的特別定制、視頻廣告的關(guān)聯(lián)設(shè)置等。
業(yè)務(wù)性較強(qiáng)的功能，用戶所需要填寫的表單項(xiàng)勢(shì)必遠(yuǎn)遠(yuǎn)超過(guò)單屏，應(yīng)此將用戶表單輸入做到恰到好處地貼心，也是工具型網(wǎng)站的一個(gè)細(xì)節(jié)設(shè)計(jì)點(diǎn)。
在聚贏廣告平臺(tái)（mobwin）的設(shè)計(jì)中，遇到過(guò)廣告推廣語(yǔ)的輸入字?jǐn)?shù)限制十分苛刻的業(yè)務(wù)要求：“推廣語(yǔ)1”字?jǐn)?shù)不得超過(guò)10個(gè)漢字，同時(shí)不得少于9個(gè)漢字；“推廣語(yǔ)2”字?jǐn)?shù)不得超過(guò)12個(gè)漢字，同時(shí)不得少于11個(gè)漢字。這是由wap1.0和wap2.0或觸摸屏廣告位可顯示的字?jǐn)?shù)決定的。如果直接用文本告知用戶：“您只能輸入9或10個(gè)漢字”，首先文本信息很可能會(huì)被用戶忽視，其次如果不做任何即時(shí)判斷，在用戶完成漫長(zhǎng)的表單填寫后，點(diǎn)擊提交卻因此受挫，那必然是十分苦惱的。因此針對(duì)這個(gè)文本輸入框給出了如下設(shè)計(jì)方案：
功能的增值設(shè)計(jì)
功能模塊在完成它自身價(jià)值的同時(shí)能不能產(chǎn)生額外的價(jià)值？這貌似應(yīng)該是產(chǎn)品經(jīng)理在策劃這個(gè)功能之初就要想到的問(wèn)題。而設(shè)計(jì)方能為功能增值做些什么呢？我們完全可以通過(guò)對(duì)頁(yè)面結(jié)構(gòu)的設(shè)計(jì)和流程的微調(diào)讓它更好的達(dá)到增值的效果。
再用廣告經(jīng)理這次的移動(dòng)平臺(tái)新功能的設(shè)計(jì)做案例。新建廣告位的流程是用戶建立廣告的必經(jīng)之路，我調(diào)整了本該放在基本表單中的“平臺(tái)選擇”radiobutton，把該屬性提取出來(lái)，作為信息傳達(dá)重點(diǎn)，加入了設(shè)計(jì)元素。想必這種形式更能使“廣告經(jīng)理已經(jīng)支持到移動(dòng)平臺(tái)”的信息深入人心，其價(jià)值也超過(guò)了功能本身。
數(shù)據(jù)的處理
在實(shí)用型工具類網(wǎng)站中，用戶均被打上了“業(yè)內(nèi)人士”的標(biāo)簽。他們大多出于工作或商業(yè)等目的希望獲得對(duì)自己有用的專業(yè)數(shù)據(jù)。在廣告平臺(tái)的這些項(xiàng)目中，我們使用了如下幾種信息處理方法：
分角色顯示數(shù)據(jù)
從最外層就先為不同角色的人匹配了他們各自需要的數(shù)據(jù)，進(jìn)行了第一步數(shù)據(jù)去噪。當(dāng)然能夠使用這種處理方法必須是建立在角色與訴求夠清晰分明的前提下。
數(shù)據(jù)搜索與過(guò)濾
無(wú)法按角色或已經(jīng)按角色去噪之后還留有海量數(shù)據(jù)之時(shí)，數(shù)據(jù)的搜索與過(guò)濾就提到了體驗(yàn)設(shè)計(jì)的第一位。搜索項(xiàng)是否符合用戶實(shí)際操作邏輯？搜索中用到的控件是否合理與便利？搜索條件何時(shí)取交集，何時(shí)又呈現(xiàn)并集，又該如何清晰傳達(dá)給用戶？哪些項(xiàng)可以放入高級(jí)搜索？……隨著設(shè)計(jì)的深入這些問(wèn)題便會(huì)應(yīng)運(yùn)而生，而它們確實(shí)值得設(shè)計(jì)師深思熟慮。
業(yè)務(wù)上需要的搜索項(xiàng)過(guò)多，而選項(xiàng)全部羅列會(huì)導(dǎo)致搜索模塊過(guò)于龐大時(shí)，可以類似google adwords采用點(diǎn)擊激活浮層來(lái)進(jìn)行單項(xiàng)設(shè)置，用戶在操作時(shí)也相對(duì)專注。收起檢索條件模塊，不讓復(fù)雜的搜索條件干擾用戶對(duì)結(jié)果列表的閱讀。甚至可以基于業(yè)務(wù)特點(diǎn)為用戶提供保存查詢條件的個(gè)性化服務(wù)。
數(shù)據(jù)本身的展現(xiàn)形式
這里我們不談視覺(jué)效果令人為之驚嘆的信息可視化處理。傳統(tǒng)數(shù)據(jù)的展現(xiàn)形式不外乎：列表、餅圖、柱狀圖、趨勢(shì)圖等以及它們之間的組合。設(shè)計(jì)師在運(yùn)用時(shí)，不但要了解頁(yè)面中不同數(shù)據(jù)所對(duì)應(yīng)的展現(xiàn)形式，還要將它們有機(jī)的結(jié)合排布以達(dá)到良好的閱讀體驗(yàn)，必要時(shí)可以對(duì)傳統(tǒng)的展現(xiàn)形式做一些設(shè)計(jì)上的處理。
用戶自定義
上面就說(shuō)道過(guò)，工具型網(wǎng)站的用戶普遍定義為專業(yè)用戶，他們對(duì)數(shù)據(jù)獲取要求也是嚴(yán)格的。在對(duì)重要數(shù)據(jù)的展現(xiàn)中會(huì)出現(xiàn)更高級(jí)的操控功能，以滿足用戶對(duì)數(shù)據(jù)的自由獲取。
寫在最后： “還可以更靈活，還可以更好用”，再回頭看這2年來(lái)的設(shè)計(jì)稿，我常常會(huì)有這樣的想法。工具型網(wǎng)站的體驗(yàn)設(shè)計(jì)的確還有很多值得深入挖掘研究的地方，業(yè)務(wù)邏輯和需求的不同更會(huì)延伸出多樣化的設(shè)計(jì)解決方案。