編輯導(dǎo)語：很多時候我們都會用到拖放的功能，但是我們很少會注意到拖放交互，但是每個拖放的設(shè)計規(guī)范都是不一樣的，我們通過不同的場景來設(shè)計不同的拖放功能；本文作者分享了關(guān)于拖放功能的分析與設(shè)計，我們一起來了解一下。

一、什么是拖放

根據(jù)官方定義，“在圖形用戶界面，拖放事件就是點擊一個虛擬對象,并將其拖動到其他位置或到另一個虛擬物體的動作?！蓖戏挪僮魈峁┝艘环N與現(xiàn)實世界一樣的方式來獲取和移動元素，這種擬態(tài)性使得具有拖放交互作用的用戶界面易于理解和使用。

自從GUI出現(xiàn)以來，拖放操作就已經(jīng)存在，并被大多數(shù)用戶熟悉；它是一種直接操作，特別適用于對象的分組、排序、移動或調(diào)整大小。

雖然對于UX設(shè)計師來說拖放是一種常見交互方式，但是仍會遇到問題，因此需要仔細考慮該交互的用戶流程和使用場景。

二、四種常見的拖放模式

在介紹如何進行拖放操作之前，讓我們從鼠標(biāo)用戶的角度介紹四種常見的拖放模式。

1. 列表排序

這是最直接的拖放模式之一，面對一個有序列表時，用戶可以更改列表項順序；用戶使用鼠標(biāo)單擊并按住以獲取列表項，然后將鼠標(biāo)移至要放置該項的位置；放開鼠標(biāo)按鈕，即可放下選項。

2. 不同列表間的移動

面對幾個不同的項目列表時，用戶可以從一個列表中選擇一個項目并將其移至另一個列表；這在看板風(fēng)格的交互中很常見，用戶通過將項目從一個存儲看版移動到另一個存儲看版來更改任務(wù)的狀態(tài)。

3. 編輯對象的二維大小

在制圖和設(shè)計軟件中很常見，常用于圖形編輯，這種類型的拖放操作使用戶可以在二維畫布上放置和調(diào)整對象的大小。

4. 調(diào)整對象的一維大小

拖放通常還用于調(diào)整對象的寬度或高度的大小，例如調(diào)整表格列的寬度或行的高度。

我們可以發(fā)現(xiàn)，拖放所使用的所有交互模式可以分為兩種主要類型：移動對象和調(diào)整對象大小。

• 移動對象：例如，將文件圖標(biāo)拖到垃圾箱圖標(biāo)上，從而導(dǎo)致相應(yīng)文件被刪除。
• 調(diào)整對象大?。豪?，將列分隔符向右移動會使該表的列變寬，或繪圖軟件中移動錨點更改所繪制圖形的外觀。

三、如何設(shè)計有效的拖放

1. 四種拖放狀態(tài)

用戶如何知道何時開始拖動？狀態(tài)反饋是一個很好的指標(biāo)。以下為拖放的四個狀態(tài)：

懸停時：與所有直接操作交互一樣，需要在屏幕上顯示提示項，例如懸停時的光標(biāo)變化等。

按下時（單擊）：在啟動交互時，用戶需要使用鼠標(biāo)或觸摸手勢（單擊鼠標(biāo)或長按）來獲取對象。也有其他技術(shù)可以實現(xiàn)這一狀態(tài)，在VR環(huán)境中可以使用語音對話抓取物體，例如選擇左邊書籍。

拖動時：用戶在保持選中對象（如，通過持續(xù)按下鼠標(biāo)按鈕）的同時，繼續(xù)將指示設(shè)備（鼠標(biāo)，手指等）移動到某個所需目標(biāo)，這是 “拖動”部分。

放置時：最后，用戶通過釋放鼠標(biāo)等操作取消選擇對象。放置后操作應(yīng)立即生效并狀態(tài)可見，以此提高可用性。

2. 可抓取的兩種視覺指示符

1）抓柄圖標(biāo)

