本文作者分享了其所參與的Web端表單項目，enjoy~

一、項目背景

1.1 背景

CRM?用戶在使用「客戶」輕應用的時候，反映我們預設給他們的表單字段不能滿足他們的需求。比如，一些用戶希望能錄入客戶的傳真號碼，而我們沒有提供此字段。

1.2 目標

（1）用戶目標

能夠添加、刪除以及修改「客戶」表單內容。

（2）設計目標

實現添加、刪除和修改表單字段功能

優化Web端客戶自定義字段界面體驗。

1.3 體驗指標

二、?現狀分析

2.1 發現

（1）基本需求得不到滿足，需要適配舊版瀏覽器

目前用戶只能使用默認模板，無法自定模板，所以用戶反饋需求得不到滿足。 很多企業用戶使用的是筆記本電腦，屏幕可能相對比較小。同時，對于某些企業用 戶來說，電腦系統可能會很好舊，需要適配一些?IE?用戶。

（2）用戶沒有反饋渠道

CRM?產品是全新的產品，還沒有用戶反饋渠道。

2.2 推測與建議

（1）完成整體需求設計，滿足添加、刪除以及修改表單字段需求。

（2）構建用戶反饋通道。

三、設計方案

我在設計界面的時候，我使用了大量的「拖放」設計。 用戶可以通過拖拽的形式，將左側預設的一些控 件拖到界面中的手機內，同時用戶還能修改控件的標題及提示語等。這樣用戶就可以根據自身需求，增添、刪改表單。（少部分系統默認的字段用戶無法刪改。)

四、 方案總結

在設計的過程中，我發現拖放看似很簡單。但事實上，拖放過程涉及了大量細節。比如：

• 用戶怎么知道可以拖動
• 拖放對象的目的是什么？
• 在哪里可以或不可以放置拖動的對象？
• 通過什么視覺元素來表示拖動能力？
• 拖動期間，怎樣表示有效和無效的放置目標？
• 是否允許用戶拖動實際的對象？
• 還是只允許用戶拖動實際對象的幻影？
• 整個拖動與放置期間，要對用戶給出哪些視覺反饋？

在設計的過程中，我參考了Bill Scott & Theresa Neil(2015)所著的《Web界面設計》。在此書 中，作者在第26?中提到：

在拖放期間，需要處理許多特定的狀態。我們把這些狀態稱為趣味瞬間(interesting moment)。書中提到，趣味瞬間是由15個事件與6個相關元素組合而成。

這15個事件分別是：

1. ?面加載：在所有操作發生之前，可以預告拖放功能。例如，可以在?面上顯示一條提示信息，告 訴用戶可以拖放某些元素。
2. 鼠標懸停：鼠標指針懸停在可拖動的對象上方。
3. 鼠標按下：在可拖動對象上按下鼠標鍵。
4. 拖動啟動：鼠標開始移動。(在對象被拖動3像素或鼠標按下超過0.5秒時啟動拖動。)
5. 拖動離開原始位置：可拖動對象離開了原來的位置或包含它的容器。
6. 拖動重新進入原始位置：可拖動對象又進入了原來的位置。
7. 拖動進入有效目標：可拖動對象位于有效的放置目標上方。
8. 拖動退出有效目標：可拖動對象離開有效的放置目標。
9. 拖動進入無效目標：可拖動對象位于無效的放置目標上方。
10. 拖動進入非特定目標：可拖動對象位于放置目標和非放置目標之外的區域。取決于是否將有效目標 之外的區域全都看成無效目標。
11. 拖動懸停于有效目標：可拖動對象暫時停駐于有效目標之上，但用戶沒有釋放鼠標。此時，有效的放置目標通常會突然打開。例如，拖動并在一個文件夾上方暫停，文件夾會打開以示可以接受上方 對象。
12. 拖動懸停于無效目標：可拖動對象暫時停駐于無效目標之上，但用戶沒有釋放鼠標。這個事件有用 嗎？也許可以在此時對用戶給出反饋，說明為什么下面不是一個有效目標。
13. 放置被接受：可拖動對象位于有效目標之上，而且放置已經被接受。
14. 放置被拒絕：可拖動對象位于無效目標之上，而且放置已經被拒絕。此時用不用把被拖動對象移回原處？
15. 放置在父容器上：拖動對象時的位置一般來說不會有什么特殊之處，不過在個別情況下，不同位置會有不同的含義。

在上述的每個事件發生時，都可以在視覺上操作一些相關元素，這些元素包括：

1. ?面（例如，在?面上顯示靜態消息）
2. 光標
3. 工具提示條
4. 拖動對象(或拖動對象的某個部分，例如模塊的標題區)
5. 拖動對象的父容器
6. 放置目標

最后，將這些事件與元素放進一個表格中，就會得到：

每一個事件與元素的交叉點，都是可實現的行為。而上表就像一個備忘錄，可以確保不遺漏交互期間需要 處理的任何情況。但是，考慮到簡潔的需求，我們不一定需要為每一個交叉點都設計一個行為。同時，在 設計行為的時候，我們還需要考慮該行為是否適合拖放。

《Web界面設計》中也提到，適合拖放的情況有以下五種：

1. 拖放模塊（重新排列?面上的模塊）
2. 拖放列表（重新排列列表項的順序）
3. 拖放對象（改變對象間的從屬關系）
4. 拖放操作（在被放置對象上執行操作，比如：拖動上傳功能）
5. 拖放集合（通過拖放操作集合，比如：購物?功能）

如果你設計的界面是屬于以上幾種，那么拖放操作會是很好的選擇。

五、 項目落地后

1. 最后項目落地，因為時間的原因只完成了需求部分——添加、刪除以及修改表單字段。而反饋通路的搭建則因時間與資源的原因，被擱置。不過現在仍然在推動中。

2. 也因為時間的原因，沒有適配較舊的?IE，以及特別小的或奇怪的屏幕(比如正方形的屏幕)。

3. 在經過一對一的可用性測試后，也發現在沒有引導的情況下，「拖拽」這一交互動作的功能可供性特別弱。很多用戶一上來就是「點擊」。所以也考慮未來會將「拖拽」動作改為「點擊」。

作者：王梓銘，云之家用戶體驗部交互設計師。前產品汪， 還能偷偷擼幾行代碼。時常做夢，想改變世界。懷揣著這個夢想，跌跌撞撞嘗試了各種各樣的東西。錄過視頻，開過 Podcast，玩過博客。 最后發現，其實改變世界并不難。從小事做起，幫助能幫助的人，改變能改變的人就已經足夠了。

本文來源于人人都是產品經理合作媒體@金蝶云之家體驗中心（微信ID：UXD-Cloudhub），作者@王梓銘