比如釣魚時根據(jù)魚的大小不同，手柄會有不同程度的震動反饋；幾乎跟所有家具、裝飾互動，如打開魚缸的燈、使用馬桶等等；

還有就是布置自己的家時，可以進入編輯模式，通過操作按鈕+搖桿，拖拽家具到心儀的位置……等等細節(jié)操作起來簡直不要太爽！

這一波爽爽的拖拽體驗，讓我想來分析看看，在沒有實體搖桿和按鈕的手機屏幕上，如何設(shè)計讓拖拽操作的體驗更優(yōu)。

本文主要從以下幾個方面展開：

1、拖拽操作的幾個關(guān)鍵狀態(tài)

2、拖拽操作的常見應(yīng)用場景及案例分析

3、拖拽操作的設(shè)計關(guān)鍵點

拖拽是自 GUI 出現(xiàn)以來就存在的操作方式，也是一種常見的直接操作（direct manipulation），也就是用戶對對象進行操作時可以直接地、可視化地看到效果。

生活中最常見的就是拖拽文件，將其從源文件夾移動到目標文件夾。

這個過程中有幾個關(guān)鍵的狀態(tài)節(jié)點：

1、選中操作對象，在本例子中，即選中要移動的文件

2、拖動操作對象、但未離開原位置范圍，本例中，是拖動了要移動的文件、但并未離開源文件夾

3、操作對象離開原位置范圍、未接觸目標位置，本例中，是文件離開源文件夾，但未進入目標文件夾

4、操作對象進入目標位置，本例中，是文件進入目標文件夾

5、拖拽結(jié)束，更新對象位置或其他屬性，本例中，是文件歸變?yōu)槟繕宋募A目錄下

上面這種拖拽，原位置、目標位置是分開的、是不同的對象；還有一種拖拽，原位置、目標位置本質(zhì)上是同一對象，見下圖：

如滑動滑塊時，操作對象是滑塊，原位置、目標位置性質(zhì)是相同的，都是滑軌上的點。

關(guān)于拖拽，用戶的心智模型其實很清晰，就是把某個對象從原位置拖動到目標位置。由基礎(chǔ)的含義引申出來，就產(chǎn)生了許多拓展應(yīng)用場景：

如調(diào)整一組對象中，每個對象的位置，就完成了對該組對象的排序；調(diào)整對象邊界的位置，其實就是調(diào)整對象的大小……

下面將對各個場景，進行舉例分析：

1、基礎(chǔ)場景——調(diào)整位置

拖拽調(diào)整位置，在移動端也是最常見的拖拽場景。比如iOS的輔助觸控和微信、QQ的懸浮窗，用戶都可以拖拽它們來調(diào)整它們吸附在屏幕邊緣的具體位置：

有所不同的是，設(shè)計者會根據(jù)具體的產(chǎn)品場景、懸浮窗形態(tài)等，來決定可以放置懸浮窗的范圍。例如，iOS的懸浮窗在未啟用時，呈現(xiàn)半透明狀態(tài)，用戶進行一定適應(yīng)后，它對操作、瀏覽信息的干擾較少，所以對它的位置限制也就較少，可以放置在上下左右任一方位的屏幕邊緣。

而微信、QQ的懸浮窗樣式，是不透明的、帶有一定內(nèi)容信息的，對信息瀏覽有一定的遮擋和干擾，對它位置的限制相對就較多。

2、延伸1.0——選擇內(nèi)容、排序、調(diào)整大小、調(diào)整方向

1.0是對調(diào)整位置的基礎(chǔ)延伸，拖拽的基本含義不變，還是改變對象的位置，如選擇內(nèi)容范圍，其實就是調(diào)整選擇內(nèi)容的邊界的位置：

再比如排序，是對調(diào)整一組對象中某個或某些對象的位置：

調(diào)整大小，是調(diào)整邊界節(jié)點的位置：

調(diào)整方向，是調(diào)整控制點的位置：

3、延伸2.0——對**進行**操作

說以下場景是延伸2.0，是因為他們在原來調(diào)整位置的語義基礎(chǔ)上，增加了功能賦予的含義，把前面說的拖拽移動位置時的「目標位置」定義為執(zhí)行某功能。舉個設(shè)計師再熟悉不過的例子：

