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

一、項(xiàng)目背景

1.1 背景

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

1.2 目標(biāo)

（1）用戶目標(biāo)

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

（2）設(shè)計(jì)目標(biāo)

實(shí)現(xiàn)添加、刪除和修改表單字段功能

優(yōu)化Web端客戶自定義字段界面體驗(yàn)。

1.3 體驗(yàn)指標(biāo)

二、?現(xiàn)狀分析

2.1 發(fā)現(xiàn)

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

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

（2）用戶沒有反饋渠道

CRM?產(chǎn)品是全新的產(chǎn)品，還沒有用戶反饋渠道。

2.2 推測與建議

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

（2）構(gòu)建用戶反饋通道。

三、設(shè)計(jì)方案

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

四、 方案總結(jié)

在設(shè)計(jì)的過程中，我發(fā)現(xiàn)拖放看似很簡單。但事實(shí)上，拖放過程涉及了大量細(xì)節(jié)。比如：

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

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

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

這15個(gè)事件分別是：

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

在上述的每個(gè)事件發(fā)生時(shí)，都可以在視覺上操作一些相關(guān)元素，這些元素包括：

1. ?面（例如，在?面上顯示靜態(tài)消息）
2. 光標(biāo)
3. 工具提示條
4. 拖動(dòng)對象(或拖動(dòng)對象的某個(gè)部分，例如模塊的標(biāo)題區(qū))
5. 拖動(dòng)對象的父容器
6. 放置目標(biāo)

最后，將這些事件與元素放進(jìn)一個(gè)表格中，就會(huì)得到：

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

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

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

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

五、 項(xiàng)目落地后

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

2. 也因?yàn)闀r(shí)間的原因，沒有適配較舊的?IE，以及特別小的或奇怪的屏幕(比如正方形的屏幕)。

3. 在經(jīng)過一對一的可用性測試后，也發(fā)現(xiàn)在沒有引導(dǎo)的情況下，「拖拽」這一交互動(dòng)作的功能可供性特別弱。很多用戶一上來就是「點(diǎn)擊」。所以也考慮未來會(huì)將「拖拽」動(dòng)作改為「點(diǎn)擊」。

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

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@金蝶云之家體驗(yàn)中心（微信ID：UXD-Cloudhub），作者@王梓銘