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

一、什么是拖放

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

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

雖然對(duì)于UX設(shè)計(jì)師來(lái)說(shuō)拖放是一種常見(jiàn)交互方式，但是仍會(huì)遇到問(wèn)題，因此需要仔細(xì)考慮該交互的用戶流程和使用場(chǎng)景。

二、四種常見(jiàn)的拖放模式

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

1. 列表排序

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

2. 不同列表間的移動(dòng)

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

3. 編輯對(duì)象的二維大小

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

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

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

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

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

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

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

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

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

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

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

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

2. 可抓取的兩種視覺(jué)指示符

1）抓柄圖標(biāo)

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

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

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

2）光標(biāo)變化

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

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

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

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

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

3. 對(duì)象已被抓取的反饋

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

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

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

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

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

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

與其立即在其他位置重新繪制其他對(duì)象，不如使用短暫的動(dòng)畫(huà)（約100 ms）來(lái)顯示它向新位置移動(dòng)，以使用戶能夠感知這些對(duì)象正在進(jìn)行物理操縱。

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

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

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

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

另外，請(qǐng)注意要拖動(dòng)的文件的半透明圖像，它為操作提供了視覺(jué)反饋；但這不能作為有效的防錯(cuò)措施，因?yàn)閳D標(biāo)太小無(wú)法確定移動(dòng)的是哪個(gè)文件。

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

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

四、在觸摸屏上拖放

拖放操作可能很難在觸摸屏上實(shí)現(xiàn)，因?yàn)樗鼈內(nèi)鄙賾彝顟B(tài)。此外，由于胖手指問(wèn)題，您需要確?？赏蟿?dòng)對(duì)象具有至少1cm x 1cm的位置用于拖動(dòng)，并且手指不能覆蓋任何重要的反饋，例如突出顯示的“抓起”狀態(tài)。

另一個(gè)重要的原因是，必須通過(guò)使用幾毫秒的時(shí)間延遲來(lái)區(qū)分點(diǎn)擊，劃動(dòng)和抓起，并提供清晰的反饋說(shuō)明已抓取元素。

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

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

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

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

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

五、小結(jié)

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

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

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

參考文章：

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)載

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