拖放功能指用戶選中圖片、列表項或卡片等元素，拖放到頁面的其他位置或其他產品中，它的設計非常多樣化，應用場景也很多，本篇文章就從交互設計流程和和狀態兩方面來分析拖放設計，感興趣的朋友快來看看吧。

大家好，這里是設計夾，今天為大家分享的是「拖放設計」。

拖放(drag and drop)指用戶選中圖片、列表項或卡片等元素，拖放到頁面的其他位置或其他產品中。

這種交互方式在移動端表現為長按拖動，在PC端表現為單擊并用鼠標拖動，最后放到目標位置上。

一、拖放設計的使用場景

拖放式UI/UX的設計非常多樣化，并被用在多種場景中?；?strong>設計需求的不同，每個產品可能會要求不同的拖放設計。

1. 移動項目

這種拖放類型最常見也最常用，我們將桌面上或者頁面中的靜態項目拖放到指定的區域，進而完成操作。

例如在一些文檔處理網站中，我們可以接將電腦桌面上的文件直拖拽到網頁中，完成上傳文件的過程。

又或者電腦桌面上的文件夾，被拖放到回收站中。

2. 重新排序

這種類型在網站設計中比較常見，這里的拖動目標在頁面中是動態顯示的，并且會在釋放拖動后顯示項目最終的位置。

頁面中有多個卡片，可以長按拖動來調整卡片的位置，達到重新排序的目的。

在拖動頁面中的列表或者卡片重新調整順序時，這里介紹兩種拖動交互方式。

第一種交互方式是在拖動某個列表時，這個列表仍然在原位置顯示，只是顏色會變淺。拖動到某個位置時，會顯示一個指示條，其他列表的位置保持不動。

這樣做的優點是能減少列表之間的相互移動，方便開發設計。

第二種交互方式是被拖動的列表會從原來的位置挪開，拖動到某個位置時，能直接在這個位置上顯示出來，同時其他列表的位置也會動態變化。

這種拖動交互的反饋更直接，也是當前用的比較多的交互方式。

二、拖放功能設計流程、狀態分析

為了方便大家更好理解，我們將拖放的交互分為拖放前、拖放中、拖放后三個過程，整體分析前、中、后的狀態以及拖放過程中會涉及到的其他場景。

1. 拖放前

在拖動前，被拖動的元素處于初始化的狀態。那么我們如何讓元素看起來是可以拖放的呢？

除了必要的文字提示，最常用的方法是在列表或者卡片上展示代表拖放的icon，告訴用戶這些元素支持拖動。

在PC端中，當鼠標懸停在可拖動的項目上時，還可以通過改變鼠標的樣式(抓手、指針等)，告訴用戶項目可以拖動。

在改變鼠標樣式的基礎上，為拖動icon增加一個懸浮狀態，這樣能更好地表達拖動的意思。

當鼠標點擊或在手機上按下要拖動的元素時，被拖動的元素往往會有一個狀態的變化，比如列表增加陰影效果或者拖動圖標顏色變化，表明觸發了拖動。

2. 拖放中

觸發拖動后，接下來就到了拖動中流程。

通過鼠標或手指移動，被拖動的元素也會跟著移動，進而將元素拖動到指定的位置上。

如果當前的列表支持多選，可以選擇多個列表項，然后一起拖動。

在多個列表共同拖動的情況下，最好能有一個顯示多選數量的徽標，這樣能清楚地展示出多選的數量。

當需要把項目拖動到指定區域的場景中，隨著被拖動的項目越來越靠近指定區域，該區域的視覺反饋可以越來越強，起到很好的指示作用。

如果拖動的項目違反了規則，可以直接給出錯誤反饋。

例如我們想把四個列表一起拖到屏幕上的指定區域，如果不符合拖放規則，在拖動到該區域時給出錯誤提示，方便用戶了解規則。

3. 拖放后

拖放完成后，可以直接顯示一個拖放成功的提示，清晰地告知用戶操作成功。

例如把四個列表一起拖動到指定區域后，除了顯示操作完成，還可以把拖放的列表數量一起顯示出來，讓提示更嚴謹。

如果把四個列表一起拖動到指定區域后，每個列表還需要依次上傳，這個時候最好能提供上傳狀態的提示：

上傳中(進度)、已完成、上傳失敗等，讓拖動上傳的過程更加可視化。

三、最后

以上分析了拖放功能的使用場景和狀態，希望通過這些內容幫助大家了解「拖放」功能在設計中的用法，進一步提升體驗！