抓握手柄圖標(biāo)表示該元素可以進行拖放，用戶無需完全單擊抓手柄圖標(biāo)。

但是，拖拽圖標(biāo)通常比較隱喻，并不像設(shè)計師所想的那樣被大眾熟知，拖放圖標(biāo)樣式種類有很多，缺乏一致性使用戶難以識別這些圖標(biāo)的含義。

拖拽圖標(biāo)通常還有指示移動方向的作用，對于調(diào)整大小，握柄圖標(biāo)則不同：例如，列之間的一條垂直線，或右下角的一對對角線。

2）光標(biāo)變化

在鼠標(biāo)驅(qū)動的界面中，光標(biāo)更改也可以指示用戶拖放：當(dāng)用戶將鼠標(biāo)懸停在可以拖放的對象上時，光標(biāo)更改形狀以指示單擊將啟動反饋。

光標(biāo)圖標(biāo)不同系統(tǒng)的標(biāo)準(zhǔn)也不同。在Mac電腦上，標(biāo)準(zhǔn)箭頭光標(biāo)將變?yōu)榘咨灼媸謽邮?，懸停時，白色米奇手呈打開狀；按住并拖動時，白色米奇手呈閉合狀；Windows使用白色四角箭頭圖標(biāo)進行拖放操作，但抓取時不會更改圖標(biāo)。

請注意，在Mac或Windows上移動窗口時，不會發(fā)生這些光標(biāo)更改。它們僅適用于應(yīng)用程序或網(wǎng)站內(nèi)的對象拖拽。

在抓取之后調(diào)整大小時，可以使用稍有不同的縱橫光標(biāo)圖標(biāo)。

調(diào)整一維（寬或高）大小，將鼠標(biāo)懸停在分隔符上時，光標(biāo)將變?yōu)檠刂粋€軸方向的箭頭；調(diào)整兩個維度（寬和高）大小時，將鼠標(biāo)懸停在對象的底部邊緣時，光標(biāo)將變?yōu)閷羌^，指示可以在兩個方向上調(diào)整對象大小。

3. 對象已被抓取的反饋

一旦用戶“抓取”了將要拖放的對象，就需要以下兩種類型的反饋：

1. 反饋對象被“抓取”時；
2. 反饋對象將要發(fā)生 “掉落”時。

獲取對象的反饋通常需要與屏幕上默認(rèn)的其他類似對象有區(qū)別，可以包括以下內(nèi)容：

• 賦予其輪廓或?qū)Ρ壬?/li>
• 使其樣式看起來呈現(xiàn)在其他項目“上方”（如，陰影）；
• 利用視覺偏移，例如使其縮進或傾斜；
• 使獲取對象呈半透明狀。

當(dāng)拖動文件時（例如，將其上傳或移動到其他位置），光標(biāo)通常保持不變，但是需要顯示該文件縮小的、半透明的“重影”預(yù)覽圖像；此圖像表明文件已被拖動，并且重影需要足夠清晰，這有助于防止用戶意外拖動錯誤文件。

特別是在使用拖放操作對項目列表進行重新排序時，重要的是要表現(xiàn)背景對象在用戶釋放項目之前已經(jīng)移開了；這個簡短的動畫?預(yù)覽了釋放光標(biāo)時將發(fā)生的情況，并使動作感覺自然。

與其立即在其他位置重新繪制其他對象，不如使用短暫的動畫（約100 ms）來顯示它向新位置移動，以使用戶能夠感知這些對象正在進行物理操縱。

動畫預(yù)覽的最復(fù)雜的地方在于確定何時觸發(fā)運動：當(dāng)抓取的對象的邊緣與對象重疊時，或者當(dāng)鼠標(biāo)光標(biāo)的位置與另一個對象重疊時，該對象應(yīng)該開始移動嗎？其實最自然的方法是，被拖動對象的中心與另一個對象的邊緣重疊時開始重新排列。

4. 磁效應(yīng)和著陸捕捉

