編輯導(dǎo)讀：拖放交互是PC端較為流行的交互形式，有直觀、學(xué)習(xí)成本較低的特點(diǎn)，也有低效率、不精準(zhǔn)、甚至容易造成身體上的疲勞。本文作者圍繞拖放交互進(jìn)行了分析，與你分享。

對(duì)于拖放交互的研究，之前一直是較為模糊的。我一直認(rèn)為其是較為基本的交互形式，雖然明白有很多的微交互，但是也沒有系統(tǒng)的去研究過。所以我希望從底層的拖放交互入手進(jìn)行一個(gè)完整的總結(jié)。而后，便有這篇文章，希望能為后面的工作打下基礎(chǔ)。若有錯(cuò)誤，歡迎糾錯(cuò)謝謝。

一、拖放交互的概述

1. 優(yōu)缺點(diǎn)

拖放交互是PC端較為流行的交互形式，因?yàn)榉险鎸?shí)世界的情況，所以非常符合用戶的心理模型，有直觀、學(xué)習(xí)成本較低的特點(diǎn)，但是反之也有低效率、不精準(zhǔn)、甚至容易造成身體上的疲勞，例如進(jìn)行長距離的拖放，用戶需要一直點(diǎn)擊著鼠標(biāo)長距離移動(dòng)，若失敗了還需要重新開始。所以，針對(duì)于拖放的交互，需要保證其有代替的交互形式，例如刪除的“delete”、或者是使用空格+鍵盤方向鍵的形式移動(dòng)。

刪除-mac

可以使用鍵盤移動(dòng)的控件-salesforce

2. 拖放的類型

拖放的類型大致分為兩種，第一種針對(duì)于物體的大小的改變，即窗口的大小的拉伸或者表格的寬度等；第二種是針對(duì)物體的移動(dòng)，移動(dòng)也分為應(yīng)用內(nèi)移動(dòng)以及跨應(yīng)用移動(dòng)。應(yīng)用內(nèi)移動(dòng)即在單一的應(yīng)用內(nèi)，例如修改菜單排序，改變物體分組等，反之，跨應(yīng)用移動(dòng)，就是多個(gè)應(yīng)用之間的交互，例如將聊天軟件的文本直接移動(dòng)帶文本編輯軟件中。針對(duì)于被拖放的物體，也分為復(fù)制還是單純移動(dòng)。

Ai的物體大小移動(dòng)改變

應(yīng)用內(nèi)的菜單移動(dòng)

跨應(yīng)用的拖放

3. 拖放的過程

針對(duì)于整一個(gè)拖放的交互流程我自己分為了6個(gè)節(jié)點(diǎn)：

1. 拖放前的識(shí)別
2. 觸發(fā)拖放的行為
3. 開始拖放
4. 遇到接受區(qū)域
5. 取消拖放的方式
6. 放下拖放

后續(xù)對(duì)于拖放的交互介紹，我也會(huì)按照這六個(gè)節(jié)點(diǎn)進(jìn)行闡釋。

二、拖放前的識(shí)別

1. icon與文本提示

拖放交互在各個(gè)系統(tǒng)中都較為常見，我們?cè)谙到y(tǒng)軟件中較為常見就是一些文本和圖片等的形式，但是對(duì)于其他物件的拖動(dòng)交互，我們需要讓用戶感知到此物件是可以拖動(dòng)的。最明顯方式是使用icon的進(jìn)行提示，但是這些圖標(biāo)并沒有想象中的那么統(tǒng)一和明確，以下是Norman Group找到的常用的icon。

其中左一的icon與更多的省略號(hào)相似，而右一的與漢堡菜單類似（hamburger menu）。最重要的是保證icon在平臺(tái)內(nèi)的統(tǒng)一性以及與其他icon的差異性。與icon較為類似的就是文本提示，直接在物體上進(jìn)行提示，其中Trello的看板中，需要用戶拖動(dòng)鏈接去操作欄，用戶點(diǎn)擊send to Trello的鏈接時(shí)，其提示會(huì)變大以及變色。

Norman Grounp展示的三種icon

Trello的拖放提示

2. Hover展示

Hover在日常交互中作為一個(gè)重要的反饋。hover的反饋也分為兩種：

