工具型網站的體驗設計——從廣告平臺出發

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

工具型網站的特點剖析

工具型網站萬變而不離其宗地圍繞兩個關鍵字在展開屬於它們各自的情節，那便是：功能與資料。 所以談至「體驗」，其實設計目標也就更加清晰和明確——

１.在保證功能流程順利走完的基礎上，讓使用者的感覺更加舒適；

２.在面對大量資料時，讓使用者輕鬆找到自己所需要的而不被滿螢幕的字元折騰地焦躁不安。

工具型產品普遍業務邏輯複雜且迥異，資料量大，往往還涉及不同角色的場景分類...... 套用一句老話：水很深。 設計目標則成為了一盞心中的明燈，時刻提點自己要留神腳下的四伏的暗礁。

功能設計之我見

一級準備

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

「腦圖」在這個階段的作用就變得至關重要。 用什麼工具出腦圖？ 專業軟體Mindmanager、Xmind、FreeMind也好，最原始的筆和紙也罷，只要能全面清晰地表現「關係」和「影響」就已經完成了使命。

上個月正值「廣告經理」在原有的支援PC端使用者建立廣告位並製作廣告，查看效果的基礎上，增加支援移動平臺業務的功能。 牽一發動全身，移動平臺業務的功能加入使得整個「廣告經理」眾多模組都受到影響。 下圖便是在與產品經理召開需求會議的同時誕生的關聯模組草圖。 這張草圖既能在設計開展前期就相對準確的估計新版本的設計方向與工作量，又能在設計過程中保證設計側重點與功能設計的完整性，作用不可小覷。

「腦圖」不僅僅有宏觀把控的全域意義，而且也同樣可以具備指導設計工作細節的現實價值。

同樣以此次「廣告經理-移動平臺版」為例，加入了移動業務，必然導致各原有主功能的走向出現分流，而基於廣告的業務邏輯，不同平臺上的廣告大到展現形式，小到允許輸入的字元數等等都會出現不同的變化。 靜下心來通過「腦圖」梳理分流時的各種情況，然後淡定的打開設計工具開始工作，這肯定是比自以為很清楚，做到哪算哪來的科學和高效的，不是麼？

功能的平臺表現形式

功能模組具體落實到網站中，其表現形式大體包括：表單及其對應控制項、按鈕、資訊回饋及提示，相互之間的關係便如下圖所示。

如此一來體驗設計也便有了出發點和依託。 舉幾個在廣平系統中用到的設計案例吧。

在智勝廣告平臺（AdWIN）的設計中，使用者登錄後便直接進入「個人首頁」，在這裡我們需要放置本平臺最基礎同時也是使用者所有活動的出發點：創建廣告。 因此我們有理由在這個頁面強調該入口，使它即能對新使用者起到傳達本平臺的最大功能同時引導操作的作用，又能讓老使用者在登錄之後直奔工作主題。

廣告系統的設計特殊性還表現在頁面的操作流程很大程度要參考廣告業內既有的規範，這樣便於使用者理解流程的同時也能更高效的説明使用者完成目標工作。 因此在設計過程中也會誕生很多「為廣告而生」的表單與控制項。 根據實際業務的不同，對待某些重要的業務流程，設計師在理解業務的基礎上，完全有必要跳出以往常規控制項的束縛，為產品專門定制設計方案。 比如為排期與資源專門設計的特別定制、視頻廣告的關聯設置等。

業務性較強的功能，使用者所需要填寫的表單項勢必遠遠超過單屏，應此將使用者表單輸入做到恰到好處地貼心，也是工具型網站的一個細節設計點。

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

功能的增值設計

功能模組在完成它自身價值的同時能不能產生額外的價值？ 這貌似應該是產品經理在策劃這個功能之初就要想到的問題。 而設計方能為功能增值做些什麼呢？ 我們完全可以通過對頁面結構的設計和流程的微調讓它更好的達到增值的效果。

再用廣告經理這次的移動平臺新功能的設計做案例。 新建廣告位的流程是使用者建立廣告的必經之路，我調整了本該放在基本表單中的「平臺選擇」RadioButton，把該屬性提取出來，作為資訊傳達重點，加入了設計項目。 想必這種形式更能使「廣告經理已經支援到移動平臺」的資訊深入人心，其價值也超過了功能本身。

資料的處理

在實用型工具類網站中，使用者均被打上了「業內人士」的標籤。 他們大多出於工作或商業等目的希望獲得對自己有用的專業資料。 在廣告平臺的這些專案中，我們使用了如下幾種資訊處理方法：

分角色顯示資料

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

資料搜索與過濾

無法按角色或已經按角色去噪之後還留有海量資料之時，資料的搜索與過濾就提到了體驗設計的第一位。 搜索項是否符合使用者實際操作邏輯？ 搜索中用到的控制項是否合理與便利？ 搜尋條件何時取交集，何時又呈現並集，又該如何清晰傳達給使用者？ 哪些項可以放入高級搜索？ ...... 隨著設計的深入這些問題便會應運而生，而它們確實值得設計師深思熟慮。

業務上需要的搜索項過多，而選項全部羅列會導致搜索模組過於龐大時，可以類似Google Adwords採用點擊啟動浮層來進行單項設置，使用者在操作時也相對專注。 收起檢索條件模組，不讓複雜的搜尋條件干擾使用者對結果清單的閱讀。 甚至可以基於業務特點為使用者提供保存查詢準則的個人化服務。

資料本身的展現形式

這裡我們不談視覺效果令人為之驚歎的資訊視覺化處理。 傳統資料的展現形式不外乎：清單、圓形圖、柱狀圖、趨勢圖等以及它們之間的組合。 設計師在運用時，不但要瞭解頁面中不同資料所對應的展現形式，還要將它們有機的結合排布以達到良好的閱讀體驗，必要時可以對傳統的展現形式做一些設計上的處理。

使用者自訂

上面就說道過，工具型網站的使用者普遍定義為專業使用者，他們對資料獲取要求也是嚴格的。 在對重要資料的展現中會出現更高級的操控功能，以滿足使用者對資料的自由獲取。

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