如果無法準(zhǔn)確判斷光標(biāo)移動到屏幕上的精確位置，那么拖放操作的效率就會降低，解決這一問題的方法是，通過模擬將對象捕捉到位的磁效應(yīng)，即使用戶尚未完全獲取目標(biāo)也是如此；例如，文件拖放至上傳區(qū)可以在其邊界之外稍微處于激活狀態(tài)，使用戶可以在鼠標(biāo)到達該位置之前釋放操作。

在用戶將文件完全拖動到文件上傳器的邊框內(nèi)之前，放置區(qū)域?qū)⒆優(yōu)榛顒訝顟B(tài)；紅色虛線是活動放置區(qū)域的可視化視圖，該區(qū)域延伸到放置區(qū)域的可見邊界之外，用戶看不到它；該解決方案有效地增加了著陸區(qū)域的面積，并提供了磁力的感覺，它還可以防止錯誤并加速拖放交互。

另外，請注意要拖動的文件的半透明圖像，它為操作提供了視覺反饋；但這不能作為有效的防錯措施，因為圖標(biāo)太小無法確定移動的是哪個文件。

使用磁效應(yīng)時，您需要通過在拖動對象位于著陸區(qū)域內(nèi)時顯示視覺樣式，來向用戶清楚地指示放置區(qū)域何時處于活動狀態(tài)。

幾種常用的磁性樣式包括放置區(qū)域周圍的虛線邊框（尤其是在文件上傳中常見），光標(biāo)移到放置區(qū)域附近時著陸區(qū)域上方出現(xiàn)的突出樣式或動畫，表示用戶釋放之前需要拖動到何處。

四、在觸摸屏上拖放

拖放操作可能很難在觸摸屏上實現(xiàn)，因為它們?nèi)鄙賾彝顟B(tài)。此外，由于胖手指問題，您需要確?？赏蟿訉ο缶哂兄辽?cm x 1cm的位置用于拖動，并且手指不能覆蓋任何重要的反饋，例如突出顯示的“抓起”狀態(tài)。

另一個重要的原因是，必須通過使用幾毫秒的時間延遲來區(qū)分點擊，劃動和抓起，并提供清晰的反饋說明已抓取元素。

在移動設(shè)備上提供拖放反饋的一種方法是使用觸覺。一個細微的觸覺“微妙的震動”可以表明一個對象已被抓取，或一個對象已被拖動到放置區(qū)域上。

還可以檢測觸摸持續(xù)時間判斷用戶是否要滾動或抓取元素。

• 激活拖動：如果用戶觸摸并按住可拖動組件上的相同位置，請激活拖動。
• 滑動時忽略：如果觸摸持續(xù)時間很短，我們可以猜測用戶正在滾動。

由于在觸摸屏上不存在類似更改光標(biāo)的懸停指示符，因此建議僅在以下情況下使用拖放：有明確的證據(jù)（可用性測試等研究）表明用戶希望進行拖放操作，并且沒有降低類似剪切和粘貼等其他交互成本時。

取消觸摸屏上的拖放操作可能需要增加交互步驟，但是降低了發(fā)生錯誤的可能性；設(shè)計師應(yīng)該優(yōu)先考慮應(yīng)用總體的可用性，而不是簡單地計算點擊次數(shù)。

五、小結(jié)

拖放有時候并不是最好的選擇，尤其是執(zhí)行任務(wù)的距離過長時；如果空間不足，用戶可能需要重新放置鼠標(biāo)或在觸摸屏上調(diào)整手指的位置；因此，會導(dǎo)致用戶將物品放在錯誤的位置，然后重新開始操作。

拖放本質(zhì)上是物理交互，所以需要了解用戶的心理模型來判斷用戶將要執(zhí)行的操作，以確保真的需要使用拖放；例如，在可用性測試期間，觀察用戶是否嘗試拖放對象。

為了使拖放盡可能有效，請使用適當(dāng)?shù)闹甘痉?，例如手柄圖標(biāo)和懸停狀態(tài)的光標(biāo)更改，在整個交互過程中提供清晰的反饋，確保狀態(tài)可見。

參考文章：

https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09

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

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

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