（1）第一種物體自身的反饋，例如增加陰影：material design中若產(chǎn)生卡片的拖放交互，其卡片一定會(huì)增加Z軸的高度，視覺上的反饋是就是增加陰影，使卡片在活動(dòng)高度進(jìn)行移動(dòng)、tooltip：有時(shí)為了讓用戶快速了解到該區(qū)域可以拖動(dòng)，用戶首次hover到該物體時(shí)也會(huì)進(jìn)行提示。

（2）第二種為光標(biāo)pointer的提示，例如當(dāng)光標(biāo)hover到物體時(shí)，光標(biāo)會(huì)改變從而作為一個(gè)視覺反饋，以代表其可以被拖放，MAC 常常會(huì)用到米奇手的形式，而window是會(huì)使用一個(gè)雙向箭頭代表其可以拖動(dòng)。針對(duì)于pointer的反饋，切記保持統(tǒng)一，盡量使用系統(tǒng)自帶的形式。

卡片的hover，提升Z軸高度到4dp

mac：米奇手；win：雙向箭頭

3. 動(dòng)效引導(dǎo)

該類交互常用于引導(dǎo)新手用戶或展示新功能中使用。一般在游戲交互上使用較多，當(dāng)用戶進(jìn)入游戲界面，可拖動(dòng)的物體會(huì)有偏移并回彈的小動(dòng)效；或用于移動(dòng)端的橫向滾動(dòng)中，在同花順新改版后，用戶進(jìn)入自選股頁面會(huì)有一個(gè)向右滑動(dòng)并回彈的小動(dòng)效，示意可以拖動(dòng)。

同花順自選股

4. 切勿濫用pointer反饋

現(xiàn)應(yīng)用中有很多的對(duì)象可以被拖放，所以如果亂用pointer反饋，會(huì)造成每當(dāng)hover到能夠拖動(dòng)的物體時(shí)就出現(xiàn)反饋，會(huì)造成頁面的快速變化從而導(dǎo)致用戶的混亂，并且有時(shí)在應(yīng)用中拖放是輔助功能。例如window桌面的文件其可以拖動(dòng)，但用戶主要還是雙擊打開。如果當(dāng)光標(biāo)hover到文件上就是拖動(dòng)的pointer會(huì)讓人造成誤解。所以，這里建議還是不要濫用過pointer反饋，除非對(duì)于物體的主要操作就是拖放。

三、觸發(fā)拖放行為

1. 鼠標(biāo)點(diǎn)擊和3像素閾值

我們光標(biāo)hover在了希望觸發(fā)拖放交互的物體上時(shí)（源物體），會(huì)產(chǎn)生上述的反饋。通常，我們使用鼠標(biāo)點(diǎn)擊并移動(dòng)，來觸發(fā)拖放的交互行為（鍵盤中常用空格），在有些情況下pointer反饋（mac）的米奇手會(huì)從展開變?yōu)樽ゾo。但有些時(shí)候一個(gè)對(duì)象既可以點(diǎn)擊又可以拖放移動(dòng)，若用戶只有點(diǎn)擊行為，依然容易造成物體在應(yīng)用內(nèi)超短距離的移動(dòng)，這樣會(huì)造成界面物體的顫動(dòng)。所以，我們需要解決這個(gè)問題就應(yīng)該建立拖動(dòng)的閾值，當(dāng)鼠標(biāo)移動(dòng)超過此閾值才開始觸發(fā)拖放行為。在MAC HIG和About face中都設(shè)定了3像素的閾值，當(dāng)移動(dòng)超過3像素，才開始觸發(fā)拖放。

米奇手展開（左一）、抓緊（右一）

《About Face》：3像素元素

2. 觸發(fā)時(shí)，保持窗口不變

