題記：從2010年進入公司至今2年半的時間，我一直負責(zé)廣告平臺部門的產(chǎn)品設(shè)計。從陌生到熟悉，不知不覺間我竟已對這些產(chǎn)品傾注進了感情……

工具型網(wǎng)站的特點剖析

工具型網(wǎng)站萬變而不離其宗地圍繞兩個關(guān)鍵詞在展開屬于它們各自的情節(jié)，那便是：功能與數(shù)據(jù)。所以談至“體驗”，其實設(shè)計目標也就更加清晰和明確——

１.在保證功能流程順利走完的基礎(chǔ)上，讓用戶的感覺更加舒適；

２.在面對大量數(shù)據(jù)時，讓用戶輕松找到自己所需要的而不被滿屏幕的字符折騰地焦躁不安。

工具型產(chǎn)品普遍業(yè)務(wù)邏輯復(fù)雜且迥異，數(shù)據(jù)量大，往往還涉及不同角色的場景分類……套用一句老話：水很深。 設(shè)計目標則成為了一盞心中的明燈，時刻提點自己要留神腳下的四伏的暗礁。

功能設(shè)計之我見

一級準備???

在處理功能設(shè)計之時，我奉行一句話：先弄明白了再下手。因為個體功能的修改牽涉到整個流程的走向，往往會在原有的基礎(chǔ)上增加操作分流；而平臺中的功能增加更會和其他的功能模塊發(fā)生交互行為或產(chǎn)生影響。在設(shè)計師自己還不能對該功能的設(shè)計了如指掌的時候就匆忙動手，其結(jié)果就是設(shè)計進行到一半，問題暴露然后返工，更悲劇的是全套設(shè)計稿看似高效地做完，之后卻面對全盤洗稿的慘劇。

“腦圖”在這個階段的作用就變得至關(guān)重要。用什么工具出腦圖？專業(yè)軟件Mindmanager、Xmind、FreeMind也好，最原始的筆和紙也罷，只要能全面清晰地表現(xiàn)“關(guān)系”和“影響”就已經(jīng)完成了使命。

上個月正值“廣告經(jīng)理”在原有的支持PC端用戶建立廣告位并制作廣告，查看效果的基礎(chǔ)上，增加支持移動平臺業(yè)務(wù)的功能。牽一發(fā)動全身，移動平臺業(yè)務(wù)的功能加入使得整個“廣告經(jīng)理”眾多模塊都受到影響。下圖便是在與產(chǎn)品經(jīng)理召開需求會議的同時誕生的關(guān)聯(lián)模塊草圖。這張草圖既能在設(shè)計開展前期就相對準確的估計新版本的設(shè)計方向與工作量，又能在設(shè)計過程中保證設(shè)計側(cè)重點與功能設(shè)計的完整性，作用不可小覷。

“腦圖”不僅僅有宏觀把控的全局意義，而且也同樣可以具備指導(dǎo)設(shè)計工作細節(jié)的現(xiàn)實價值。

功能的平臺表現(xiàn)形式

功能模塊具體落實到網(wǎng)站中，其表現(xiàn)形式大體包括：表單及其對應(yīng)控件、按鈕、信息反饋及提示，相互之間的關(guān)系便如下圖所示。

如此一來體驗設(shè)計也便有了出發(fā)點和依托。舉幾個在廣平系統(tǒng)中用到的設(shè)計案例吧。

在智勝廣告平臺（AdWIN）的設(shè)計中，用戶登錄后便直接進入“個人首頁”，在這里我們需要放置本平臺最基礎(chǔ)同時也是用戶所有活動的出發(fā)點：創(chuàng)建廣告。因此我們有理由在這個頁面強調(diào)該入口，使它即能對新用戶起到傳達本平臺的最大功能同時引導(dǎo)操作的作用，又能讓老用戶在登錄之后直奔工作主題。

廣告系統(tǒng)的設(shè)計特殊性還表現(xiàn)在頁面的操作流程很大程度要參考廣告業(yè)內(nèi)既有的規(guī)范，這樣便于用戶理解流程的同時也能更高效的幫助用戶完成目標工作。因此在設(shè)計過程中也會誕生很多“為廣告而生”的表單與控件。根據(jù)實際業(yè)務(wù)的不同，對待某些重要的業(yè)務(wù)流程，設(shè)計師在理解業(yè)務(wù)的基礎(chǔ)上，完全有必要跳出以往常規(guī)控件的束縛，為產(chǎn)品專門定制設(shè)計方案。比如為排期與資源專門設(shè)計的特別定制、視頻廣告的關(guān)聯(lián)設(shè)置等。

業(yè)務(wù)性較強的功能，用戶所需要填寫的表單項勢必遠遠超過單屏，應(yīng)此將用戶表單輸入做到恰到好處地貼心，也是工具型網(wǎng)站的一個細節(jié)設(shè)計點。

