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

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

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

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

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

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

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

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

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

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

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

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

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

4，? 浮窗文案提示并未從用戶角度出發(fā)

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

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

5，? 文案展現(xiàn)上主次不明

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

6，? 文案上表達有欠缺

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

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

7，? 一些必要信息的缺失

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

由于分別找出了原有頁面中的一些問題，接下來的思路也顯現(xiàn)出來，將浮窗頁面的信息做大概的功能區(qū)隔，并對具體區(qū)塊中的信息做規(guī)范表達。

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

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

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

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

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

琳韻 撰于2011.12.23

來源：http://ued.taobao.com