將某個圖層拖拽到刪除按鈕上，是將「目標位置」定義為刪除功能，拖拽的含義是將刪除功能賦予該圖層，即對該圖層進行刪除操作。

移動端應(yīng)用此心智模型的場景也很多，如：

在微信朋友圈刪除圖片、在小米手機主屏幕上刪除App，都是將可刪除對象拖拽到刪除按鈕上，意為刪除/卸載該內(nèi)容。

在游戲場景中，為了配合復(fù)雜的規(guī)則邏輯，產(chǎn)生了一系列交互手勢，拖拽的應(yīng)用也被賦予了許多新含義。如在爐石傳說移動端：

簡單來說，將卡片拖拽到某個對象上，可以用該卡牌對該隨從進行攻擊，是將「目標位置」定義為執(zhí)行卡片的攻擊。

iPad OS、Smartisan OS中對多任務(wù)操作的支持，也是用拖拽來實現(xiàn)的：

它根據(jù)應(yīng)用場景，在移動位置的基礎(chǔ)語義上增加了復(fù)制/附加的語義，即把一段內(nèi)容由原App1拖拽到目標App2，就將該內(nèi)容復(fù)制/附加到目標App2中。

還有一些拓展操作，對目標位置要求不那么精確，只要是脫離了原位置范圍即可。如下圖：

QQ中拖拽消息氣泡至一定距離，松手后就可以清除該氣泡，（并有煙花消失的動效）；

聊天界面拖拽圖片至聊天區(qū)域，就可以發(fā)送圖片。

爐石傳說中，玩家將手中的卡片拖拽到戰(zhàn)場區(qū)域，表示將隨從牌置入戰(zhàn)場。

在AR應(yīng)用中，從模型庫中拖拽模型到平面上，就意味著放置模型。

以上都是將原位置范圍以外的區(qū)域作為目標位置，并將「對象進入目標位置」定義為某種操作。

1、用視覺符號明確地告訴用戶：可以拖拽「我」呀

支持拖拽交互的界面中，可以適當(dāng)增加「抓柄」、「拖放」相關(guān)語義的圖標，如下圖：

目前有這幾種常見的圖標，但市面上的App并沒有十分統(tǒng)一的圖標樣式，設(shè)計師可根據(jù)語義理解來繪制，并且避免與自家App中的其他圖標過于接近（如上圖中第三個圖標與漢堡導(dǎo)航的圖標就有些接近）。

如果拖拽操作有明確的方向要求，也可以利用圖標體現(xiàn)出來。

2、拖拽中，被拖拽對象有明確的狀態(tài)變化——你拽的是「我」呀

一旦用戶抓取了要拖放的對象，就需要明確地反饋給用戶——你拖拽的是「我」，我正在跟隨著你的手指移動。這需要讓拖拽中的對象與其他對象看起來有明顯差異，可以用改變以下屬性來做到：

讓它在視覺上處于其他對象的上層，如加大投影

改變背景或描邊顏色

改變大小

改變透明度

使其傾斜或偏移

如Trello中，通過讓卡片傾斜、加大它的投影，來體現(xiàn)拖拽中的狀態(tài)：

小米中拖拽某App時，icon會變大：

3、拖拽中，相關(guān)對象要有對應(yīng)反饋——可以把「我」拖拽到這兒

用戶拖拽對象移到目標位置的過程中，可能與不同的目標位置產(chǎn)生碰撞，這過程中，要預(yù)示用戶這個對象可以落在這兒。除了上述的5點表現(xiàn)方式，還可以用下面的方式表現(xiàn)：

閃爍

出現(xiàn)參考線、震動提示

改變原本順序，出現(xiàn)「鬼影」——展示將對象釋放在此的預(yù)期效果，使用半透明或占位色塊的形式

如Instagram故事中添加標簽時，拖動標簽對齊、刪除時會有一定的震動反饋，表示貼紙拖拽中的狀態(tài)。

在視頻App中，可以對應(yīng)展示用戶拖拽到的時間點、關(guān)鍵幀的畫面預(yù)覽，讓用戶決定是否要拖拽到此位置。

4、注意胖手指問題

