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

從交互流程和狀態(tài)兩方面，分析「拖放」功能設(shè)計(jì)大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「拖放設(shè)計(jì)」。拖放(draganddrop)指用戶選中圖片、列表項(xiàng)或卡片等元素，拖放到頁(yè)面的其他位置或其他產(chǎn)品中。這種交互方式在移動(dòng)端表現(xiàn)為長(zhǎng)按拖動(dòng)，在PC端表現(xiàn)為單擊并用鼠標(biāo)拖動(dòng)，最后放到目標(biāo)位置上。一、拖放設(shè)計(jì)的使用場(chǎng)景拖放式UI/UX的設(shè)計(jì)非常多樣化，并被用在多種場(chǎng)景中。基于設(shè)計(jì)需求的不同，每個(gè)產(chǎn)品可能會(huì)要求不同的拖放設(shè)計(jì)。1.移動(dòng)項(xiàng)目這種拖放類(lèi)型最常見(jiàn)也最常用，我們將桌面上或者頁(yè)面中的靜態(tài)項(xiàng)目拖放到指定的區(qū)域，進(jìn)而完成操作。例如在一些文檔處理網(wǎng)站中，我們可以接將電腦桌面上的文件直拖拽到網(wǎng)頁(yè)中，完成上傳文件的過(guò)程。又或者電腦桌面上的文件夾，被拖放到回收站中。2.重新排序這種類(lèi)型在網(wǎng)站設(shè)計(jì)中比較常見(jiàn)，這里的拖動(dòng)目標(biāo)在頁(yè)面中是動(dòng)態(tài)顯示的，并且會(huì)在釋放拖動(dòng)后顯示項(xiàng)目最終的位置。頁(yè)面中有多個(gè)卡片，可以長(zhǎng)按拖動(dòng)來(lái)調(diào)整卡片的位置，達(dá)到重新排序的目的。在拖動(dòng)頁(yè)面中的列表或者卡片重新調(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)，方便開(kāi)發(fā)設(shè)計(jì)。第二種交互方式是被拖動(dòng)的列表會(huì)從原來(lái)的位置挪開(kāi)，拖動(dòng)到某個(gè)位置時(shí)，能直接在這個(gè)位置上顯示出來(lái)，同時(shí)其他列表的位置也會(huì)動(dòng)態(tài)變化。這種拖動(dòng)交互的反饋更直接，也是當(dāng)前用的比較多的交互方式。二、拖放功能設(shè)計(jì)流程、狀態(tài)分析為了方便大家更好理解，我們將拖放的交互分為拖放前、拖放中、拖放后三個(gè)過(guò)程，整體分析前、中、后的狀態(tài)以及拖放過(guò)程中會(huì)涉及到的其他場(chǎng)景。1.拖放前在拖動(dòng)前，被拖動(dòng)的元素處于初始化的狀態(tài)。那么我們?nèi)绾巫屧乜雌饋?lái)是可以拖放的呢？除了必要的文字提示，最常用的方法是在列表或者卡片上展示代表拖放的icon，告訴用戶這些元素支持拖動(dòng)。在PC端中，當(dāng)鼠標(biāo)懸停在可拖動(dòng)的項(xiàng)目上時(shí)，還可以通過(guò)改變鼠標(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)后，接下來(lái)就到了拖動(dòng)中流程。通過(guò)鼠標(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)目越來(lái)越靠近指定區(qū)域，該區(qū)域的視覺(jué)反饋可以越來(lái)越強(qiáng)，起到很好的指示作用。如果拖動(dòng)的項(xiàng)目違反了規(guī)則，可以直接給出錯(cuò)誤反饋。例如我們想把四個(gè)列表一起拖到屏幕上的指定區(qū)域，如果不符合拖放規(guī)則，在拖動(dòng)到該區(qū)域時(shí)給出錯(cuò)誤提示，方便用戶了解規(guī)則。3.拖放后拖放完成后，可以直接顯示一個(gè)拖放成功的提示，清晰地告知用戶操作成功。例如把四個(gè)列表一起拖動(dòng)到指定區(qū)域后，除了顯示操作完成，還可以把拖放的列表數(shù)量一起顯示出來(lái)，讓提示更嚴(yán)謹(jǐn)。如果把四個(gè)列表一起拖動(dòng)到指定區(qū)域后，每個(gè)列表還需要依次上傳，這個(gè)時(shí)候最好能提供上傳狀態(tài)的提示：上傳中(進(jìn)度)、已完成、上傳失敗