從交互流程和狀態(tài)兩方面分析「拖放」功能設計

從交互流程和狀態(tài)兩方面，分析「拖放」功能設計大家好，這里是設計夾，今天為大家分享的是「拖放設計」。拖放(draganddrop)指用戶選中圖片、列表項或卡片等元素，拖放到頁面的其他位置或其他產(chǎn)品中。這種交互方式在移動端表現(xiàn)為長按拖動，在PC端表現(xiàn)為單擊并用鼠標拖動，最后放到目標位置上。一、拖放設計的使用場景拖放式UI/UX的設計非常多樣化，并被用在多種場景中?；谠O計需求的不同，每個產(chǎn)品可能會要求不同的拖放設計。1.移動項目這種拖放類型最常見也最常用，我們將桌面上或者頁面中的靜態(tài)項目拖放到指定的區(qū)域，進而完成操作。例如在一些文檔處理網(wǎng)站中，我們可以接將電腦桌面上的文件直拖拽到網(wǎng)頁中，完成上傳文件的過程。又或者電腦桌面上的文件夾，被拖放到回收站中。2.重新排序這種類型在網(wǎng)站設計中比較常見，這里的拖動目標在頁面中是動態(tài)顯示的，并且會在釋放拖動后顯示項目最終的位置。頁面中有多個卡片，可以長按拖動來調(diào)整卡片的位置，達到重新排序的目的。在拖動頁面中的列表或者卡片重新調(diào)整順序時，這里介紹兩種拖動交互方式。第一種交互方式是在拖動某個列表時，這個列表仍然在原位置顯示，只是顏色會變淺。拖動到某個位置時，會顯示一個指示條，其他列表的位置保持不動。這樣做的優(yōu)點是能減少列表之間的相互移動，方便開發(fā)設計。第二種交互方式是被拖動的列表會從原來的位置挪開，拖動到某個位置時，能直接在這個位置上顯示出來，同時其他列表的位置也會動態(tài)變化。這種拖動交互的反饋更直接，也是當前用的比較多的交互方式。二、拖放功能設計流程、狀態(tài)分析為了方便大家更好理解，我們將拖放的交互分為拖放前、拖放中、拖放后三個過程，整體分析前、中、后的狀態(tài)以及拖放過程中會涉及到的其他場景。1.拖放前在拖動前，被拖動的元素處于初始化的狀態(tài)。那么我們?nèi)绾巫屧乜雌饋硎强梢酝戏诺哪?？除了必要的文字提示，最常用的方法是在列表或者卡片上展示代表拖放的icon，告訴用戶這些元素支持拖動。在PC端中，當鼠標懸停在可拖動的項目上時，還可以通過改變鼠標的樣式(抓手、指針等)，告訴用戶項目可以拖動。在改變鼠標樣式的基礎上，為拖動icon增加一個懸浮狀態(tài)，這樣能更好地表達拖動的意思。當鼠標點擊或在手機上按下要拖動的元素時，被拖動的元素往往會有一個狀態(tài)的變化，比如列表增加陰影效果或者拖動圖標顏色變化，表明觸發(fā)了拖動。2.拖放中觸發(fā)拖動后，接下來就到了拖動中流程。通過鼠標或手指移動，被拖動的元素也會跟著移動，進而將元素拖動到指定的位置上。如果當前的列表支持多選，可以選擇多個列表項，然后一起拖動。在多個列表共同拖動的情況下，最好能有一個顯示多選數(shù)量的徽標，這樣能清楚地展示出多選的數(shù)量。當需要把項目拖動到指定區(qū)域的場景中，隨著被拖動的項目越來越靠近指定區(qū)域，該區(qū)域的視覺反饋可以越來越強，起到很好的指示作用。如果拖動的項目違反了規(guī)則，可以直接給出錯誤反饋。例如我們想把四個列表一起拖到屏幕上的指定區(qū)域，如果不符合拖放規(guī)則，在拖動到該區(qū)域時給出錯誤提示，方便用戶了解規(guī)則。3.拖放后拖放完成后，可以直接顯示一個拖放成功的提示，清晰地告知用戶操作成功。例如把四個列表一起拖動到指定區(qū)域后，除了顯示操作完成，還可以把拖放的列表數(shù)量一起顯示出來，讓提示更嚴謹。如果把四個列表一起拖動到指定區(qū)域后，每個列表還需要依次上傳，這個時候最好能提供上傳狀態(tài)的提示：上傳中(進度)、已完成、上傳失敗