Drag–and–drop has been around since the dawn of GUIs and is familiar to most users. It is a type of直接操纵,对分组,重新排序,移动或调整对象的调整,特别有用。它的工作方式如下:

  1. 与所有直接操纵相互作用一样,感兴趣的项目需要可见的在屏幕上 - 例如,图标,缩略图或显式接口元素,如表或电子表格中的列分切器。(原则上,我们可以拖动不可见的对象,但可用性肯定会受到影响。)
  2. 启动互动,用户acquire一个对象 - 使用鼠标或触摸手势(例如鼠标点击或分别,长按)。其他选择技术是可能的,但不如例如,语音(“选择红色汽车”)或“抓取”一个物体VR.或AR环境。
  3. 在保持对象时(例如,通过鼠标按钮上的连续压力),然后用户移动指向设备(鼠标,手指等)到一些所需的目标。这是操作的“拖动”部分。
  4. 最后,用户取消选择对象 - 例如,通过放置鼠标按钮。这是“掉落”步骤。

所有这些步骤的结果可能简单地是对象已被重新定位。例如,向右移动列分隔使得表列更广泛。或者,在绘图程序中移动圆圈改变正在绘制的图片的外观。但是运动也可能触发完整命令。经典示例正在将文件图标拖到垃圾图标中并将其丢弃,导致要删除的相应文件。对于许多操作,拖放使操作可见,即时可以提高可用性。

拖放拖放的缺点是它可能是效率低下,不精确,甚至身体挑战,特别是在长距离之上:如果他们耗尽房间,用户可能需要重新定位他们的鼠标或调整手指在触摸屏上调整手指。因此,它经常会导致错误- 用户将一个项目放在错误的位置,并且必须重新开始。

因为它本质上是一个棘手的物理互动,所以了解你的用户它将实施的行动的心理模型确保他们期望使用它。在可用性测试期间,如果用户尝试拖放对象(但是没有直接向他们询问它)。

在许多情况下,可以通过伴随更精确的相互作用来解决拖放拖拉的缺陷;例如,在Photoshop中拖动形状可以将其达到一般所需区域,然后箭头键可用于精确定位。在某些情况下,替代相互作用可以完全取代拖拉;例如,在移动设备上,使用菜单将文件移动到不同的文件夹可能不会比拖放更低易于出错。

适当时,拖放拖放得到很好地理解,并通过用户快速采用。拖放用于拖放的所有交互可以分为两种主要类型:调整大小对象和移动对象。这两个能力需要不同微互动设计成功直观,响应界面。

清除拖放的意小器和反馈

创造一个明显的signifierfor drag–and–drop is challenging. While a button can have a subtle drop shadow to indicate that it is raised and可点击,拖放杆触点必须发出两个函数 - (1)该项目是“Grabbable”和(2)拖动它的某个地方将完成(移动或调整大小)。

Grabbity有两种类型的视觉指示灯:抓取处理图标和光标变化。

抓住柄图标

抓取句柄图标传达该拖放可用,并提供一个安全的目标,以便在不激活其他附近控件的情况下单击并拖动。(在某些应用程序中,用户无需在Grab句柄图标上完全单击,但其目的保持不变。)

不幸的是,用于此目的的图标are not nearly as universal as designers may think他们往往是一个糟糕的视觉比喻。使用中有几个常见的拖拉和丢弃图标,缺乏普遍的约定降低了它们的功效和识别性。

三种不同的抓住手柄图标,其中两个强烈类似的标准图标
常用拖放句柄图标的选择意味着可以抓住并移动对象。缺乏一致性使用户难以识别这些图标的含义。左侧和右侧的图标都与用于其他功能的熟悉的图标类似:kebab菜单(或动作溢出)和汉堡菜单。

用于信号移动的一些句柄图标也令人困惑,因为它们类似于常规用于其他功能的熟悉图标,例如a汉堡图标or the kebab icon.

其中一些图标还尝试指示运动方向:在一个维度(例如,重新排序列表)或两个维度(例如,在屏幕上移动窗口),但它们缺乏外部一致性未能清楚地传达目的。

For resizing, such as expanding column headers in a桌子或者在画布上更改对象的大小,抓取句柄图标通常非常微妙:列之间的单个垂直线,例如右下角的一对对角线。

窗口拐角处的两个对角线表示它可以调整大小
A pair of diagonal lines in the bottom right corner of an object like a window can signify that the object is resizable.

光标变化

在鼠标驱动的接口中,光标更改也可用于发出拖放可用的信号:当用户在可以拖放的对象时筛选,光标更改形状以指示点击它将启动抓住。