在跨應(yīng)用的情況下，會(huì)存在前后窗口的關(guān)系。例如你已經(jīng)在微信的聊天區(qū)域選中了你想要的文字，你回到了word進(jìn)行了一些文字的編輯，這個(gè)時(shí)候你想將微信選中的文字拖放進(jìn)來。這個(gè)時(shí)候word是你選中的活動(dòng)窗口，而微信則變成了你的背景窗口。MAC HIG中建議，在背景窗口的選中物體同樣能夠觸發(fā)拖放交互，并且觸發(fā)以及拖放過程中不會(huì)改變窗口狀態(tài)（即word 還是活動(dòng)窗口，微信依舊是背景窗口）。這樣的好處是在跨應(yīng)用的拖放時(shí)，可以保證整體桌面各個(gè)窗口的位置、重合關(guān)系都不會(huì)發(fā)生改變，保證前后目標(biāo)的完整，不會(huì)造成拖動(dòng)的時(shí)候因?yàn)榇翱诟膭?dòng)而遮蓋掉你預(yù)想接受的區(qū)域。較大層面上增加了跨應(yīng)用拖放過程中的交互體驗(yàn)。

從背景窗口觸發(fā)拖放，不改變窗口狀態(tài)

四、開始拖放

1. 實(shí)時(shí)與非實(shí)時(shí)

在拖放過程中也會(huì)分為兩種類型，實(shí)時(shí)與非實(shí)時(shí)的。實(shí)時(shí)是指：用戶在拖放過程中源物體直接跟著鼠標(biāo)進(jìn)行了移動(dòng)，常用于在某一個(gè)特定區(qū)域內(nèi)，物體可以在這個(gè)區(qū)域內(nèi)自由移動(dòng)的情況，例如sketch畫布中物體都是實(shí)時(shí)移動(dòng)的。非事實(shí)移動(dòng)是指：用戶在拖放源物體時(shí)，源物體自身保持位置不變，會(huì)增加一個(gè)跟隨鼠標(biāo)移動(dòng)的目標(biāo)物體，例如：在桌面上移動(dòng)文件夾到回收站中，源物體的自身位置是保持不變的，跟隨鼠標(biāo)的是一個(gè)具有透明度的目標(biāo)物體。

實(shí)時(shí)拖放常用于像sketch這樣的操作畫布中，在某一個(gè)特定區(qū)域的使用，因?yàn)檫@樣會(huì)將移動(dòng)與復(fù)制區(qū)分的更加明顯；非事實(shí)的情況，則常用于更多的跨區(qū)域以及跨應(yīng)用中使用。因?yàn)閷?shí)時(shí)的拖放有一種過程中不可撤回的感覺，所以在其他情況下盡可能少用。

非實(shí)時(shí)移動(dòng)

2. 非實(shí)時(shí)：源物體、目標(biāo)物體、接受區(qū)域

對(duì)于非實(shí)時(shí)的拖放，會(huì)有三個(gè)模塊：源物體、目標(biāo)物體以及接受區(qū)域。正如上文所述，源物體是被選中，被拖動(dòng)的物體；而拖動(dòng)過程中跟隨鼠標(biāo)的是目標(biāo)物體；接受區(qū)域就是目標(biāo)物體需要拖動(dòng)到的具體位置，可能是一個(gè)區(qū)域也可能是一個(gè)功能按鈕等，在后續(xù)我們會(huì)詳細(xì)講述。

在拖動(dòng)過程中，源物體還是會(huì)保持點(diǎn)擊后的狀態(tài)，而針對(duì)于目標(biāo)物體，Norman Group 提供了四種較為常見的形式：提供一個(gè)輪廓或?qū)Ρ壬?、增加投影、視覺偏移：縮小或者傾斜、半透明。這四種樣式并不是互斥的，可以同時(shí)使用。其中半透明的形式較為重要，半透明可以保證目標(biāo)物體的尺寸大于接受區(qū)域的時(shí)候不會(huì)進(jìn)行遮蓋。

而以上情況都是常用于單物體的移動(dòng)，對(duì)于多個(gè)物體移動(dòng)時(shí)，MAC 中會(huì)使用物體的堆疊圖來展示，并且在堆疊圖的左上角增加了紅色badge的數(shù)字統(tǒng)計(jì)；Window也會(huì)有使用同樣方式形成一個(gè)正方形的堆疊區(qū)域，并且在中心顯示數(shù)字統(tǒng)計(jì)。

對(duì)于非實(shí)時(shí)的拖放，會(huì)有三個(gè)模塊：源物體、目標(biāo)物體以及接受區(qū)域。正如上文所述，源物體是被選中，被拖動(dòng)的物體；而拖動(dòng)過程中跟隨鼠標(biāo)的是目標(biāo)物體；接受區(qū)域就是目標(biāo)物體需要拖動(dòng)到的具體位置，可能是一個(gè)區(qū)域也可能是一個(gè)功能按鈕等，在后續(xù)我們會(huì)詳細(xì)講述。

