編輯導語：對于大多數使用者來說，可能大家在日常生活中并沒有在意到拖拽互動，但是它卻是設計中必不可少的一部分。真實的拖拽體驗會給客戶提供更好的使用感受。本文作者對比了國内外大廠的拖拽設計并從七個方面介紹了如何更好的設計拖拽。讓我們一起來看看吧！
最近正在設計一個拖拽互動，參考了很多線上産品的案例，發現這裡面不簡單。
為了讓拖拽的體驗更真實，需要給使用者提供很多回報效果。
大部分産品都隻做了一部分回報效果，用起來也夠了，但更充足的回報能夠帶來更「有感」的體驗。
例如騰訊文檔的收集表，在調整問題順序時，就用到了拖拽互動：
上圖來源：什麼叫細節控？看看Google問卷的設計吧
上圖可以看到，這個拖拽互動包含有拖動隐喻、懸停狀态、拖動狀态和吸附功能，和國内很多其它産品比較起來，也算是不錯了。
拖動隐喻：卡片左上角的6個點
懸停狀态：卡片陰影
拖動狀态：開始拖動後，卡片變短友善觀察和放置
吸附功能：放下後自動停放到附近位置
然而，如果你對比一下 Google Form 的拖拽互動，就會發現騰訊收集表還有優化空間：
Google Form 拖動起來明顯更順暢，這是騰訊收集表有點小 Bug，我們暫時不看技術層面的事情。
騰訊收集表有的回報效果，Google Form 一個不少，而且還更到位。
主要差異展現在拖拽狀态：
騰訊收集表：隻是變短了
Google Form：不但變短，而且還變透明、增加了陰影
陰影倒不是那麼重要，主要是多一層強調而已。
Google Form 這個增加透明度的效果才是重點，因為可以讓你拖動的時候看清下面的内容！
仔細研究後，我發現拖拽互動裡面還有很多可以細節，Google Form 也這個也不一定是最好的。
于是我整理了一些拖拽互動設計心得，看看做到最好可以是怎樣的效果。
先來看看兩個案例對比：
反例
正例
第二個案例感覺更順暢真實，主要是因為回報效果更多。
接下來，我把拖拽過程中的設計要點展開說一說。
一、拖拽隐喻
懸停态最重要的就是通過隐喻，讓使用者感覺這裡是可以拖拽的。
否則，如果像下圖一樣，隻是給拖拽對象加了一個懸停态，幾乎看不出可以拖拽。
反例
為了視覺效果的簡潔，可以預設狀态可以不展示拖拽隐喻，但懸停時一定要有拖拽隐喻。
點陣圖示是現在最主流方式，不論移動端還是桌面端都通用。
桌面端建議把指針也換一下，最好是換成下圖這種十字箭頭，比抓手更好了解。
正例
通過圖示和指針，也能暗示拖動的方向，減少學習成本。
正例
二、拖拽狀态
拖拽過程中，主要有兩方面問題需要解決：拖拽對象不突出和拖拽對象遮擋背景，以下反例中都能展現。
反例
可以給拖拽對象加高亮或陰影，例如下圖中的小卡片陰影。
背景資訊較密集時，建議降低拖拽對象的透明度，這樣拖拽過程中視線不會被推拽對象完全遮擋。
正例
三、目标暗示
有的拖拽互動，目标不明确，第一次使用很難了解。
例如下圖，你不确定是不是可以拖到灰色背景處。
反例
這時建議在拖拽開始後，高亮出目标位置的範圍，這樣就少了很多試錯成本。
例如下圖，開始拖拽後，水果和蔬菜卡片立即加上陰影，暗示了可以往哪裡拖。
正例
四、位置确認
有些拖拽互動，把對象一拖走，原位置就消失了，這樣很容易給使用者造成不安全感，不知道如果在空白處松手會怎樣。
接近新位置時，也不建議像下圖這樣，隻是畫一道杠示意，而不把新位置預留出來，這樣看起來不是很直覺。
反例
最好是拖動過程中原位置保留，并且接近新位置時，把放置空間預留出來。
正例
五、吸附确認
下面的反例中，拖拽對象卡在兩個目标位置之間，如果此時松手，不确定會吸附到哪裡。
如果目标位置很密集，使用者拖錯地方的幾率就很高，操作起來不得不小心翼翼。
反例
正例中，一個目标位置被高亮，暗示如果此時放開滑鼠，拖放對象會被吸到這個地方。
最好是整個拖拽過程中，一直有一個被高亮的目标位置，即便拖拽對象位于空白處，也可以把原位置高亮出來。
這樣使用者在任何時刻都很清楚，如果自己此時松手，拖拽對象會跑去哪裡。
正例
六、選中狀态
不知道大家有沒有過這樣的經曆，把一個東西拖拽到另一個地方，拖完後就忘記剛剛拖的是什麼了。
尤其是在這過程中頁面還跳動一下，就完全找不着北了。
例如下面的反例，如果沒有記憶，你根本看不出剛剛拖過什麼東西。
反例
很多成熟的拖動互動，例如 Mac/Win 系統的檔案管理，除了懸停、拖動兩個狀态之外，還有一個選中狀态。
Mac檔案管理
即便拖動完成了，指針也不在拖動對象上懸停，使用者也依舊可以通過選中狀态來找到剛剛拖完的對象。
如果想要取消這個選中狀态，在空白處點選一下即可。
如果拖動操作較為複雜，涉及的對象多，就建議增加這個選中态，友善查找。
正例
選中狀态不太适合用在移動端，但移動端本身也不适合複雜的拖拽操作。
如果是簡單拖拽操作，也可以不用選中狀态。
七、總結一下
要設計一個有感拖拽互動，你可以考慮的回報效果有：
拖拽隐喻、拖拽狀态、目标暗示、位置确認、吸附确認和選中狀态。
考慮到開發成本，和實際場景的複雜性，也不可能所有的拖拽互動都把這些做齊全了。
但最好是心裡有數，根據情況選擇需要的回報效果。
最後再來對比一下差異吧：
反例
正例
#專欄作家#
本文由@體驗進階的ZoeYZ 原創釋出于人人都是産品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協定。