如果您决定更改游标图标,请避免创建新的自定义图标。使用平台的标准光标移动或调整大小。在MAC上,标准箭头光标将改变为开放式白盖的“米老鼠”手;此图标将进一步改变,看起来像抓住物体时的闭合手柄。Windows使用用于拖放的白色横杆图标(通常用于应用程序或网站内的对象,而不是Windows)。对于网站,CSS具有各种使用本机平台图标的类。

Mac's grab cursors and Windows' grab cursors
lef:Mac的icke鼠标光标出现在悬停时,表示可用拖放可用。中心:在单击和保持时,MAC的拖放光标更改为封闭的手套,以指示该项目被抓住。右:Windows'拖放光标出现在悬停时,但不会改变以指示该项目已被抓住;相反,它保持为整个交互的横杆。请注意,在MAC或Windows上移动Windows时,不会发生这些光标更改;它们仅适用于应用程序或网站内的对象。

当抓取后方调整大小时,可以使用略微不同的横杆光标图标。图标显示沿一个轴的箭头。指向角落内窗口的对角线图标表示可以沿两个维度(宽度和高度)沿两个维度调整大小。

为桌子列和窗口右下角调整光标大小
lef:在鼠标悬停在表的列头分隔器上时,光标将更改为一维横杆,以指示它可以水平调整大小。右:当悬停在窗口的底部边缘上时,光标变为对角线箭头,指示窗口可以调整为两个维度。

反馈对象已被抓住

一旦用户“抓取”将被拖放的对象拖放,需要两种类型的反馈:(1)对象“抓住”的反馈,(2)反馈预览用户将发生的内容“掉落“对象。

反馈对象被抓住通常使对象看起来与屏幕上的其他类似对象不同;它可以包括以下内容:

  • 轮廓或对比色
  • A visual presentation that makes it appear “above” other items, such as a drop shadow
  • 视觉偏移物体,例如缩进或钓鱼
  • A small, translucent “ghost” image of the object (for file uploading or moving between folders)

表明it Trello使用多个信号em is currently “grabbed” and is draggable: a slight drop shadow as well as an angle to the object indicate that it is different from the cards around it, and give the impression that it is hovering “above” the other cards and is being dragged over them. Also notable is the use of magnetism on the drop zone — the user did not need to position the item precisely over the intended location. Instead, the system provided a clear signifier (the drop zone expanding in size, changing color, and showing a subtle preview of where the object will snap) that the drop zone was active before the mouse cursor arrived there. Releasing the cursor at that point “snapped” the card to the drop zone. This interaction gives the feeling of magnetic attraction.

拖动文件(例如,将其上传或将其移动到不同的位置)时,光标通常会保持不变,但将显示一个小的半透明的“Ghost”预览图像。此图像传达文件被拖动,并且当Ghost Image足够清晰时,有助于防止用户无意中拖动错误文件的滑动。

特别是当使用拖放来重新排序项目列表时,重要的是显示在用户释放项目之前脱离方式的后台对象。这短动画gives a preview of what will happen when the cursor is released and makes the motion feel natural. Rather than instantly redrawing the other objects in their new place, use a quick animation (roughly10.0 ms)向他们展示向新位置移动,以便为用户提供物理操纵物体的感觉。与其他类型的UX运动一样,使用宽松让运动看起来很自然。

动画预览的最复杂的方面之一是决定何时触发运动:如果对象开始何时开始移动边缘of the grabbed object overlaps it or when the position of the鼠标光标重叠另一个对象?这种互动的最自然版本既不使用 - 相反,它一旦开始重新洗牌动画中央拖动对象与其他对象的边缘重叠。该解决方案防止了“糊状” - 凝聚相互作用(它慢慢迟钝),或者“抽搐” - 凝聚的交互(其中物品开始意外和太快移动)。

用红色虚线的一个盒子的描绘与红色虚线重叠,以指示底部平面的顶部物体的边缘
Triggering items to reshuffle when the边缘拖动对象与底层物体的边缘重叠将使界面感觉“弯曲”并以无法控制的方式响应过度响应。
一个盒子与红色虚线重叠的一个盒子的描绘,以指示鼠标光标破坏底部的平面
Triggering items to reshuffle when the光标的立场满足底层物体的边缘将使界面感到“糊状”并没有反应,特别是如果抓住物体大或被拖动得很大距离。当用户抓住边缘附近的物体时,它可能会更加烦人,然后尝试将其拖动到当前屏幕上的位置,因为用户经常用完静音室。
用红色虚线的一个盒子的描绘与红色虚线重叠,以指示顶部物体的中心破碎底部平面
Triggering items to reshuffle when the中央拖动对象到达底层物体的边缘将使界面感到自然且响应。