在拖動(dòng)過程中，源物體還是會(huì)保持點(diǎn)擊后的狀態(tài)，而針對(duì)于目標(biāo)物體，Norman Group 提供了四種較為常見的形式：提供一個(gè)輪廓或?qū)Ρ壬?、增加投影、視覺偏移：縮小或者傾斜、半透明。這四種樣式并不是互斥的，可以同時(shí)使用。其中半透明的形式較為重要，半透明可以保證目標(biāo)物體的尺寸大于接受區(qū)域的時(shí)候不會(huì)進(jìn)行遮蓋。

而以上情況都是常用于單物體的移動(dòng)，對(duì)于多個(gè)物體移動(dòng)時(shí)，MAC 中會(huì)使用物體的堆疊圖來展示，并且在堆疊圖的左上角增加了紅色badge的數(shù)字統(tǒng)計(jì)；Window也會(huì)有使用同樣方式形成一個(gè)正方形的堆疊區(qū)域，并且在中心顯示數(shù)字統(tǒng)計(jì)。

Clarity的設(shè)計(jì)師，對(duì)于目標(biāo)物體增加紫色

卡片的移動(dòng)，提升Z軸高度到8dp

Trello：目標(biāo)物體有物理性質(zhì)的傾斜

window：半透明的目標(biāo)物體

MAC：堆疊圖和badge的計(jì)數(shù)

Window：堆疊圖和badge的計(jì)數(shù)

3. pointer盡可能保持箭頭

在拖動(dòng)過程中，鼠標(biāo)的pointer盡可能保持箭頭。有些場景下，物體在移動(dòng)過程會(huì)保持米奇手的狀態(tài)或者其他，但是，我們建議在拖動(dòng)過程中，保持pointer為箭頭的狀態(tài)。

理由如下：

• 箭頭（arrow）作為系統(tǒng)默認(rèn)提供的，其具有很好的擴(kuò)展性，mac和window中會(huì)支持其他的相關(guān)于箭頭的擴(kuò)展類型，如Drag coyp的形式就是箭頭增加“?”號(hào)，代表復(fù)制的意思；
• 箭頭作為鼠標(biāo)這個(gè)精準(zhǔn)操作儀器的默認(rèn)狀態(tài)，其箭頭的含義非常明確，即箭頭左上角的尖端位置便是應(yīng)該觸發(fā)的區(qū)域，其包含了精準(zhǔn)的屬性，而當(dāng)使用其他pointer時(shí)，例如米奇手就很難界定其精準(zhǔn)的區(qū)域。所以，針對(duì)拖放交互來說，其接受區(qū)域是需要被精準(zhǔn)點(diǎn)擊的，所以我們建議盡量保持箭頭的狀態(tài)。

MAC：pointers類型

Win：復(fù)制移動(dòng)的pointers類型

五、遇到接受區(qū)域

1. 提供接受區(qū)域的視覺反饋

拖放的最終目標(biāo)就是將目標(biāo)物體移動(dòng)到接受區(qū)域，對(duì)于接受區(qū)域也必須有明確的視覺反饋來提示用戶移動(dòng)的是否正確，此區(qū)域是否能夠接受目標(biāo)物體等。有時(shí)候接受區(qū)域是一個(gè)容器范圍，例如一個(gè)文檔；有時(shí)候接受區(qū)域可能是一個(gè)功能按鈕（導(dǎo)出、打印等等）或者是一個(gè)文件夾等等，所以每一個(gè)接受區(qū)域都應(yīng)該有自己的視覺反饋。如果頁面內(nèi)的模塊、交互較為單一、明確，例如Visio的畫布，用戶非常明確可以將形狀拖放到畫布中，可不增加視覺反饋，以免過多反饋造成頁面的快速閃動(dòng)。

針對(duì)于接受區(qū)域的接受情況，我也分為三種：接受、不接受、部分接受。后續(xù)我也會(huì)按照這三個(gè)部分進(jìn)行詳細(xì)的闡述。

2. 接受

