拖動看起來似乎很簡單，就是抓住某個元素把它放到另一個地方而已，實際上拖放時，還需要注意很多問題。本文作者對利用拖放設計進行了分析，希望能給你帶來一些幫助。
上一篇講了web界面設計中的「頁內編輯」，本篇講「利用拖放」。
利用拖放 Drag and Drop：拖動似乎很簡單，就是抓住某個元素把它放到另一個地方而已。實際上在拖放期間，需要處理許多特定的狀態，這些微狀態我們稱之為趣味瞬間（interesting moment）。
一、趣味瞬間
- 用戶怎麼知道拖放？
- 拖放對象的目的是什麼？
- 在哪裡可以或者不可以放置拖動的對象？
- 通過什麼視覺元素來表示拖動的能力？
- 拖動期間怎麼表示有效和無效的放置目標？
- 是否允許用戶拖動實際的對象？
- 還是只允許用戶拖動實際對象的幻影(ghost)？
- 還是拖動一個小縮略圖？
- 整個拖動與放置期間，要對用戶給出哪些視覺反饋？
1. 拖放事件
在整個拖動期間有很多事件發生，如何選擇並運用這些事件給用戶反饋是關鍵。至少可以利用15個事件來提示用戶：
- 頁面加載：在操作發生之前，可以預告拖放功能。例如可以在頁面顯示一條提示信息，告訴用戶可以拖放。
- 滑鼠懸停：滑鼠指針懸停在可拖動的對象上方。
- 滑鼠按下：在可拖動對象上按下滑鼠鍵。
- 拖動啟動：滑鼠開始移動（通常標準是移動3像素）。
- 拖動離開原始位置：拖動重新進入原始位置或包含它的容器。
- 拖動重新進入原始位置：可拖動對象又進入了原來位置。
- 拖動進入有效目標：可拖動對象位於有效的放置目標上方。
- 拖動退出有效目標：可拖動對象離開有效的放置目標。
- 拖動進入無效目標：可拖動對象位於無效的放置目標上方。
- 拖動進入非特定目標：可拖動對象位於放置目標和非防治目標之外的區域。
- 拖動懸停於有效目標：可拖動對象暫停於有效目標之上，但用戶沒有釋放滑鼠。此時有效放置目標會突然打開，以示可以接受上方對象。
- 拖動懸停於無效目標：可拖動對象暫停於無效目標之上，但用戶沒有釋放滑鼠。
- 放置被接受：可拖動對象位於有效目標之上，而且放置已被接受。
- 放置被拒絕：可拖動對象位於無效目標之上，而且放置已被拒絕。
- 放置在父容器上：在個別情況下，不同位置會有不同的含義。
2. 相關元素
在上述事件發生時，都可以在視覺上操作一些相關元素，包括：
- 頁面
- 光標
- 工具提示條
- 拖動對象（或對象的某些部分）
- 拖動對象的父容器
- 放置目標
3. 趣味瞬間網格
使用趣味瞬間網格可以表達任何複雜的交互。它就是一個備忘錄，可以確保不遺漏交互期間需要處理的任何情況。
左側一列是相關元素，上方一行是需要處理的瞬間，每個交叉點就是想要實現的行為。具體實例請繼續往下看。
二、拖放的用途
如果運用得當，拖放是一種非常強大的手段。以下是適用拖放的情況： 拖放模塊、拖放列表、拖放對象、拖放操作、拖放集合。
三、拖放模塊
拖放最大的用途是允許用戶按照自己的意願把對象直接放在頁面的相應位置上。典型的模式就是在頁面上拖放模塊。
在拖動期間，必須告訴用戶如果放開被拖動對象會發生什麼結果，有兩種常用方法：
比如使用占位符表示放置目標。始終在可能發生放置的地方放一個線框。當模塊被拖動移出原來的位置時，原位置顯示虛線框占位符。當目標被拖動到相應位置時，占位符立即填充於該位置。
如keynote中對於幻燈片的拖動，當模塊被拖動移出原來的位置時，原位置顯示線框占位符。
當拖動至目標位置附近時，目標位置顯示占位符，後續模塊依次往後移。
當釋放釋放滑鼠後，目標被「吸入」相應的位置。
但是這種插入方式有一個弊端，占位符目標會導致頁面內容突然的上移或者下挫。用戶在滑鼠釋放後會感覺位置有偏差。
為了儘可能保持頁面的穩定，可以只移動一個插入目標來指明放置模塊。
如powerpoint中對於幻燈片的拖動，當模塊被拖動移出原來的位置時，原位置前方顯示紅色插入條。
當拖動至目標位置附近時，紅色插入條實時展示將要插入的具體位置，此時頁面整體的布局不變，僅僅是依靠插入條來指明將要插入的位置。
當釋放釋放滑鼠後，目標被「吸入」相應的位置。
四、拖放列表
重排列表項和重排模塊非常相似，但只能限制一個維度上（上下或左右）。拖放列表是重排列表項的方法。
如微信公眾號的拖動配置菜單：
1）滑鼠懸停和按下時
變化為帶手型光標，背景色改變，並且輕微的像素位移抖動效果，提示可以拖動：
2）拖動啟動
原位置顯示出一塊白色矩形框占位符：
3）拖動懸停於有效目標
當滑鼠滑過目標位置的中心點後，目標位置原內容（菜單4）向上移動，新空出一塊白色矩形框占位符：
4）放置被接受
目標被「吸入」新放置位置，原位置和現位置白色矩形占位框都消失：
有一點值得注意，當占位符切換到新位置，怎樣確定占位符目標?根據什麼來確定用戶想要把對象格到哪裡？滑鼠位置、被拖動對象的邊界、被遮住對象的邊界，都可以用來確定模塊新位置。此處例子中就是採用滑鼠與被遮住對象的中心點來確定的。
除了拖放之外，置頂/置底和設置默認也是比較常見的移動列表的方式。
如網易郵箱列表的郵件置頂功能，將某個郵件從列表的下方快速排序於最上方：
淘寶收貨地址列表，原默認地址顯示在列表最上方。
設置默認地址後，新的默認地址排序在最上面。
5）拖動透鏡
當有些情況不方便拖動時，如拖動對象非常小，可以在拖動期間提供拖動透鏡。
如iPhone為方便用戶編輯文本時拖動插入條，提供了拖動透鏡。
五、拖放對象
拖放的另一種常見用途是修改對象之間的從屬關係。如果對象間的關係可以形象化的表示出來，那麼就可以使用拖放。
如XMind中，可以使用拖動對對象的從屬關係進行重排：
如果在過程中能將對象的關係形象表達出來，那麼拖放是實現對象關係改變的自然選擇。
1）拖動反饋：拖動啟動
當滑鼠發生移動時拖動啟動，如下圖，當啟動拖動時，拖動對象及其下屬的關係會同時被收起，跟隨拖動對象一起被拖動重排。
2）拖動反饋：放置目標
當放置目標有效時：被拖動對象文字下方會出現藍色塊，且會從放置目標的上一級拉出一條藍色線。這種反饋方式是同時修改被拖動對象和放置目標的視覺樣式。
當放置目標無效時：不展示拖動對象與放置目標的從屬關係，也不展示目標位置的色塊占位符。
六、拖放集合
拖放的另一種用途是集中一批對象到某個特定位置。如Mac桌面上的廢紙簍，選中對應項並集中保存到一個集合列表中。
作者：細水，互動設計師；來源公眾號：交互視角。
本文由 @細水 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平台僅提供信息存儲空間服務。