項目實例：淘寶拍賣出價流程浮窗設計小結

　　之前在交互周會上，作為項目分享了之前做過的拍賣線的出價流程，由於講的比較匆忙，所以還是想整理成文字，累積下。做多了日常以後，常常覺得如果不多做字面的積累，很多看似瞬間的累積，很快就會被更多的項目淹沒~~

　　之所以把這個項目分享出來，是因為覺得我們在工作中所做到的大小日常，99%的都不是“無中生有”的，都具有一定的歷史，也一定有一定的痛點，一定也有新的業務變化在裡面，如何在短時間內把握這些因素，迅速轉化為一個合理的方案，是有一定方法的，雖說方法不一定完美，但希望給大家一些思路。

　　開始正題，大概介紹下這個出價流程的背景：拍賣線原來拍賣信息確認的頁面是和普通購買產品是相同的，隨著拍賣業務的發展，覺得有必要以更簡單的形式來進行操作，所以浮窗的形式變隨之成為新的出價流程形式。由於拍賣涉及到很多不同的概念和判斷，而之前做的一版浮窗出價流程並沒有交互設計完整的參與，導致了頁面邏輯中有一些問題，所以需要交互再次參與進來將這個出價流程梳理好，但另一方面，之前盡管有問題的出價流程由於業務需要，卻正在上線中……

　　首先，從項目的背景中，就可以總結出這個項目有幾個特點：1，有大概的交互形式，且已經不能修改(盡管當時也有人覺得浮窗形式不是很好，但一切都在上線中，所以暫時也無法改變)2，發展中的業務和要求革新的心態(這在很多項目中都存在，我們通常不喜歡一成不變，但面對發展中業務，多變也是一個挑戰)3，沒有原始頁面數據(這是最無奈的一點，因為看不到用戶的反饋，讓我們少了很多依據)

　　其次，這個項目從交互角度出發，這個項目有幾個挑戰：1，浮窗形式的界面(區別於一般也頁面，對信息的分類和呈現要求更高)2，需要對流程做出完整的梳理(一般涉及到前後步驟的頁面，最好有完整的流程圖有助於檢驗頁面) 3，之前的版本出自非專業人士(勢必需要糾正一些淺顯的問題，這也是之後開始著手的切入點)

　　總結了以上幾點，確定了這次項目的主要核心點，即原有流程的提升和修正，修正原有出價流程中錯誤的地方，提升原有流程頁面的交互體驗。

　　由於接到這個任務的時候對拍賣業務還不是很熟悉，所以一方面與PD溝通了解拍賣業務，另一方面讓QA把准備上線的拍賣浮窗的每個狀態給到我(因為之前的版本沒有完整的交互稿)如之前所說，先從糾正原有頁面的淺顯問題開始著手。於是我總結了原有頁面中的一些問題，以此歸納出具有針對性的方法。

　　1， 文字引導與輸入框距離太遙遠

　　2， 同類信息被放置在不同的地方

　　是否設置成代理出價是和用戶的出價有關的信息，應該歸類顯示。

　　1、2兩點，實際上都牽涉到了信息歸類顯示的問題。在一個頁面中，一些相關的信息(例如同類的，行為上可以連續操作的)盡量可以放在一起，但其中要避免相同形式表達的信息(例如都是數字的形式)則要分開展現，以免互相混淆。

　　3， 操作行為的起始和完成邏輯不通

　　在上圖中有修改的點擊操作但在接下來卻沒有“確定”或“修改完成”的操作，而是直接通過整個確認出價的動作作為結束，一定程度上並沒有給於用戶一個操作閉合，很容易讓用戶搞不清楚自己正處在修改資料還是出價哪種行為。

　　4， 浮窗文案提示並未從用戶角度出發

　　在這個首先提示用戶“出價成功”，但隨即又告知用戶其他用戶的出價已經超過了他，然後讓用戶重新出價，這個充滿矛盾的頁面，就是因為沒有站在用戶的角度出發。這裡所謂的“出價成功”僅僅只是後台有此次出價的記錄，而對於用戶來說實際應該是“出價失敗”。

　　在浮窗的操作體驗過程中，由於遇到的情況會很多，很有可能在頁面跳轉中流失一定的用戶，所以，避免給予用戶挫折感。並且，不論在哪一步文案的表達都應該站在用戶的角度，更便於在整個拍賣過程中傳達正確的信息。

　　5， 文案展現上主次不明

　　上圖的浮窗中用非加粗的字體表達了一句比較重要的話，而下圖的浮窗卻用加粗的字體表達一句不是那麼重要話。可能在大的頁面中這些都不會這麼凸顯出來，但由於浮窗區域比較小，錯誤就顯而易見了。

　　6， 文案上表達有欠缺

　　上圖浮窗的“建議您設置一個更高的價格並重新出價”語義表達重復而累贅，下圖浮窗中的話也是類似問題。而且同樣都是讓用戶重新出價，使用的確是兩種不同文字的button。

　　4、5、6點都是文案上表達的問題，對於浮窗中的文案，一方面可以通過視覺上不同層次的文案做區分，另一方面文案本身也要符合邏輯。

　　7， 一些必要信息的缺失

　　例如浮窗中的單位“元”不見了，這種常見的問題也很容易被我們忽視。

　　由於分別找出了原有頁面中的一些問題，接下來的思路也顯現出來，將浮窗頁面的信息做大概的功能區隔，並對具體區塊中的信息做規范表達。

　　將浮窗分為三大區域：橙色區域是有關出價的信息/最主要的信息提示;藍色區域是保證金和客戶信息/信息補充區域;綠色區域是判斷區域/出價按鈕或關閉窗口的位置。

　　橙色區域還細分成三個部分，第一行顯示和數字相關的信息/表示當前最主要狀態的信息 ;第二行為重新出價設置;第三行為設置代理價。第二和第三行的信息在一些狀態中是沒有的，所以相應會不做顯示。

　　功能區域的分割只種維度上的，我還在視覺表達層次上做了規范，盡量讓有用的信息更加凸顯出來。通過這個方法即在交互的表現層面上有了一定的規范，在視覺進行的時候也可以有效減少對原有交互設計的誤解。

　　做了以上兩步的同時，在與PD的溝通下，也對整個增加拍的邏輯做了充分的梳理，當然過程中少補了的是Qa同學的輔助，因為QA更加了解業務邏輯中的一些細節，在此基礎上做出了一份邏輯圖。最後就是按照之前制定的規則，將相應的信息“填寫”到相應區域即可。

　　上線的頁面請大家有空參與淘寶拍賣會上拍品活動：http://www.paimai.taobao.com即可看到。如果有任何疑問都可以通過頁面右側的意見入口，給我們提寶貴的意見，相信這個拍賣產品的好的體驗是大家一同參與下得出的結果，我們也會不斷根據用戶的反饋給予產品最及時和有效的改進!

　　作者：琳韻

　　文章出處：Taobao UED