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

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

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

本文主要從以下幾個(gè)方面展開：

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

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

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

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

生活中最常見的就是拖拽文件，將其從源文件夾移動(dòng)到目標(biāo)文件夾。

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

1、選中操作對(duì)象，在本例子中，即選中要移動(dòng)的文件

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

3、操作對(duì)象離開原位置范圍、未接觸目標(biāo)位置，本例中，是文件離開源文件夾，但未進(jìn)入目標(biāo)文件夾

4、操作對(duì)象進(jìn)入目標(biāo)位置，本例中，是文件進(jìn)入目標(biāo)文件夾

5、拖拽結(jié)束，更新對(duì)象位置或其他屬性，本例中，是文件歸變?yōu)槟繕?biāo)文件夾目錄下

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

如滑動(dòng)滑塊時(shí)，操作對(duì)象是滑塊，原位置、目標(biāo)位置性質(zhì)是相同的，都是滑軌上的點(diǎn)。

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

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

下面將對(duì)各個(gè)場(chǎng)景，進(jìn)行舉例分析：

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

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

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

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

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

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

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

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

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

3、延伸2.0——對(duì)**進(jìn)行**操作

說(shuō)以下場(chǎng)景是延伸2.0，是因?yàn)樗麄冊(cè)谠瓉?lái)調(diào)整位置的語(yǔ)義基礎(chǔ)上，增加了功能賦予的含義，把前面說(shuō)的拖拽移動(dòng)位置時(shí)的「目標(biāo)位置」定義為執(zhí)行某功能。舉個(gè)設(shè)計(jì)師再熟悉不過的例子：

將某個(gè)圖層拖拽到刪除按鈕上，是將「目標(biāo)位置」定義為刪除功能，拖拽的含義是將刪除功能賦予該圖層，即對(duì)該圖層進(jìn)行刪除操作。

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

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

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

簡(jiǎn)單來(lái)說(shuō)，將卡片拖拽到某個(gè)對(duì)象上，可以用該卡牌對(duì)該隨從進(jìn)行攻擊，是將「目標(biāo)位置」定義為執(zhí)行卡片的攻擊。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

改變背景或描邊顏色

改變大小

改變透明度

使其傾斜或偏移

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

小米中拖拽某App時(shí)，icon會(huì)變大：

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

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

閃爍

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

改變?cè)卷樞?，出現(xiàn)「鬼影」——展示將對(duì)象釋放在此的預(yù)期效果，使用半透明或占位色塊的形式

如Instagram故事中添加標(biāo)簽時(shí)，拖動(dòng)標(biāo)簽對(duì)齊、刪除時(shí)會(huì)有一定的震動(dòng)反饋，表示貼紙拖拽中的狀態(tài)。

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

4、注意胖手指問題

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

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

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

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

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

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

• 如果不好做大，那至少讓它看起來(lái)大！

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

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

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

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

當(dāng)目標(biāo)區(qū)域較小時(shí)，可以適當(dāng)放大區(qū)域，增加磁性，當(dāng)對(duì)象靠近目標(biāo)區(qū)域時(shí)就將其吸附進(jìn)去?；蛘呦褚曨lApp中，設(shè)置關(guān)鍵幀作為錨點(diǎn)，讓用戶對(duì)目標(biāo)位置有更明確的感知，從而便于操作。

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

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

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

5、讓拖拽過程更有趣

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

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

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

PC端支持拖拽移動(dòng)郵件，而移動(dòng)端是通過菜單來(lái)交互。

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

本文對(duì)移動(dòng)端的拖拽操作進(jìn)行了拆解：

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

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

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