編輯導(dǎo)語：對(duì)于大多數(shù)用戶來說，可能大家在日常生活中并沒有在意到拖拽交互，但是它卻是設(shè)計(jì)中必不可少的一部分。真實(shí)的拖拽體驗(yàn)會(huì)給客戶提供更好的使用感受。本文作者對(duì)比了國內(nèi)外大廠的拖拽設(shè)計(jì)并從七個(gè)方面介紹了如何更好的設(shè)計(jì)拖拽。讓我們一起來看看吧！

最近正在設(shè)計(jì)一個(gè)拖拽交互，參考了很多線上產(chǎn)品的案例，發(fā)現(xiàn)這里面不簡單。

為了讓拖拽的體驗(yàn)更真實(shí)，需要給用戶提供很多反饋效果。

大部分產(chǎn)品都只做了一部分反饋效果，用起來也夠了，但更充足的反饋能夠帶來更「有感」的體驗(yàn)。

例如騰訊文檔的收集表，在調(diào)整問題順序時(shí)，就用到了拖拽交互：

上圖來源：什么叫細(xì)節(jié)控？看看Google問卷的設(shè)計(jì)吧

上圖可以看到，這個(gè)拖拽交互包含有拖動(dòng)隱喻、懸停狀態(tài)、拖動(dòng)狀態(tài)和吸附功能，和國內(nèi)很多其它產(chǎn)品比較起來，也算是不錯(cuò)了。

• 拖動(dòng)隱喻：卡片左上角的6個(gè)點(diǎn)
• 懸停狀態(tài)：卡片陰影
• 拖動(dòng)狀態(tài)：開始拖動(dòng)后，卡片變短方便觀察和放置
• 吸附功能：放下后自動(dòng)停放到附近位置

然而，如果你對(duì)比一下 Google Form 的拖拽交互，就會(huì)發(fā)現(xiàn)騰訊收集表還有優(yōu)化空間：

Google Form 拖動(dòng)起來明顯更順暢，這是騰訊收集表有點(diǎn)小 Bug，我們暫時(shí)不看技術(shù)層面的事情。

騰訊收集表有的反饋效果，Google Form 一個(gè)不少，而且還更到位。

主要差異體現(xiàn)在拖拽狀態(tài)：

• 騰訊收集表：只是變短了
• Google Form：不但變短，而且還變透明、增加了陰影

陰影倒不是那么重要，主要是多一層強(qiáng)調(diào)而已。

Google Form 這個(gè)增加透明度的效果才是重點(diǎn)，因?yàn)榭梢宰屇阃蟿?dòng)的時(shí)候看清下面的內(nèi)容！

仔細(xì)研究后，我發(fā)現(xiàn)拖拽交互里面還有很多可以細(xì)節(jié)，Google Form 也這個(gè)也不一定是最好的。

于是我整理了一些拖拽交互設(shè)計(jì)心得，看看做到最好可以是怎樣的效果。

先來看看兩個(gè)案例對(duì)比：

反例

正例

第二個(gè)案例感覺更順暢真實(shí)，主要是因?yàn)榉答佇Ч唷?/p>

接下來，我把拖拽過程中的設(shè)計(jì)要點(diǎn)展開說一說。

一、拖拽隱喻

懸停態(tài)最重要的就是通過隱喻，讓用戶感知這里是可以拖拽的。

否則，如果像下圖一樣，只是給拖拽對(duì)象加了一個(gè)懸停態(tài)，幾乎看不出可以拖拽。

反例

為了視覺效果的簡潔，可以默認(rèn)狀態(tài)可以不展示拖拽隱喻，但懸停時(shí)一定要有拖拽隱喻。

點(diǎn)陣圖標(biāo)是現(xiàn)在最主流方式，不論移動(dòng)端還是桌面端都通用。

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

正例

通過圖標(biāo)和指針，也能暗示拖動(dòng)的方向，減少學(xué)習(xí)成本。

正例

二、拖拽狀態(tài)

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

反例

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

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

正例

三、目標(biāo)暗示

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

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

反例

這時(shí)建議在拖拽開始后，高亮出目標(biāo)位置的范圍，這樣就少了很多試錯(cuò)成本。

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

正例

四、位置確認(rèn)

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

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

反例

最好是拖動(dòng)過程中原位置保留，并且接近新位置時(shí)，把放置空間預(yù)留出來。

正例

五、吸附確認(rèn)

下面的反例中，拖拽對(duì)象卡在兩個(gè)目標(biāo)位置之間，如果此時(shí)松手，不確定會(huì)吸附到哪里。

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

反例

正例中，一個(gè)目標(biāo)位置被高亮，暗示如果此時(shí)放開鼠標(biāo)，拖放對(duì)象會(huì)被吸到這個(gè)地方。

最好是整個(gè)拖拽過程中，一直有一個(gè)被高亮的目標(biāo)位置，即便拖拽對(duì)象位于空白處，也可以把原位置高亮出來。

這樣用戶在任何時(shí)刻都很清楚，如果自己此時(shí)松手，拖拽對(duì)象會(huì)跑去哪里。

正例

六、選中狀態(tài)

不知道大家有沒有過這樣的經(jīng)歷，把一個(gè)東西拖拽到另一個(gè)地方，拖完后就忘記剛剛拖的是什么了。

尤其是在這過程中頁面還跳動(dòng)一下，就完全找不著北了。

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

反例

很多成熟的拖動(dòng)交互，例如 Mac/Win 系統(tǒng)的文件管理，除了懸停、拖動(dòng)兩個(gè)狀態(tài)之外，還有一個(gè)選中狀態(tài)。

Mac文件管理

即便拖動(dòng)完成了，指針也不在拖動(dòng)對(duì)象上懸停，用戶也依舊可以通過選中狀態(tài)來找到剛剛拖完的對(duì)象。

如果想要取消這個(gè)選中狀態(tài)，在空白處點(diǎn)擊一下即可。

如果拖動(dòng)操作較為復(fù)雜，涉及的對(duì)象多，就建議增加這個(gè)選中態(tài)，方便查找。

正例

選中狀態(tài)不太適合用在移動(dòng)端，但移動(dòng)端本身也不適合復(fù)雜的拖拽操作。

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

七、總結(jié)一下

要設(shè)計(jì)一個(gè)有感拖拽交互，你可以考慮的反饋效果有：

拖拽隱喻、拖拽狀態(tài)、目標(biāo)暗示、位置確認(rèn)、吸附確認(rèn)和選中狀態(tài)。

考慮到開發(fā)成本，和實(shí)際場(chǎng)景的復(fù)雜性，也不可能所有的拖拽交互都把這些做齊全了。

但最好是心里有數(shù)，根據(jù)情況選擇需要的反饋效果。

最后再來對(duì)比一下差異吧：

反例

正例

#專欄作家#

作者：ZoeYZ，一名前華為騰訊留英設(shè)計(jì)師；公眾號(hào)：體驗(yàn)進(jìn)階。

本文由@體驗(yàn)進(jìn)階的ZoeYZ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。