中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

最近正在設計一個拖拽交互，參考了很多線上產品的案例，發現這里面不簡單。

為了讓拖拽的體驗更真實，需要給用戶提供很多反饋效果。

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

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

上圖來源：什么叫細節控？看看Google問卷的設計吧

上圖可以看到，這個拖拽交互包含有拖動隱喻、懸停狀態、拖動狀態和吸附功能，和國內很多其它產品比較起來，也算是不錯了。

• 拖動隱喻：卡片左上角的6個點
• 懸停狀態：卡片陰影
• 拖動狀態：開始拖動后，卡片變短方便觀察和放置
• 吸附功能：放下后自動停放到附近位置

然而，如果你對比一下 Google Form 的拖拽交互，就會發現騰訊收集表還有優化空間：

Google Form 拖動起來明顯更順暢，這是騰訊收集表有點小 Bug，我們暫時不看技術層面的事情。

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

主要差異體現在拖拽狀態：

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

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

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

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

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

先來看看兩個案例對比：

反例

正例

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

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

一、拖拽隱喻

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

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

反例

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

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

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

正例

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

正例

二、拖拽狀態

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

反例

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

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

正例

三、目標暗示

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

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

反例

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

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

正例

四、位置確認

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

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

反例

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

正例

五、吸附確認

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

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

反例

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

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

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

正例

六、選中狀態

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

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

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

反例

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

Mac文件管理

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

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

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

正例

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

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

七、總結一下

要設計一個有感拖拽交互，你可以考慮的反饋效果有：

拖拽隱喻、拖拽狀態、目標暗示、位置確認、吸附確認和選中狀態。

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

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

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

反例

正例

#專欄作家#

作者：ZoeYZ，一名前華為騰訊留英設計師；公眾號：體驗進階。

本文由@體驗進階的ZoeYZ 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。