鑽石舞台

拖動隱喻：卡片左上角的6個點

懸停狀態：卡片陰影

拖動狀態：開始拖動後，卡片變短方便觀察和放置

吸附功能：放下後自動停放到附近位置

陰影倒不是那麼重要，主要是多一層強調而已。

Google Form 這個增加透明度的效果才是重點——因為可以讓你拖動的時候看清下面的內容！

仔細研究後，我發現拖拽交互裡面還有很多可以細節，Google Form 也這個也不一定是最好的。

於是我整理了一些拖拽交互設計心得，看看做到最好可以是怎樣的效果。

先來看看兩個案例對比：

反例

正例

第二個案例感覺更順暢真實，主要是因為反饋效果更多。

接下來，我把拖拽過程中的設計要點展開說一說。

懸停態最重要的就是通過隱喻，讓用戶感知這裡是可以拖拽的。

否則，如果像下圖一樣，只是給拖拽對象加了一個懸停態，幾乎看不出可以拖拽。

反例

為了視覺效果的簡潔，可以默認狀態可以不展示拖拽隱喻，但懸停時一定要有拖拽隱喻。

點陣圖標是現在最主流方式，不論移動端還是桌面端都通用。

桌面端建議把指針也換一下，最好是換成下圖這種十字箭頭，比抓手更好理解。

正例

通過圖標和指針，也能暗示拖動的方向，減少學習成本。

正例

拖拽過程中，主要有兩方面問題需要解決：拖拽對象不突出和拖拽對象遮擋背景，以下反例中都能體現。

反例

可以給拖拽對象加高亮或陰影，例如下圖中的小卡片陰影。

背景信息較密集時，建議降低拖拽對象的透明度，這樣拖拽過程中視線不會被推拽對象完全遮擋。

正例

目標暗示

有的拖拽交互，目標不明確，第一次使用很難理解。

例如下圖，你不確定是不是可以拖到灰色背景處。

反例

這時建議在拖拽開始後，高亮出目標位置的範圍，這樣就少了很多試錯成本。

例如下圖，開始拖拽後，水果和蔬菜卡片立即加上陰影，暗示了可以往哪裡拖。

正例

有些拖拽交互，把對象一拖走，原位置就消失了，這樣很容易給用戶造成不安全感，不知道如果在空白處鬆手會怎樣。

接近新位置時，也不建議像下圖這樣，只是畫一道槓示意，而不把新位置預留出來，這樣看起來不是很直觀。

反例

最好是拖動過程中原位置保留，並且接近新位置時，把放置空間預留出來。

正例

下面的反例中，拖拽對象卡在兩個目標位置之間，如果此時鬆手，不確定會吸附到哪裡。

如果目標位置很密集，用戶拖錯地方的幾率就很高，操作起來不得不小心翼翼。

反例

正例中，一個目標位置被高亮，暗示如果此時放開鼠標，拖放對象會被吸到這個地方。

最好是整個拖拽過程中，一直有一個被高亮的目標位置，即便拖拽對象位於空白處，也可以把原位置高亮出來。

這樣用戶在任何時刻都很清楚，如果自己此時鬆手，拖拽對象會跑去哪裡。

正例

不知道大家有沒有過這樣的經歷，把一個東西拖拽到另一個地方，拖完後就忘記剛剛拖的是什麼了。

尤其是在這過程中頁面還跳動一下，就完全找不着北了。

例如下面的反例，如果沒有記憶，你根本看不出剛剛拖過什麼東西。

反例

很多成熟的拖動交互，例如 Mac/Win 系統的文件管理，除了懸停、拖動兩個狀態之外，還有一個選中狀態。

Mac文件管理

即便拖動完成了，指針也不在拖動對象上懸停，用戶也依舊可以通過選中狀態來找到剛剛拖完的對象。

如果想要取消這個選中狀態，在空白處點擊一下即可。

如果拖動操作較為複雜，涉及的對象多，就建議增加這個選中態，方便查找。

正例

選中狀態不太適合用在移動端，但移動端本身也不適合複雜的拖拽操作。

如果是簡單拖拽操作，也可以不用選中狀態。

總結一下

要設計一個有感拖拽交互，你可以考慮的反饋效果有：拖拽隱喻、拖拽狀態、目標暗示、位置確認、吸附確認和選中狀態。

考慮到開發成本，和實際場景的複雜性，也不可能所有的拖拽交互都把這些做齊全了。

但最好是心裡有數，根據情況選擇需要的反饋效果。

最後再來對比一下差異吧：

反例

正例