五一假期的时候沉迷动森，除了游戏机制，更是被其中细腻的交互细节打动。

比如钓鱼时根据鱼的大小不同，手柄会有不同程度的震动反馈；几乎跟所有家具、装饰互动，如打开鱼缸的灯、使用马桶等等；

还有就是布置自己的家时，可以进入编辑模式，通过操作按钮+摇杆，拖拽家具到心仪的位置……等等细节操作起来简直不要太爽！

这一波爽爽的拖拽体验，让我想来分析看看，在没有实体摇杆和按钮的手机屏幕上，如何设计让拖拽操作的体验更优。

本文主要从以下几个方面展开：

1、拖拽操作的几个关键状态

2、拖拽操作的常见应用场景及案例分析

3、拖拽操作的设计关键点

一、关键状态

拖拽是自 GUI 出现以来就存在的操作方式，也是一种常见的直接操作（direct manipulation），也就是用户对对象进行操作时可以直接地、可视化地看到效果。

生活中最常见的就是拖拽文件，将其从源文件夹移动到目标文件夹。

（图源自网络）

这个过程中有几个关键的状态节点：

1、选中操作对象，在本例子中，即选中要移动的文件

2、拖动操作对象、但未离开原位置范围，本例中，是拖动了要移动的文件、但并未离开源文件夹

3、操作对象离开原位置范围、未接触目标位置，本例中，是文件离开源文件夹，但未进入目标文件夹

4、操作对象进入目标位置，本例中，是文件进入目标文件夹

5、拖拽结束，更新对象位置或其他属性，本例中，是文件归变为目标文件夹目录下

上面这种拖拽，原位置、目标位置是分开的、是不同的对象；还有一种拖拽，原位置、目标位置本质上是同一对象，见下图：

如滑动滑块时，操作对象是滑块，原位置、目标位置性质是相同的，都是滑轨上的点。

二、常见应用场景

关于拖拽，用户的心智模型其实很清晰，就是把某个对象从原位置拖动到目标位置。由基础的含义引申出来，就产生了许多拓展应用场景：

如调整一组对象中，每个对象的位置，就完成了对该组对象的排序；调整对象边界的位置，其实就是调整对象的大小……

下面将对各个场景，进行举例分析：

1、基础场景——调整位置

拖拽调整位置，在移动端也是最常见的拖拽场景。比如 iOS 的辅助触控和微信、QQ 的悬浮窗，用户都可以拖拽它们来调整它们吸附在屏幕边缘的具体位置：

有所不同的是，设计者会根据具体的产品场景、悬浮窗形态等，来决定可以放置悬浮窗的范围。

例如下图中，iOS 的悬浮窗在未启用时，呈现半透明状态，用户进行一定适应后，它对操作、浏览信息的干扰较少，所以对它的位置限制也就较少，可以放置在上下左右任一方位的屏幕边缘。

而下图中微信、QQ 的悬浮窗样式，是不透明的、带有一定内容信息的，对信息浏览有一定的遮挡和干扰，对它位置的限制相对就较多。

2、延伸 1.0——选择内容、排序、调整大小、调整方向

1.0 是对调整位置的基础延伸，拖拽的基本含义不变，还是改变对象的位置，如选择内容范围，其实就是调整选择内容的边界的位置：

再比如排序，是对调整一组对象中某个或某些对象的位置：

调整大小，是调整边界节点的位置：

调整方向，是调整控制点的位置：

3、延伸 2.0——对**进行**操作

说以下场景是延伸 2.0，是因为他们在原来调整位置的语义基础上，增加了功能赋予的含义，把前面说的拖拽移动位置时的「目标位置」定义为执行某功能。举个设计师再熟悉不过的例子：

将某个图层拖拽到删除按钮上，是将「目标位置」定义为删除功能，拖拽的含义是将删除功能赋予该图层，即对该图层进行删除操作。

移动端应用此心智模型的场景也很多，如：

在微信朋友圈删除图片、在小米手机主屏幕上删除 App，都是将可删除对象拖拽到删除按钮上，意为删除/卸载该内容。

在游戏场景中，为了配合复杂的规则逻辑，产生了一系列交互手势，拖拽的应用也被赋予了许多新含义。如在炉石传说移动端：

简单来说，将卡片拖拽到某个对象上，可以用该卡牌对该随从进行攻击，是将「目标位置」定义为执行卡片的攻击。

iPad OS、Smartisan OS 中对多任务操作的支持，也是用拖拽来实现的：

图源自引文5

它根据应用场景，在移动位置的基础语义上增加了复制/附加的语义，即把一段内容由原 App1 拖拽到目标 App2，就将该内容复制/附加到目标 App2 中。

还有一些拓展操作，对目标位置要求不那么精确，只要是脱离了原位置范围即可。如下图：

图源自引文2

QQ 中拖拽消息气泡至一定距离，松手后就可以清除该气泡，（并有烟花消失的动效）；

聊天界面拖拽图片至聊天区域，就可以发送图片：

炉石传说中，玩家将手中的卡片拖拽到战场区域，表示将随从牌置入战场：

在 AR 应用中，从模型库中拖拽模型到平面上，就意味着放置模型：

图源自引文4

以上都是将原位置范围以外的区域作为目标位置，并将「对象进入目标位置」定义为某种操作。

三、设计关键点

1、用视觉符号明确地告诉用户：可以拖拽「我」呀

支持拖拽交互的界面中，可以适当增加「抓柄」、「拖放」相关语义的图标，如下图：

图源自引文1

目前有这几种常见的图标，但市面上的 App 并没有十分统一的图标样式，设计师可根据语义理解来绘制，并且避免与自家 App 中的其他图标过于接近（如上图中第三个图标与汉堡导航的图标就有些接近）。

