Title
如何设计 「可拖曳元件」（Drag and Drop）？

发布时间：2021-04-24 20:00    作者：大兴星明度假村    点击量：

介面上，你应该常使用到 可拖曳元件 (drag and drop)，例如拖拉 Gmail 的信件到资料夹中、移动 Trello 的卡片或是把 Chrome 浏览器上的分页重新排列等。虽然操作很简单，但这些互动的设计复杂度超过你的想像。本文就来分享在 VMware 中设计「可拖曳的元件」的经验。

拖移信件进入资料夹

移动Trello 的卡片

重新排列Chrome 上的分页tab

可拖曳元件的互动细节往往会被使用者忽视，有时自然到你根本没意识到。但如果你仔细观察比较下述北京拓展基地三个例子，它们皆有非常不同的 UX 标准。

这些元件有不同的操作定义，但这没有对错，因为每个产品都可能因为某些原因而选择不同的模式。例如，Trello 在拖拉卡片时，卡片会呈现倾斜状，可能是因为符合他们表示对使用者友善的设计语言。

不过最大的问题在于是否套用一致及清晰的 UX 设计标准，否则你有可能北京员工军训在不同页面使用可拖曳元件的体验都不一样。例如 Salesforce 所设计的可拖曳元件库，里头有五种模式，每种操作方式差异都相当大。

Salesforce 的拖拉元件

虽然都可以运作，但不幸的，在这五种操作模式中存在着不一致，利如使用不同的游标样式，及三种不同的拖曳处样式（drag and drop handle ），如下：

猜猜看，那个是可拖曳时的游标状态？答案：全部都是

三条线的 icon 能代表可拖曳？或是三个点的才能？究竟那五种哪个才能代表可拖拉呢？想像一下，如果介面上出现五种表示方式，使用者会有多困惑！在设计系统中，元件彼此间应该看起来或感觉上是一体的，而元件间可拖曳的互动方式也应具一致性。

Design systems 不仅仅要让UI 元件一致性，最重要的是提供一致的体验

可拖曳元件的案例

以下是我在研究与设计Clarity（VMware 的设计系统）中「可拖曳元件」的案例，Clarity 是一个开放源，所以不只是内部员工可使用，外部想利用的人也能使用。

我们的使用者需要透过拖曳来操作一些元件，如树状视图（tree view）、资料表格及卡片​​，而我的任务即是统一使用者在操作这类功能时的体验。

重新排列与叠组树状结点重新排列表格的资料栏（columns）重新排列表格的资料列（rows）在树状结构与表格之间拖曳重新排列与合并卡片对于如VMware 有着大量数据（data heavy）的企业， 拖曳能让我们的用户组织复杂且大量数据的关键功能。

创造一个可被理解使用的元件库

首先，我建了一个简单且小型的元件库，让拖曳功能可有效的被理解感知如何使用，并能应用于不同的专案中。如果你正打造设计系统，以下也许可以帮助你开始思考如何传达可拖曳元件的模式。