拖拽功能 如何感知拖拽结束后位置的信息_拖放功能设计小结

现实生活中把物体A放入物体B通常可以分成三个主要步骤：1、将物体A打开，2、把B放进去，3、将A封装好；这是我们日常再熟悉不过的行为。在虚拟世界中同样存在着类似的行为，如系统桌面管理，PS，AE等操作复杂功能强大的软件，Web端产品的拖放（drag and drop）交互过程。由于近期项目中涉及到拖放功能的设计，将工作中的思考总结一波，便于日后回顾。

一、实例分析

以桌面文件管理的拖放为例分析可知拖放过程用户的实际操作为三个阶段：

1. 按下鼠标，拖动邀请：用户将鼠标移动到被拖动要素时，告知用户这里可以操作；
2. 拖动鼠标，拖动；当被拖动要素中心点进入目标区域，告知可以实现的功能（移动）；
3. 释放鼠标，放置；当释放鼠标，被拖动要素直接进入目标区域，如果被移动的要素较大，系统会弹出进度条，显示需要移动的时间。

转自拖放三部曲——从“把大象放进冰箱”说起

可见，拖放操作最重要的是过程直观，让用户感知到这个内容是可拖拽的，这个目标区域是有效的可以置入内容的。针对前者（让用户感知内容可拖拽），对于拖放是预期行为的内容（eg.文件夹的拖放，图层的拖放，分割线的拖放等）可以通过鼠标光标和被拖动模块视觉样式上的变化来传递信息。

常见拖放图标

对于通常不涉及拖放的组件，可将信息提前传递，在可拖放元素中添加拖动手柄图标；它可以帮助用户发现拖动操作。例如网易邮箱的邮件在鼠标悬停时会在左侧展示出拖动手柄。

网易邮箱

针对后者（让用户感知区域可置入），可使用视觉提示来识别潜在的目标位置，并预览置入内容的效果。高亮显示、插入点指示器和动画都是识别目标位置的好方法。当内容被拖动到视图上时，视图可以巧妙地闪烁并改变颜色，或者段落可以分开来为拖动的图像腾出空间。

XD在移动图层时通过插入点指示器定位

---

二、注意事项：

开始设计前请思考，是否除了拖拽之外还有其他实现目的的交互方式，若确定采用拖拽，可以从以下角度考虑。

1. 拖拽前：确定拖放内容后产生的结果是移动还是复制，一般来说，当源容器和目标容器相同时，拖拽代表着移动；当源容器和目标容器不同，且被拖拽物从源容器中消失，只存在于目标容器时，拖拽则代表复制。通常在列表之间拖拽只是移动，而不是复制，因为这是人们所期望的。
2. 拖拽过程中：当屏幕上有多个可能的目的地时，一次标识一个。如果源容器和目标容器相同，则不需要突出显示，除非将内容完全拖出源容器，然后重新输入。确保内容拖入之后或不再位于目标上方时，删除高亮显示。存在一种情况，目标区域的内容很多，原有内容就已经超出目标区域的可视范围（即目标区域内存在滚动），此时拖拽过程中需要在适当的时候自动滚动目标位置的内容。当内容被拖出目标边界时，你的应用可能需要确定是滚动目标的内容，还是允许用户继续拖到一个完全不同的目标位置。如果你的应用允许用户继续拖动，请考虑定义一个区域，当拖动的项目位于其上方时，该区域将自动滚动。例如，当内容被拖到正文区域的顶部或底部时，邮件中的长草稿消息会自动滚动。此外，有效目标容器与非有效容器之间要有明确的区分，告知用户可以在哪里释放。
3. 拖拽结束：释放被拖拽物，结束拖拽行为后不论结果成功与否，应将焦点定位在被移动物体之上，这样可以快速判断最终的结果。

---

三、现阶段遇到的拖放场景

1. 线的拖放（边界）：主要目的往往是为了实现特定区域面积的自定义改变，如画图软件中画板边界拖拽而实现的画板的放大缩小。操作对象通常是某区域的边界线。
2. 固定面积区域的拖拽：主要目的是对内容进行自定义排序，操作对象本身是一个占有一定面积的区域（可视为卡片）。简单一点的是无层级区分的卡片拖拽，复杂一些的是包含树形结构的卡片拖拽。通常被拖动模块显示的预览是半透明状态，此外观提供一种情景：正在进行拖动，并方便用户查看拖动内容下的目标位置。

卡片拖拽

参考内容：

• Tencent CDC（拖放三部曲--从“把大象放进冰箱”说起 - 腾讯CDC）
• 【iOS12人机交互指南】3.6-拖拽