拖放：拖动的拖，放置的放

2018-02-22 本文已影响0人 IxDKN

序

不管在现实生活还是数字产品中，拖放这个行为是很常见的，由拖动(Drag)和放置(Drop)两个动作组成。

前言

因为拖放这个行为很自然，所以会让我们觉得这个行为很简单，过程上可以理解为：

- 从一个地方

- 抓住(选中)一个模块(元素)

- 拖动

- 松开放置在另一个地方

各个拖放的过程包含着很多细节和状态值得探索和讨论。

常见的四种拖放场景

IxDKN

- 模块拖放

这个拖放场景最为常见，允许用户根据自己的意愿去重新排列页面上的模块。

IxDKN

- 列表拖放

列表拖放的场景和模块拖放很相似，但只能在同一个维度的列表内进行排序。

Medium

- 对象拖放

对象拖放会使用在修改对象间的从属关系上，例如咱们熟悉的Gmail把邮件拖入父级文件夹等。

Dribbble

- 操作拖放

这个场景也是极为常见的，通过移动位置去放置一个元素或一组元素，例如一些把多个文件拖入废纸篓执行删除、在上传图片的Web把图片拖入网页等。

占位符

在抓住一个模块拖动时，需要让用户了解拖动松开后模块会发生什么，就会有「提示」和「插入」这两种协助拖动的方法，但也可以没有。

IxDKN

我更愿意称呼这个为暗提示，暗提示可以是虚线框等。他可以在元素放置前给到的用户目标位置可以放置的预期。

但有一点需要注意：拖放时根据什方法来确定用户想要把模块放在那里？

此时就会有一个基于边界放置的方法解决：因为多数虚线框提示的长宽都会按照拖动模块的长宽来勾勒，所以就可以根据拖动模块和被遮盖模块的边界来确定。

插入条

IxDKN

比起虚线框，插入条可以尽可能的保持页面稳定也可以让用户看清放置后的结果。在拖动到两个模块之间时，只会出现一根插入条来指引用户去放置。

尝试多种边界阈值协助拖放

IxDKN

如上图案例中，当「模块二」重叠至「模块一」的上边缘(红色区域)时，「模块一」下落至「模块二」的位置完成拖放。

IxDKN

如上图案例中，当「模块二」的上边缘超过「模块一」的中心点(绿色区域)时，「模块一」下落至「模块二」的位置完成拖放。

显而易见，第二个案例是省力的。但在不同的拖放场景中，测试多种边界的阈值去协助拖动，目的是为了减少鼠标(或手指)的拖动距离，降低费力度从而便于用户去使用拖放功能。

如何知道这个元素可以拖放？

参考示例截取简书App

在移动端常见的做法，例如上图：会在支持拖放的元素后加入一个icon去示意此元素可以拖动。

参考示例截取微信App

还会有当拖放不是主要任务时，上图的顶部导航栏右侧有一个触发开启拖放的文字按钮，点击后执行拖放。

Medium

在Web端的常见的做法和移动端在展现层会比较相似，有一个icon示意此模块可以拖动。在鼠标悬停时可以加入悬停事件，光标变成手型(Grab)或者十字箭头(move)去暗示元素可以拖动。使用手型(Grab)且在抓住拖动元素时也会有抓住手型(Grabbing)的状态。在不能拖动到某个位置时，需要有反馈告知不可移动的状态(Unavailable)。

建立一个检查表

IxDKN

如上图，如果在设计拖放状态复杂时，可以在设计拖放功能时建立一个表。把拖放事件(最上面一行)逐条分拆去对应影响拖放元素(左侧第一列)，这样做就可以确保不遗漏任何情况，也就可以一目了然的设计拖放的各个状态，高效的传达设计意图给到下游的技术同学进行开发测试。

拖动状态做出区分

IxDKN

占位符通过虚线框来指引用户放置拖动元素，还能从被拖动元素的视觉上做出区分，通常会在被拖动元素加上透明度，也有相反在未拖动元素上加上透明度。还有另一个状态是被拖动时在元素的原始位置做出区分，这些做法都是为了可以更直接的表明该模块尚未定位，正处于拖放中的过渡状态，也能起到清晰预览的区分效果。

自然过渡效果

Dribbble

在拖放后加入过渡效果展示出变化过程，就能让用户明白拖动的元素放置在哪里。

最后

一个优秀的拖放设计会有很多的做法，比如可以在被元素拖动时加入阴影或者颜色，拖动的热区也需要足够大才能方便拖动、Web端中可以在拖动元素中加入title="拖动"去提示拖动状态等。所以说研究拖放这个行为中的很多细节是很有意思的，当我们有看到其他优秀的拖放功能时可以用上面方法建立一检查表去分拆拖放事件和拖放元素，就可以得知其中的奥义。

年也过完了，是该卷起袖子继续了，加油~