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

一、項(xiàng)目背景

1.1 背景

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

1.2 目標(biāo)

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

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

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

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

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

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

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

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

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

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

（2）用戶(hù)沒(méi)有反饋渠道

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

2.2 推測(cè)與建議

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

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

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

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

四、 方案總結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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