接受：即接受區(qū)域能夠放下目標(biāo)物體。同理最為重要的就是明確的視覺反饋。以下我羅列了6種反饋的形式：高亮、直觀預(yù)覽、橫向插入指示器、縱向插入指示器、增加圖片清晰度、增加pointer。

1）高亮

高亮的形式較為常見。常用于拖放到文件夾或者某按鈕功能時(shí)使用，對(duì)于小范圍的容器也可以嘗試使用，例如chrome中將文本信息拖放到地址欄。當(dāng)接受區(qū)域具有較大范圍時(shí)，請(qǐng)注意謹(jǐn)慎使用，以免過多反饋造成頁面快速閃動(dòng)。

MAC：應(yīng)用成組時(shí)的高亮

Chrome：小容器的高亮

2）直接預(yù)覽

直接預(yù)覽也是一個(gè)較為常見的反饋形式，常用于對(duì)于當(dāng)前物體排序的一種反饋。mac中l(wèi)aunch的軟件排列就是一個(gè)做明顯的例子。直接預(yù)覽是一把雙刃劍，其優(yōu)點(diǎn)就是反饋直接、明確；其缺點(diǎn)就是直接的反饋會(huì)導(dǎo)致在拖放過程中頁面結(jié)構(gòu)產(chǎn)生快速的調(diào)整，造成用戶分心混亂，所以，適時(shí)的添加delay以及觸發(fā)反饋的方式是很重要的。

MAC：launch軟件排序

3）橫向插入指示器

橫向插入指示器，算是直接預(yù)覽的變體，其也適用于重新排序，更多用于插入的使用場景。在移動(dòng)過程中，其不直接對(duì)于頁面進(jìn)行直接的重新排版，而是在已有的內(nèi)容之間插入一條橫向的指示器，以反饋其拖放后的位置。其既有較好的視覺反饋，又不會(huì)在拖放過程中影響當(dāng)前的布局，是一個(gè)較好的反饋形式。

MAC：側(cè)導(dǎo)航插入

Window：桌面移動(dòng)

4）縱向插入指示器

縱向的插入指示器，與橫向類似，但其主要用于文本編輯器的場景，但是其本質(zhì)還是在于容器默認(rèn)排序的方式，文本編輯是從左至右排序，應(yīng)該使用縱向的插入指示器，而window的桌面是從上至下的排布則默認(rèn)應(yīng)該是橫向的指示器。

文本編輯：字段移動(dòng)

3. 不接受

當(dāng)接受區(qū)域，不接受所拖放的物體時(shí)，也必須要體現(xiàn)出適當(dāng)?shù)囊曈X反饋，而不是僅僅在可以接受的時(shí)候展示視覺提示。mac和windows的系統(tǒng)都會(huì)使用一個(gè)禁止符號(hào)來表示不可放置。在About face中提出，“光標(biāo)（pointer）的反饋必須在視覺上表明源對(duì)象（物體）”，其希望將兩者的視覺反饋分開，光標(biāo)的視覺反饋都代表源物體、目標(biāo)物體，而接受區(qū)域自身來展示是否接受的視覺反饋。

禁止拖放：mac（左）、Windows（右）

4. 部分接受

部分接受針對(duì)于多物件拖放。上文也提到了目標(biāo)物體上會(huì)存在一個(gè)計(jì)數(shù)的badge，當(dāng)接受區(qū)域僅能夠接收部分的目標(biāo)物體時(shí)，請(qǐng)實(shí)時(shí)更新計(jì)數(shù)以表示多少物體能夠接受。

5. 觸發(fā)條件

針對(duì)上述的各種接受區(qū)域的視覺反饋，其觸發(fā)條件基本有三種情況，分別是：（1）光標(biāo)觸發(fā)、（2）目標(biāo)物體觸發(fā)、（3）增加觸發(fā)區(qū)域

1）光標(biāo)觸發(fā)

光標(biāo)觸發(fā)，很好理解就是以光標(biāo)為依據(jù)觸發(fā)反饋。這個(gè)觸發(fā)方式是最為常見的，光標(biāo)是一個(gè)很好判定的標(biāo)準(zhǔn)，具有精確操作的屬性（這也是為什么要保持箭頭的原因），用戶可以很好的利用光標(biāo)箭頭左上角的區(qū)域來判定現(xiàn)在所處于的位置，對(duì)接受區(qū)域較小的時(shí)候是很好的標(biāo)準(zhǔn)。在一些樹狀控件的拖放層級(jí)、文件拖放到文件夾等場景下都是較好的選擇。

