平时工作中经常碰到涉及拖放（拖拽）的设计。但是经常会有如下疑问：

为什么要拖放
什么时候适合用拖放，会不会导致任务过于复杂
拖放前中后的状态如何
拖拽有各种交互样式，我该如何选取

基于这几点日常的困惑，为了方面以后直接使用，我对拖放做了如下总结

一、定义

About Face中的定义“单击某个对象，移动它，意味着即将发生一种变换 ”。

我自己的简单理解是“拿起来拖动并放下，完成一个任务”。

拖放设计通常由：源对象、拖放候选对象、拖动手柄、各种状态的光标组成

二、功能

拖放经常用来完成：移动、排序、调用命令（如上传、删除等）......

1. 移动/排序（直接操作）

该功能主要有两种明显区别的交互形式：补位拖放和非补位拖放

具体优缺点以及使用场景将会在下文“拖放中”模块详细描述

1.1补位拖放

源对象跟着鼠标移动，实时补位空白区域。

1.2非补位拖放

出现源对象的复制项或其他简化的形式，然后用用线条等方式指示候选位置。

2、调用命令（间接操作）

通过拖放来调用命令（可视作为快捷操作）：删除、复制、打开、安装...

调用命令我想到的有两种方式：将对象放在某个特定区域触发；快捷键配合拖放触发

这种交互形式有时会比较隐晦，所以比较适用于用户本就知道该对象能拖放的，进而提供附加功能；也可以给予用户一定的线索去发现与使用；具体操作时，候选区域应该开始就在或者拖放过程中就出现

后文将不在详细展开调用命令这一话题

2.1 删除

如Mac OS中，拖放文件置废纸篓

2.2 复制

同样在Mac OS中，拖动对象时，按住Option键，触发复制功能（出现➕图标）

2.3其他

跟该对象有联系的命令都可以尝试下

三、拖放过程

1.拖动前

1.1 没有拖动手柄提示

空间比较小

已存在不通过拖拽就能完成该任务的功能（如部门人员可以通过编辑更换部门）

比较常见拖拽功能，用户已建立心智模型

不高频使用

1.2 Hover时拖动手柄提示

空间比较小

用户不常见，意识不到能拖动

必须通过手柄才能拖动，点击其他区域是编辑状态

1.3 拖动手柄常显提示

拖拽需求比较强烈

空间较大

该任务比较少见

2.拖放中

这边主要讨论四种常见形式：

源对象拖动、源对象复制项拖动、指示线线条定位、实时补位（见下图示意）

2.1 源对象复置项+指示线定位（A方案）

优点：

界面跳动会减少，视觉负担降低，显的比较简约；

也能解决下面方案B的缺点

缺点：

这种形式相对自动补位理解上稍为复杂及不够直观；

即使复制项降低透明度，仍然可能会遮住导致候选对象看的不是很清楚（sketch拖拽图层有一个解决方案：由于图层名称都是左对齐的，所以可以在最右边拖动时，复置项会自动滑动到右边，从而避免上下拖动时与其他图层名字重叠）

源对象面积较大时，会遮住会整体画面还是显得凌乱

使用场景：

对象较多、适用性较广（一般我做排除法，B方案不适合的，就用A或C方案）

2.2 源对象拖动+自动补位（B方案）

优点：

这种方式理解成本较低，还能实时预览拖拽完成后的布局

缺点：

因为位置动态变化，用户可能会忘记源对象原来所处的位置，且导致对象较多时不能快速找到想要到达的位置；

应用在有层级有分组的设计中，交互方式会变的复杂

适用场景：

对象较少（一般小幅移动，对象多也没关系）、目标较大、没有从属关系、新手/中级用户、较难预料拖动后布局展示的情况（例如mac的应用启动台，但是它还结合了从属关系，用起来就不舒服，尤其是跨行把两个应用打组）

2.3 源对象拖动+指示线定位（C方案）

与方案A差不多，理解上会比A容易理解

2.4 源对象拖动+指示线定位+自动补位（D方案）

与方案B差不多，算是B的进阶版

2.5其他细节补充说明

拖放中，通过阴影、降低透明度、颜色等方式提示已被选中拖放对象。若使用颜色区分，在Drag and Drop for Design Systems这文章中，作者建议 使用设计系统中不经常使用的独特颜色，这样每当用户遇到对应颜色时，他们都可以期待某种拖放体验；

如果是使用复制项拖放，源对象初始位置可以尝试颜色降低。

可以前提高亮候选区域 / 移动到候选区域后才高亮

有些设计，在移动过程中，鼠标会变禁用状态，用来指示这个区域不能放下。然而这种设计会让用户以为自己是不是做错了什么，变得害怕谨慎。（尤其是移动过程中，在候选区域的必经之路上出现了禁用样式，新手用户会以为不能移动，从而导致任务不能完成），所以建议只把可放下的区域做个正向提示即可

还有一种多选拖放的情况，需要将多个目标合并显示

3.放下时

这个可以选择做一个合适的动画效果，会让人更加舒服

可以让放下的对象目标处于选中状态

四、哪里可以用

组合框、树选择控件、表格列与行、富文本编辑器......

五、以Sketch图层管理为例分析

任务：把图层 H1移动至C图层组里面

1.是否需要拖拽手柄

工具栏那边，可以调节图层循序，那么在这里这里大概率也可以

空间较小

一般作图软件图层都可以拖动，用户已经有了认知模型

所以不需要拖动手柄

2.选择拖放中的样式

树形结构，大概率选 A 、C方案，即不自动补位（选中又有插入，外加图层不停跳动，非常混乱）

对象多，若用自动补位，一动全动，无效的动画效果反而干扰影响体验，还是应该聚焦在设计本身

设计时，图层常常需要调整，甚至跨大段拖放。且有些设计师有没有命名的习惯，如果使用自动补位，会找到不到初始位置

最后得出A（源对象复置项+指示线定位）和C（源对象拖动+指示线定位）方案比较适用，两个办案区别不大，保守就选A吧

参考文章

About Face4

https://mp.weixin.qq.com/s/G-jg6yggpCNFD2n54yuX7w

https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d