磁性和捕捉到位

如上所述Fitts的法律,将光标移动到屏幕上的精确位置是具有挑战性的,这使得拖放拖放固有效率低,以便精确调整。缓解这一挑战的一种方法是通过模拟将物体缺陷到位的磁效果,即使用户尚未完全获取目标。例如,文件上传丢弃区域可以在其边界之外略微处于活动状态,允许用户在他们一直在那里释放鼠标。

一个文件上传丢弃区域,带有红色虚线,指示实际的丢弃区域交互边框的位置,尽管用户是看不见的
The drop zone becomes active before the user has dragged a file all the way within the border of the file uploader. The dotted red line is a visualization of the active drop zone, which extends outside the visible border of the drop area; it is not visible to the user. This solution effectively increases the area of the drop zone, and provides a feeling of magnetic attraction. It also prevents errors and speeds up the drag–and–drop interaction. Also, note the small “ghost” image of the file being dragged, which provides visual feedback for the action (though the icon is too small and indistinct to tellwhich文件正在移动,因此它不是对错误的有效保护)。

要使用磁力,您需要在丢弃区域处于活动状态时清楚地向用户指示,通过显示拖动对象在活动丢弃区域内(特别是如果可损坏的区域在可见边界外部延伸)时,则通过显示视觉指示。用于磁性的几种常见意叶包括丢弃区域周围的虚线边框(尤其是文件上传),当光标附近时,丢弃区域出现在下降区上的突出显示,或者在用户发布之前显示它将捕捉到位置的动画他们的光标。

Chrome允许通过拖放拖放在窗口中“停靠”选项卡。当用户拖动标签栏附近的选项卡时,使用磁力允许用户在到达目的地之前放开标签。

拖放的可访问性

拖放传统上是鼠标或触摸屏唯一的互动,但制作它无障碍对于使用辅助技术的人们都是完全可能的,必要的人。首先,确保您的句柄图标是键盘可访问与之标签钥匙;这使得能够通过空格键“抓取”可拖动物品。其次,确保句柄图标提供消息屏幕阅读器that indicates what actions are available (typically using arrow keys to move or resize the object), whether it is currently “grabbed”, and its current position or size.

Salesforce的可访问拖放模式库
Salesforce的 无障碍pattern library 具有键盘可访问的抓取句柄图标,将其状态和可用操作报告给屏幕阅读器。

Drag–and–Drop on Touchscreens

拖放可能很难在触摸屏上实现,因为它们缺少悬停状态,这些悬停状态通常用于发出拖放的可用性。此外,由于胖子的问题,您需要确保可拖动对象至少有1cm x 1cm.未使用的空间用于拖动,并且手指不会涵盖任何重要反馈(例如突出显示的“抓取”状态)。另一个重要的考虑因素是,您必须通过使用几毫秒的时间延迟来区分水龙头,刷新手势(例如滚动)和有意的“抓取”,并提供对象已被抓取的明确反馈。

提供有关拖放拖放的移动反馈的一种方法是使用触觉;一个微妙的触觉“凸块”可以指示已经抓住了物体,另一个可以指示已经拖动了另一个物体。

向Instagram故事添加贴纸时(例如我的狗,达芙妮),用户可以将贴纸拖放到所需的位置。当敲击和保持时,触觉反馈的微妙凸点表明贴纸是“抓住”并且可以移动。同样,将贴纸悬停在垃圾桶图标上提供另一个快速触觉凸点,表示它可以删除它以删除图标。

由于触摸屏上不可用拖放(例如光标更改)的悬停意义,因此建议仅在以下情况下使用拖放拖放时间:

  1. 你有明确的证据(如研究)可用性测试) 那你的users预计drag–and–drop to be available, and
  2. There is no reasonable alternative with lowerinteraction cost(例如切割粘贴或菜单驱动的交互)。
桌面和移动到Gmail之间的行为差​​异
Gmail on desktop (top) offers drag–and–drop to enable moving an email between folders. However, on mobile (bottom), the drag-and-drop interaction has been removed and instead the functionality is available through a menu. While this solution may take a few additional steps to perform compared to the desktop, the likelihood of error is lower (especially when navigating a hierarchical folder structure with small icons using a finger), so this tradeoff prioritizes overall usability, rather than simply 点击点击

概括

Drag–and–drop is not always the best choice, but when users expect it, the familiarity of the metaphor can make the interaction relatively simple and straightforward. To make drag–and–drop as effective as possible, use appropriate signifiers, such as handle icons and hover-state cursor changes, provide clear feedback throughout the interaction, and ensure that it is accessible.