光標(biāo)觸發(fā)：未觸發(fā)（左一、中間），觸發(fā)（右一）

2）目標(biāo)物體觸發(fā)

目標(biāo)物體觸發(fā)，一般使用于直接預(yù)覽的反饋場景，常用的觸發(fā)基準(zhǔn)為物體的中線，Norman Group提到如果使用目標(biāo)物體的邊線來觸發(fā)的話會(huì)導(dǎo)致反饋的過度敏感；如果使用光標(biāo)來衡量，會(huì)導(dǎo)致響應(yīng)過慢，特別針對(duì)長距離以及大物體移動(dòng)的時(shí)候，會(huì)導(dǎo)致鼠標(biāo)移動(dòng)距離過大造成疲憊；使用物體的中線作為衡量標(biāo)準(zhǔn)，較為符合整體的自然交互形式。其中mac的launch移動(dòng)就是按照應(yīng)用的logo中線為衡量標(biāo)準(zhǔn)的。

邊線觸發(fā)

光標(biāo)觸發(fā)

中線觸發(fā)

3）增加觸發(fā)區(qū)域

增加觸發(fā)區(qū)域：針對(duì)于小范圍的接受區(qū)域，根據(jù)菲茲定律（Fitts law）我知道移動(dòng)時(shí)間與接受區(qū)域的大小有關(guān)系，針對(duì)于小范圍的接受區(qū)域，我們應(yīng)該增加觸發(fā)區(qū)域，一種方案是可以依靠增加觸發(fā)區(qū)域從而觸發(fā)接受區(qū)域的視覺反饋；另一種方案是利用增加的觸發(fā)區(qū)域快速將鼠標(biāo)移動(dòng)到接受區(qū)域已提供一種自動(dòng)吸附的功能。

增加觸發(fā)區(qū)域以提供視覺反饋

6. pointer的變化

當(dāng)目標(biāo)物體懸浮在接受區(qū)域的時(shí)候，pointer會(huì)顯示出默認(rèn)狀態(tài)下此接受區(qū)域?qū)τ谀繕?biāo)物體是移動(dòng)還是復(fù)制，若是移動(dòng)的情況下，可以利用鍵盤的快捷鍵快速的切換成復(fù)制，常用是ctrl、option等不同軟件、系統(tǒng)都有一定的區(qū)別。mac中都是以箭頭擴(kuò)展的形式，而window中的桌面文件拖放時(shí)，使用更加明確的文本提示。

Windows：移動(dòng)文件

Windows：復(fù)制文件

7. 目標(biāo)物體的變化

目標(biāo)物體應(yīng)該展現(xiàn)出在接受區(qū)域拖放結(jié)束后的樣子。當(dāng)源物體在源區(qū)域的展現(xiàn)形式與接受區(qū)域的展現(xiàn)形式不同時(shí)候，應(yīng)該更隨著hover的區(qū)域而變化（需要有delay）。在HIG中講到，圖片被拖放到文本編輯中，目標(biāo)物體應(yīng)該在hover到編輯器時(shí)，展示出其在文本編輯器中的樣子。mac在拖放文件時(shí)，目標(biāo)物體在hover側(cè)導(dǎo)航以及具體文件夾時(shí)，會(huì)根據(jù)當(dāng)前的接受區(qū)域展示的樣式而改變自身樣式。

圖片移動(dòng)到文本編輯器

文件移動(dòng)到側(cè)導(dǎo)航（上）、移動(dòng)到具體文件夾（下）

8. 接受區(qū)域的移動(dòng)

