從交互流程和狀態兩方面,分析「拖放」功能設計

0 評論 8095 瀏覽 36 收藏 9 分鐘

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

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

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

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

一、拖放設計的使用場景

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

1. 移動項目

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

2. 重新排序

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

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

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

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

1. 拖放前

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

從交互流程和狀態兩方面,分析「拖放」功能設計

2. 拖放中

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

3. 拖放后

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

從交互流程和狀態兩方面,分析「拖放」功能設計

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

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

從交互流程和狀態兩方面,分析「拖放」功能設計

三、最后

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

專欄作家

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

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

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!