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