在移動端進行精細操作時，胖手指問題無論如何都是無法回避的。在進行拖拽交互的設(shè)計時，要注意：

保證對象中可拖拽的熱區(qū)盡量大

• 如果它真的不大，那就把它做大！

QQ拖拽語音進度條就是一個很好的例子。QQ中的語音消息條高度很窄、短語音的消息條寬度也很窄，如果只允許在氣泡范圍內(nèi)拖拽，用戶拖拽的時候手極有可能遮擋住消息條，根本看不到拖拽到什么位置，要小心翼翼地試探著操作。

為此，設(shè)計師將拖拽的熱區(qū)擴大，由氣泡本身擴大到邊緣區(qū)域。

另外，在最初的氣泡長度規(guī)則下，時長較短的語音氣泡寬度很窄，十分不易于拖拽，而數(shù)據(jù)上又顯示10s以下的短語音占比非常高。對此，設(shè)計者改變了氣泡寬度原有的線性變換規(guī)律，讓短語音氣泡的寬度適當(dāng)變寬，以方便拖拽操作。

• 如果不好做大，那至少讓它看起來大！

安卓版微信中，用戶選擇文字時，會增加放大鏡效果，讓用戶可以更清楚地看到拖拽選擇的內(nèi)容。

拖拽的過程中，盡量讓手指不會遮擋到用戶尋找目標區(qū)域的視線

這點可以結(jié)合來看，把整體的操作熱區(qū)做大，或者讓用戶可以放大查看，又或者像前面舉例的視頻App中，將目標區(qū)域從原來的位置遷移到用戶的視野中、脫離可能遮擋的位置，都是不錯的方式。

保證手指可以將對象精確地拖拽到目標區(qū)域

當(dāng)目標區(qū)域較小時，可以適當(dāng)放大區(qū)域，增加磁性，當(dāng)對象靠近目標區(qū)域時就將其吸附進去。或者像視頻App中，設(shè)置關(guān)鍵幀作為錨點，讓用戶對目標位置有更明確的感知，從而便于操作。

減少一切可能對拖拽操作產(chǎn)生干擾的因素

還是QQ中，一旦觸發(fā)拖拽，聊天頁面內(nèi)的其他操作都會被屏蔽，從而減少操作「噪音」，讓用戶可以在全屏范圍內(nèi)自由拖拽，同時也便于看清拖拽的位置。

美圖秀秀中拖拽調(diào)整貼紙時，也有類似的設(shè)計：拖拽貼紙中，即便手指超出了圖片范圍，也是在拖拽調(diào)整貼紙大小，不會觸發(fā)其他操作。

5、讓拖拽過程更有趣

這點就考量設(shè)計師們的腦洞與小細節(jié)了，像bilibili中，向不同方向滑動進度時，小電視上眼睛看向的方向是不同的，靈動而有趣：

6、不是所有拖拽操作都適合應(yīng)用在移動端的

說了這么多拖拽的設(shè)計思路，最后要提醒一點，以為在PC端廣泛應(yīng)用的拖拽操作，并不一定都適合應(yīng)用在移動端，比如Gmai的移動郵件：

PC端支持拖拽移動郵件，而移動端是通過菜單來交互。

也就是說，交互方式的選擇不是一招鮮吃遍天的，是要設(shè)計師根據(jù)平臺特性、應(yīng)用場景、用戶習(xí)慣等等，尋找操作效率高、體驗佳的方式。

本文對移動端的拖拽操作進行了拆解：

操作狀態(tài)有選中、拖拽中（未離開原位置、剛離開原位置、接觸目標位置）、拖拽完成5種；

常見應(yīng)用場景：從基礎(chǔ)的調(diào)整位置，到基于位置調(diào)整語義的選擇內(nèi)容、排序、調(diào)整大小、調(diào)整方向，到拓展語義后的對**進行**操作；

設(shè)計時應(yīng)注意利用視覺符號告知用戶可拖拽、拖拽中被拖拽對象狀態(tài)明確變化、拖拽中相關(guān)對象要有對應(yīng)反饋、用擴大熱區(qū)和剝離目標位置等方式規(guī)避胖手指問題、注意拖拽操作的效率與適應(yīng)性等問題。