在聚贏廣告平臺（MobWIN）的設(shè)計中，遇到過廣告推廣語的輸入字數(shù)限制十分苛刻的業(yè)務(wù)要求：“推廣語1”字數(shù)不得超過10個漢字，同時不得少于9個漢字；“推廣語2”字數(shù)不得超過12個漢字，同時不得少于11個漢字。這是由WAP1.0和WAP2.0或觸摸屏廣告位可顯示的字數(shù)決定的。如果直接用文本告知用戶：“您只能輸入9或10個漢字”，首先文本信息很可能會被用戶忽視，其次如果不做任何即時判斷，在用戶完成漫長的表單填寫后，點擊提交卻因此受挫，那必然是十分苦惱的。因此針對這個文本輸入框給出了如下設(shè)計方案：

功能的增值設(shè)計

功能模塊在完成它自身價值的同時能不能產(chǎn)生額外的價值？這貌似應(yīng)該是產(chǎn)品經(jīng)理在策劃這個功能之初就要想到的問題。而設(shè)計方能為功能增值做些什么呢？我們完全可以通過對頁面結(jié)構(gòu)的設(shè)計和流程的微調(diào)讓它更好的達到增值的效果。

再用廣告經(jīng)理這次的移動平臺新功能的設(shè)計做案例。新建廣告位的流程是用戶建立廣告的必經(jīng)之路，我調(diào)整了本該放在基本表單中的“平臺選擇”RadioButton，把該屬性提取出來，作為信息傳達重點，加入了設(shè)計元素。想必這種形式更能使“廣告經(jīng)理已經(jīng)支持到移動平臺”的信息深入人心，其價值也超過了功能本身。

數(shù)據(jù)的處理

在實用型工具類網(wǎng)站中，用戶均被打上了“業(yè)內(nèi)人士”的標簽。他們大多出于工作或商業(yè)等目的希望獲得對自己有用的專業(yè)數(shù)據(jù)。在廣告平臺的這些項目中，我們使用了如下幾種信息處理方法：

分角色顯示數(shù)據(jù)

從最外層就先為不同角色的人匹配了他們各自需要的數(shù)據(jù)，進行了第一步數(shù)據(jù)去噪。當然能夠使用這種處理方法必須是建立在角色與訴求夠清晰分明的前提下。

數(shù)據(jù)搜索與過濾

無法按角色或已經(jīng)按角色去噪之后還留有海量數(shù)據(jù)之時，數(shù)據(jù)的搜索與過濾就提到了體驗設(shè)計的第一位。搜索項是否符合用戶實際操作邏輯？搜索中用到的控件是否合理與便利？搜索條件何時取交集，何時又呈現(xiàn)并集，又該如何清晰傳達給用戶？哪些項可以放入高級搜索？……隨著設(shè)計的深入這些問題便會應(yīng)運而生，而它們確實值得設(shè)計師深思熟慮。

業(yè)務(wù)上需要的搜索項過多，而選項全部羅列會導(dǎo)致搜索模塊過于龐大時，可以類似Google Adwords采用點擊激活浮層來進行單項設(shè)置，用戶在操作時也相對專注。收起檢索條件模塊，不讓復(fù)雜的搜索條件干擾用戶對結(jié)果列表的閱讀。甚至可以基于業(yè)務(wù)特點為用戶提供保存查詢條件的個性化服務(wù)。

數(shù)據(jù)本身的展現(xiàn)形式

這里我們不談視覺效果令人為之驚嘆的信息可視化處理。傳統(tǒng)數(shù)據(jù)的展現(xiàn)形式不外乎：列表、餅圖、柱狀圖、趨勢圖等以及它們之間的組合。設(shè)計師在運用時，不但要了解頁面中不同數(shù)據(jù)所對應(yīng)的展現(xiàn)形式，還要將它們有機的結(jié)合排布以達到良好的閱讀體驗，必要時可以對傳統(tǒng)的展現(xiàn)形式做一些設(shè)計上的處理。

用戶自定義

上面就說道過，工具型網(wǎng)站的用戶普遍定義為專業(yè)用戶，他們對數(shù)據(jù)獲取要求也是嚴格的。在對重要數(shù)據(jù)的展現(xiàn)中會出現(xiàn)更高級的操控功能，以滿足用戶對數(shù)據(jù)的自由獲取。

寫在最后： “還可以更靈活，還可以更好用”，再回頭看這2年來的設(shè)計稿，我常常會有這樣的想法。工具型網(wǎng)站的體驗設(shè)計的確還有很多值得深入挖掘研究的地方，業(yè)務(wù)邏輯和需求的不同更會延伸出多樣化的設(shè)計解決方案。

來源：騰訊CDC