接受區(qū)域的移動(dòng)：其適用于當(dāng)前窗口僅顯示了部分區(qū)域的情況，例如：滾動(dòng)顯示的文件夾、一個(gè)巨大的畫布等，用戶在移動(dòng)目標(biāo)物體的時(shí)候，如果當(dāng)前接受區(qū)域的顯示內(nèi)容與用戶的預(yù)期不符，我們應(yīng)該提供在hover狀態(tài)下能夠同時(shí)移動(dòng)接受區(qū)域的功能。常用的觸發(fā)方式就是hover到接受區(qū)域的邊緣，接受區(qū)域應(yīng)該提供自動(dòng)移動(dòng)的功能。其中優(yōu)化的方式還有，利用靠近邊緣的距離來調(diào)整移動(dòng)速度（越近越快）、利用停留在觸發(fā)區(qū)域的時(shí)間（越久越快）等等。

《About Face》：指出windows的文件夾區(qū)域的滾動(dòng)

9. 改變窗口次序與喚醒窗口

改變窗口次序，用于跨應(yīng)用拖放。上文提到在觸發(fā)拖放的時(shí)候不應(yīng)該調(diào)整窗口次序，但是一旦已經(jīng)拖放到接受區(qū)域的時(shí)候，為了展示更加完整的接受區(qū)域以免被其他窗口遮擋，我們應(yīng)該調(diào)整窗口次序，將接受區(qū)域所在窗口調(diào)整為活動(dòng)窗口。但需要注意的是為了避免在拖放路徑中改變非接受區(qū)域的窗口，所以觸發(fā)窗口次序改變需要提供較長時(shí)間hover的delay。喚醒窗口，用于拖放的接受區(qū)域未顯示的場景下，例如接受區(qū)域隱藏在程序塢中，或開一個(gè)文件等，同樣的喚醒窗口的觸發(fā)也需要提供較長時(shí)間hover的delay。

10. 目標(biāo)物體的精準(zhǔn)移動(dòng)

目標(biāo)物體的精準(zhǔn)移動(dòng)，用于需要精準(zhǔn)對(duì)齊的應(yīng)用。常用于圖像編輯的應(yīng)用中，《About Face》中提出鼠標(biāo)的精確滾動(dòng)，可以利用快捷鍵加鼠標(biāo)的形式，讓鼠標(biāo)在移動(dòng)過程中保持精準(zhǔn)移動(dòng)，例如：鼠標(biāo)移動(dòng)10個(gè)像素的位置，光標(biāo)僅移動(dòng)1像素，但是這樣形式的精準(zhǔn)滾動(dòng)也會(huì)造成容易在釋放過程中，造成少量像素的偏移，這里同樣可以設(shè)置合理移動(dòng)閾值所解決。精準(zhǔn)移動(dòng)的模式較為復(fù)雜，智能吸附、像素吸附、網(wǎng)格吸附、根據(jù)鼠標(biāo)移動(dòng)速度調(diào)整光標(biāo)移動(dòng)的像素等，本文不做展開，同時(shí)精準(zhǔn)移動(dòng)也可以利用方向鍵以及方向鍵+shift等形式替代。

六、取消拖放

1. 取消拖放的2種方式

對(duì)于在拖放過程，當(dāng)用戶在沒有抬起左鍵的時(shí)候，都有權(quán)利結(jié)束此次拖放行為（即使結(jié)束了也可以撤銷），常用的有兩種形式（1）鍵盤的Esc（2）合擊（chord-clicking）

1）鍵盤的Esc

Esc是常規(guī)的退出按鍵，也比較符合用戶的心理模型。按下Esc，應(yīng)該能夠保證本次拖放行為的結(jié)束，并恢復(fù)到原來的樣子。

2）合擊（chord-clicking）

即鼠標(biāo)的左鍵右鍵同時(shí)按下，在拖放過程中，因?yàn)樽箧I的按鈕一直保持按下的狀態(tài)，這時(shí)按下右鍵產(chǎn)生合擊，從而結(jié)束拖放行為，這樣的交互形式較為晦澀難懂。

七、放下目標(biāo)物體

1. 更新選中態(tài)

當(dāng)拖放結(jié)束后，目標(biāo)物體被放置在接受區(qū)域，應(yīng)該保持目標(biāo)物體的選中以表示此次交互結(jié)束，之前的源物體（若是復(fù)制即還存在）的選中狀態(tài)應(yīng)該保持消失。

