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

大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「拖放設(shè)計(jì)」。

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

這種交互方式在移動(dòng)端表現(xiàn)為長按拖動(dòng)，在PC端表現(xiàn)為單擊并用鼠標(biāo)拖動(dòng)，最后放到目標(biāo)位置上。

一、拖放設(shè)計(jì)的使用場(chǎng)景

拖放式UI/UX的設(shè)計(jì)非常多樣化，并被用在多種場(chǎng)景中?；?strong>設(shè)計(jì)需求的不同，每個(gè)產(chǎn)品可能會(huì)要求不同的拖放設(shè)計(jì)。

1. 移動(dòng)項(xiàng)目

這種拖放類型最常見也最常用，我們將桌面上或者頁面中的靜態(tài)項(xiàng)目拖放到指定的區(qū)域，進(jìn)而完成操作。

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

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

2. 重新排序

這種類型在網(wǎng)站設(shè)計(jì)中比較常見，這里的拖動(dòng)目標(biāo)在頁面中是動(dòng)態(tài)顯示的，并且會(huì)在釋放拖動(dòng)后顯示項(xiàng)目最終的位置。

頁面中有多個(gè)卡片，可以長按拖動(dòng)來調(diào)整卡片的位置，達(dá)到重新排序的目的。

在拖動(dòng)頁面中的列表或者卡片重新調(diào)整順序時(shí)，這里介紹兩種拖動(dòng)交互方式。

第一種交互方式是在拖動(dòng)某個(gè)列表時(shí)，這個(gè)列表仍然在原位置顯示，只是顏色會(huì)變淺。拖動(dòng)到某個(gè)位置時(shí)，會(huì)顯示一個(gè)指示條，其他列表的位置保持不動(dòng)。

這樣做的優(yōu)點(diǎn)是能減少列表之間的相互移動(dòng)，方便開發(fā)設(shè)計(jì)。

第二種交互方式是被拖動(dòng)的列表會(huì)從原來的位置挪開，拖動(dòng)到某個(gè)位置時(shí)，能直接在這個(gè)位置上顯示出來，同時(shí)其他列表的位置也會(huì)動(dòng)態(tài)變化。

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

二、拖放功能設(shè)計(jì)流程、狀態(tài)分析

為了方便大家更好理解，我們將拖放的交互分為拖放前、拖放中、拖放后三個(gè)過程，整體分析前、中、后的狀態(tài)以及拖放過程中會(huì)涉及到的其他場(chǎng)景。

1. 拖放前

在拖動(dòng)前，被拖動(dòng)的元素處于初始化的狀態(tài)。那么我們?nèi)绾巫屧乜雌饋硎强梢酝戏诺哪兀?/p>

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

在PC端中，當(dāng)鼠標(biāo)懸停在可拖動(dòng)的項(xiàng)目上時(shí)，還可以通過改變鼠標(biāo)的樣式(抓手、指針等)，告訴用戶項(xiàng)目可以拖動(dòng)。

在改變鼠標(biāo)樣式的基礎(chǔ)上，為拖動(dòng)icon增加一個(gè)懸浮狀態(tài)，這樣能更好地表達(dá)拖動(dòng)的意思。

當(dāng)鼠標(biāo)點(diǎn)擊或在手機(jī)上按下要拖動(dòng)的元素時(shí)，被拖動(dòng)的元素往往會(huì)有一個(gè)狀態(tài)的變化，比如列表增加陰影效果或者拖動(dòng)圖標(biāo)顏色變化，表明觸發(fā)了拖動(dòng)。

2. 拖放中

觸發(fā)拖動(dòng)后，接下來就到了拖動(dòng)中流程。

通過鼠標(biāo)或手指移動(dòng)，被拖動(dòng)的元素也會(huì)跟著移動(dòng)，進(jìn)而將元素拖動(dòng)到指定的位置上。

如果當(dāng)前的列表支持多選，可以選擇多個(gè)列表項(xiàng)，然后一起拖動(dòng)。

在多個(gè)列表共同拖動(dòng)的情況下，最好能有一個(gè)顯示多選數(shù)量的徽標(biāo)，這樣能清楚地展示出多選的數(shù)量。

當(dāng)需要把項(xiàng)目拖動(dòng)到指定區(qū)域的場(chǎng)景中，隨著被拖動(dòng)的項(xiàng)目越來越靠近指定區(qū)域，該區(qū)域的視覺反饋可以越來越強(qiáng)，起到很好的指示作用。

如果拖動(dòng)的項(xiàng)目違反了規(guī)則，可以直接給出錯(cuò)誤反饋。

例如我們想把四個(gè)列表一起拖到屏幕上的指定區(qū)域，如果不符合拖放規(guī)則，在拖動(dòng)到該區(qū)域時(shí)給出錯(cuò)誤提示，方便用戶了解規(guī)則。

3. 拖放后

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

例如把四個(gè)列表一起拖動(dòng)到指定區(qū)域后，除了顯示操作完成，還可以把拖放的列表數(shù)量一起顯示出來，讓提示更嚴(yán)謹(jǐn)。

如果把四個(gè)列表一起拖動(dòng)到指定區(qū)域后，每個(gè)列表還需要依次上傳，這個(gè)時(shí)候最好能提供上傳狀態(tài)的提示：

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

三、最后

以上分析了拖放功能的使用場(chǎng)景和狀態(tài)，希望通過這些內(nèi)容幫助大家了解「拖放」功能在設(shè)計(jì)中的用法，進(jìn)一步提升體驗(yàn)！