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

一、什么是拖放

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

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

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

二、四種常見的拖放模式

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

1. 列表排序

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

2. 不同列表間的移動

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

3. 編輯對象的二維大小

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

4. 調整對象的一維大小

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

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

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

三、如何設計有效的拖放

1. 四種拖放狀態

用戶如何知道何時開始拖動？狀態反饋是一個很好的指標。以下為拖放的四個狀態：

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

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

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

放置時：最后，用戶通過釋放鼠標等操作取消選擇對象。放置后操作應立即生效并狀態可見，以此提高可用性。

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

1）抓柄圖標

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

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

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

2）光標變化

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

光標圖標不同系統的標準也不同。在Mac電腦上，標準箭頭光標將變為白色米奇手樣式，懸停時，白色米奇手呈打開狀；按住并拖動時，白色米奇手呈閉合狀；Windows使用白色四角箭頭圖標進行拖放操作，但抓取時不會更改圖標。

請注意，在Mac或Windows上移動窗口時，不會發生這些光標更改。它們僅適用于應用程序或網站內的對象拖拽。

在抓取之后調整大小時，可以使用稍有不同的縱橫光標圖標。

調整一維（寬或高）大小，將鼠標懸停在分隔符上時，光標將變為沿著一個軸方向的箭頭；調整兩個維度（寬和高）大小時，將鼠標懸停在對象的底部邊緣時，光標將變為對角箭頭，指示可以在兩個方向上調整對象大小。

3. 對象已被抓取的反饋

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

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

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

• 賦予其輪廓或對比色；
• 使其樣式看起來呈現在其他項目“上方”（如，陰影）；
• 利用視覺偏移，例如使其縮進或傾斜；
• 使獲取對象呈半透明狀。

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

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

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

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

4. 磁效應和著陸捕捉

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

在用戶將文件完全拖動到文件上傳器的邊框內之前，放置區域將變為活動狀態；紅色虛線是活動放置區域的可視化視圖，該區域延伸到放置區域的可見邊界之外，用戶看不到它；該解決方案有效地增加了著陸區域的面積，并提供了磁力的感覺，它還可以防止錯誤并加速拖放交互。

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

使用磁效應時，您需要通過在拖動對象位于著陸區域內時顯示視覺樣式，來向用戶清楚地指示放置區域何時處于活動狀態。

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

四、在觸摸屏上拖放

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

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

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

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

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

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

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

五、小結

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

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

為了使拖放盡可能有效，請使用適當的指示符，例如手柄圖標和懸停狀態的光標更改，在整個交互過程中提供清晰的反饋，確保狀態可見。

參考文章：

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

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

本文由 @LIZ醬 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自?Unsplash，基于 CC0 協議