在HIG中提及到，多容器拖放的事件：“When selected content is dragged to another container, it should become selected in the new location and any previous selection should be deselected.” 在多容器拖放后，應(yīng)該保持接受區(qū)域的目標(biāo)物體保持選中狀態(tài)，并刪除之前任何源物體的選中狀態(tài)。但在實(shí)際的mac中的兩個(gè)文件夾中的復(fù)制拖放，并沒有遵循此規(guī)定。個(gè)人認(rèn)為還是應(yīng)該還是遵循此規(guī)定，應(yīng)該把持目標(biāo)物體的選中示意著拖放結(jié)束這一個(gè)完美的線形流程的完結(jié)，若想要進(jìn)行下一次拖放則需要重新選擇源對(duì)象進(jìn)行拖放。

Mac：文件夾復(fù)制拖放結(jié)束后，并未選中目標(biāo)對(duì)象

2. 當(dāng)拖放后啟動(dòng)流程，需提供額外反饋

當(dāng)拖放結(jié)束后，目標(biāo)物體啟動(dòng)了新的流程，例如打印、上傳、下載等，這時(shí)需要提供額外的反饋來表示其啟動(dòng)的進(jìn)程。例如：百度識(shí)圖，其在拖放圖片結(jié)束后會(huì)產(chǎn)生識(shí)別的額外反饋。

百度識(shí)圖：接受區(qū)域

百度識(shí)圖：拖放后的額外反饋

3. 提取可接收信息

HIG提出：如果拖放的目標(biāo)物體包含了多重信息，但是接受區(qū)域的僅能夠接受部分信息，可以提取可接收信息放入到接受區(qū)域。例如將通訊錄的個(gè)人信息拖放到郵件地址中，郵件僅能接受姓名以及郵件地址，其他的真實(shí)地址等信息就會(huì)被剔除。

4. 拖放失敗，提供動(dòng)畫反饋

當(dāng)目標(biāo)對(duì)象移動(dòng)到不可接受的區(qū)域并釋放，其產(chǎn)生的結(jié)果應(yīng)該與上述提到的取消拖放的結(jié)果相同，同時(shí)需要一個(gè)動(dòng)畫效果來反饋給用戶拖放失敗的信息：目標(biāo)物體應(yīng)該會(huì)移動(dòng)回源目標(biāo)。HIG中將這種動(dòng)畫成為“zoom back”。

5. 確保操作可逆，若不可逆提供反饋

當(dāng)拖放操作完成后，確保整個(gè)流程是可逆的。提供撤回以及重做的功能，幫助用戶解決錯(cuò)誤。若因?yàn)闃I(yè)務(wù)原因無法進(jìn)行撤銷，在拖放結(jié)束后應(yīng)該進(jìn)行合理的提示。

MAC：不可撤回的提示

八、總結(jié)：優(yōu)化設(shè)計(jì)

本次對(duì)拖放進(jìn)行了一個(gè)詳細(xì)的信息梳理形成一份類似于研究報(bào)告的綜述文檔。正如前言所說，本次拖放的總結(jié)一個(gè)是彌補(bǔ)了我對(duì)拖放整體的交互細(xì)節(jié)的空缺，另一個(gè)部分就是我希望能夠基于這個(gè)總結(jié)，去針對(duì)業(yè)務(wù)的畫布進(jìn)行一個(gè)交互上的整體優(yōu)化以及形成一個(gè)簡單的規(guī)范。

而對(duì)于其他拖放場景的優(yōu)化也可以參考本次的綜述文檔，例如在收集參考資料的時(shí)候也看到了saleforce提供的五種拖放控件（https://salesforce-ux.github.io/dnd-a11y-patterns/#/canvas?_k=nlllw7），其使用過程中會(huì)發(fā)現(xiàn)很明顯的微交互上的缺陷，例如示意拖放的icon不統(tǒng)一性、移動(dòng)過程中接受區(qū)域沒有視覺反饋等等的問題，都可以進(jìn)行優(yōu)化。

感謝大家能夠觀看到這里，謝謝。

九、參考文檔

Apple Human Interface Guidelines

Microsoft Fluent Design System

《About Face 4：交互設(shè)計(jì)精髓》

Salesforce Lightening Design System

Google Material Design

https://www.nngroup.com/articles/drag-drop/

https://zhuanlan.zhihu.com/p/407548600

https://www.yuque.com/u2411630

本文由 @Y.h 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。