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

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

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

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

一、拖放設計的使用場景

拖放式UI/UX的設計非常多樣化，并被用在多種場景中。基于設計需求的不同，每個産品可能會要求不同的拖放設計。

1. 移動項目

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

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

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

2. 重新排序

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

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

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

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

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

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

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

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

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

1. 拖放前

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

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

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

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

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

2. 拖放中

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

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

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

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

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

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

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

3. 拖放後

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

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

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

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

三、最後

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

專欄作家

作者：Clippp，Clip設計夾。每周精選設計文章，專注分享關于産品、交互、UI視覺上的設計思考。

本文原創發布于人人都是産品經理，未經作者許可，禁止轉載。

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

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部