如果拖拽操作有明确的方向要求，也可以利用图标体现出来。

2、拖拽中，被拖拽对象有明确的状态变化——你拽的是「我」呀

一旦用户抓取了要拖放的对象，就需要明确地反馈给用户——你拖拽的是「我」，我正在跟随着你的手指移动。这需要让拖拽中的对象与其他对象看起来有明显差异，可以用改变以下属性来做到：

① 让它在视觉上处于其他对象的上层，如加大投影

② 改变背景或描边颜色

③ 改变大小

④ 改变透明度

⑤ 使其倾斜或偏移

如 Trello 中，通过让卡片倾斜、加大它的投影，来体现拖拽中的状态：

小米中拖拽某 App 时，icon 会变大：

3、拖拽中，相关对象要有对应反馈——可以把「我」拖拽到这儿

用户拖拽对象移到目标位置的过程中，可能与不同的目标位置产生碰撞，这过程中，要预示用户这个对象可以落在这儿。除了上述的5点表现方式，还可以用下面的方式表现：

① 闪烁

② 出现参考线、震动提示

③ 改变原本顺序，出现「鬼影」——展示将对象释放在此的预期效果，使用半透明或占位色块的形式

如 Instagram 故事中添加标签时：

图源自引文1

拖动标签对齐、删除时会有一定的震动反馈，表示贴纸拖拽中的状态。

在视频 App 中：

可以对应展示用户拖拽到的时间点、关键帧的画面预览，让用户决定是否要拖拽到此位置。

4、注意胖手指问题

在移动端进行精细操作时，胖手指问题无论如何都是无法回避的。在进行拖拽交互的设计时，要注意：

① 保证对象中可拖拽的热区尽量大

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

QQ 拖拽语音进度条就是一个很好的例子。QQ 中的语音消息条高度很窄、短语音的消息条宽度也很窄，如果只允许在气泡范围内拖拽，用户拖拽的时候手极有可能遮挡住消息条，根本看不到拖拽到什么位置，要小心翼翼地试探着操作。

图源自引文3

为此，设计师将拖拽的热区扩大，由气泡本身扩大到边缘区域。如下图所示：

图源自引文3

另外，在最初的气泡长度规则下，时长较短的语音气泡宽度很窄，十分不易于拖拽，而数据上又显示 10s 以下的短语音占比非常高。对此，设计者改变了气泡宽度原有的线性变换规律，让短语音气泡的宽度适当变宽，以方便拖拽操作。

图源自引文3

• 如果不好做大，那至少让它看起来大！

例如，安卓版微信中，用户选择文字时，会增加放大镜效果，让用户可以更清楚地看到拖拽选择的内容。

② 拖拽的过程中，尽量让手指不会遮挡到用户寻找目标区域的视线

这点可以结合①来看，把整体的操作热区做大，或者让用户可以放大查看，又或者像前面举例的视频 App 中，将目标区域从原来的位置迁移到用户的视野中、脱离可能遮挡的位置，都是不错的方式。

③ 保证手指可以将对象精确地拖拽到目标区域

当目标区域较小时，可以适当放大区域，增加磁性，当对象靠近目标区域时就将其吸附进去。或者像视频 App 中，设置关键帧作为锚点，让用户对目标位置有更明确的感知，从而便于操作。

④ 减少一切可能对拖拽操作产生干扰的因素

图源自引文3

还是 QQ 中，一旦触发拖拽，聊天页面内的其他操作都会被屏蔽，从而减少操作「噪音」，让用户可以在全屏范围内自由拖拽，同时也便于看清拖拽的位置。

美图秀秀中拖拽调整贴纸时，也有类似的设计：拖拽贴纸中，即便手指超出了图片范围，也是在拖拽调整贴纸大小，不会触发其他操作。

5、让拖拽过程更有趣

这点就考量设计师们的脑洞与小细节了，像 bilibili 中，向不同方向滑动进度时，小电视上眼睛看向的方向是不同的，灵动而有趣：

图源自引文2

6、不是所有拖拽操作都适合应用在移动端的

说了这么多拖拽的设计思路，最后要提醒一点，以为在 PC 端广泛应用的拖拽操作，并不一定都适合应用在移动端，比如在 Gmai 中移动邮件：

图源自引文1

PC 端支持拖拽移动邮件，而移动端是通过菜单来交互。

也就是说，交互方式的选择不是一招鲜吃遍天的，是要设计师根据平台特性、应用场景、用户习惯等等，寻找操作效率高、体验佳的方式。

划重点

本文对移动端的拖拽操作进行了拆解：

操作状态有选中、拖拽中（未离开原位置、刚离开原位置、接触目标位置）、拖拽完成5种；

常见应用场景：从基础的调整位置，到基于位置调整语义的选择内容、排序、调整大小、调整方向，到拓展语义后的对**进行**操作；

设计时应注意利用视觉符号告知用户可拖拽、拖拽中被拖拽对象状态明确变化、拖拽中相关对象要有对应反馈、用扩大热区和剥离目标位置等方式规避胖手指问题、注意拖拽操作的效率与适应性等问题。

参考引文

Drag–and–Drop: How to Design for Ease of Use  http://dwz.date/aEBu

《“小元素”有大用处！》 http://dwz.date/aRr6

《点滴匠心，声入人心》 http://dwz.date/aEBy

《放置类AR体验框架和设计建议 (上篇)》 http://dwz.date/aEB3

Human Interface Guidelines, Drag and Drop http://dwz.date/aRqE

Drag and Drop for Design Systems http://dwz.date/aRrG

Building a Responsive Drag and Drop UI http://8rr.co/3D95

《可视化拖拽交互详解》 http://8rr.co/3DAg

Powered by Froala Editor