如何设计「拖放」功能

作者:Grace Noh,译者:Hindy

原文地址:uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d

译文地址:uicircle.club/a/121

转载无限欢迎,但请注明「作者」和「出处」。感谢您对作者版权的尊重。


你很可能在日常中经常使用界面中的拖放功能:将 Gmail 邮件放入文件夹,移动 Trello 任务卡,或重新拖放 Chrome 中打开的页面。这些交互其实比你想象的复杂得多,这是我在设计 VMware 拖放控件时学到的。

1.gif

将 Gmail 邮件放入文件夹

2.gif

移动 Trello 任务卡

3.gif

重新拖放 Chrome 中打开的页面

拖放交互往往被忽视。有时他们发生得如此自然,以至于你几乎没有意识到。但是,如果仔细观察并比较这三个示例,每个示例对用「拖放」的设计规范都是不同的。

4.jpg

这些界面具有不同的规范,没有什么问题。出于不同原因,每个界面可能都选择了不同的模式。 例如,Trello 选择在被拖动时倾斜卡片,因为这种行为符合他们友好的设计语言。

但问题出在哪里,在通用界面内没有用于拖放的清晰 UX 标准。 在某个界面的某个部分中拖动某些内容时,你遇到情况在另一个界面中可能是完全不同的。

为了说明这一点,我们来看看 Salesforce 的拖放控件库。它展示了五种拖放模式,每种模式都与另一种模式截然不同。

5.jpg

关于可访问性有许多要点(请查阅这篇有关它的有趣文章)。但不幸的是,这五种模式的设计一致性很差。 五个模式中的每一个都使用不同的光标,并且有三个不同的图标用作拖动手柄:

6.jpg

三点图形是否表示可拖动?或者它是一个图标按钮?五个光标中的哪一个是暗示我可以拖动东西?想象一下将所有五种模式应用于一个界面的困惑!

在设计系统中,组件应该看起来和感觉起来像一个凝聚的实体。同样,拖放式交互应该在界面中的各个组件之间保持一致。

设计系统不仅要在 UI 组件之间创建一致性,还应该提供一致的体验。


案例分析

这是一个关于我为 Clarity 的 VMware 设计系统设计拖放组件的 UX 案例研究。Clarity 是开源的,所以我们的用户不仅仅是 VMware 的员工,还有那些想要利用我们基于 Angular 的设计库的人。

我们的用户能够对我们的一些 UI 组件进行拖放:树视图,数据表和卡片。我的任务是在涉及拖放的所有下列用例中统一用户体验:

用户案例

  • 重新拖放树视图节点

  • 重新排列数据网格中的列

  • 重新排列数据网格中的行

  • 在树形视图和数据网格之间拖放

  • 重新整理和合并卡片

对于像 VMware 这样数据量大的企业用户界面来说,拖放对于使用户能够组织复杂的大量数据至关重要。


创建一个可供选择的库

我开始为拖放建立一个简单而有效的设计规范库,并将拖放的各个实例绑定在一起。 那样的话,这些可用性仍然可以应用到新出现的用例上。

如果您在设计系统团队工作,这可能会帮助您开始考虑如何解决您自己设计系统的拖放模式问题。


1.颜色

使用在您的设计系统中不经常使用的独特颜色来表示拖放式交互。避免已经在界面中有意义的颜色(例如:红色用于破坏性操作)。

7.gif

重新拖放卡片

我们选择了紫色来代表拖放。紫色不是在 Clarity 中使用的主要颜色,所以每当用户遇到紫色,他们可以认为是某种拖放。我们故意避免使用蓝色(这是拖放的常用颜色),因为在 Clarity 中,它用于按钮和其他可点击的元素。


2.建立样式

为被拖动元素的不同状态建立样式。指定一个元素在被拖动之后是什么样的视觉效果等。

在 Clarity 中,当一个元素被拖拽时,它将具有以下样式:

8.png

重新拖放树视图节点

添加一个细微的阴影给人的印象是元素是从页面中拾取起来的。

我们添加的另一个状态是被拖动时元素的原始位置,称为前一状态。

9.png

嵌套树视图节点

这对于用户来说是一个小提示。

但请注意,此状态不适用于自然地移动拖放,即拖动时就被移动走的情况。


3.系统光标

使用系统光标来暗示元素可拖动的。这个似乎很小,但会显着提高可拖动元素的可发现性。

10.jpg

对于 Mac,我们使用抓取(打开米老鼠手)和抓取中(握紧米老鼠手)光标。当元素可拖动时,抓取光标出现在悬停状态。一旦被拖动,光标将变成抓取光标。对于不能放置元素的区域,我们使用不可用的光标。

对于 Windows,我们使用移动光标(十字箭头)。 当一个元素被拖动时,光标将保持为移动光标。 同样,对于元素不能被删除的区域,我们使用不可用的光标。


4.释放目标

为释放目标设计模式,这是可拖放元素的有效区域。像上面的状态样式一样,明确地表示出释放目标所具有的样式。

由于重新排序是一个关键的拖放交互,所以我们指定了一个位置释放目标,它表示一个元素将被放置的位置。

11.jpg

重新排列数据表格

我们在位置目标的左端添加了一个圆圈,以便更多地区分放置目标与正常的直线或边界。 这是一个重要的附加功能,尤其对于那些不注意颜色变化的色盲用户。


个案的可供性

一个取决于具体情况的是何时呈现拖动手柄。拖动手柄是暗示元素可拖动的小图标。Gmail 为其设计了一个 12 点的图标,而我们为拖动手柄选择了一个 6 点图标:

12.jpg

拖动手柄的存在在很大程度上取决于内容。对于通常不涉及拖放的组件,拖动手柄可帮助用户发现拖放操作。但是在拖放总是预期行为的情况下,这是没有必要的。

例如,我们没有在树视图中显示手柄,因为它通常都预示了能够移动节点。我们也没有为卡片提供手柄,因为不是所有卡片都是可拖动的。

有很多不同的图标用来表示拖动手柄,但只选择一个,并坚持下去。


总结

这些标准将有助于为在一个界面中连接拖放实例建立一个基本的基础,但是还有许多其他的方法来标准化拖放组件。

设置任何类型的 UX 标准都将有助于拖放成为习惯的交互,而不是像一个混乱的体验。看看我设计的拖放组件是如何组合在一起的:Invision

Clarity 团队正在开始为这些拖放模式进行开发,你也可以在 Github 跟踪我们的开发进度。


参考阅读


更多文章,欢迎访问 uicircle.club

微信公众号:uicircl

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与各种线下设计、聚会活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们