数据表单中的交互设计有哪些方式？我总结了8个常见知识点！

编者按：处理复杂的表单恐怕是 UI 设计师、尤其是 B 端设计师的必修课。来自 Saadia Minhas 的这篇文章深入探索了表单交互当中，单行和多行操作中，交互控件的布局设计的常规思路和注意事项，尤其是不同解决方案的使用情况、适用场合，可以说是非常完善且精彩的一篇交互设计指引。

更多表单干货：

以下是正文：

在应用程序中使用数据表单时，有很多需要注意的技巧，设计的时候必须为用户提供清晰有效的数据操作和交互。

用户可以在数据表中执行两种类型的操作：编辑单行或一次性将更改应用于多行。设计不佳的操作布局可能会导致操作混乱、浪费用户的时间，甚至导致意外删除数据等严重错误。

所以在今天的这篇文章中，我们将梳理总结设计数据表交互操作的最佳实践。

• 行级操作：应用于单独的行。
• 批量操作：应用于多个选定的行。

我们将讨论现实世界的例子和设计最佳实践，以帮助你做出明智的 UX 决策。

行级操作（应用于单行）

当用户需要对表中的单个项目执行操作时，可以使用这些操作。例如，编辑记录、删除条目或查看特定项目的详细信息屏幕。这里的关键挑战是如何在不使表格混乱的情况下展示最重要的操作。

以下是在数据表中提供行级操作的几种方法。

1. 位于行右侧的操作图标

一种常见且用户友好的模式，是在每行的最右侧放置最多三个操作图标（例如编辑、删除或查看）。这种布局不仅方便用户查找操作，还能在视觉上将其与主要内容区分开来。

使用带有工具提示的、意义明确的图标非常重要，这样用户才能轻松识别操作。

例子：

在TikTok中，每行以编辑、查看分析、查看评论和更多自定义操作的图标结尾。

TikTok 在每行的右侧提供了行级操作。

一种更巧妙的交互方式是，仅当用户将鼠标悬停在行上时才显示操作图标。这样既能提升 UI 的简洁性，又不会牺牲太多功能。它避免了用户被过多的选项淹没，并使 UI 在用户进行交互之前始终专注于数据。然而，需要注意的是，务必要让用户在鼠标悬停在行上时，能够清楚地看到可用的操作。

例子：

在Gmail中，当你将鼠标悬停在电子邮件行上时，会显示「存档」、「删除」、「标记为已读」和「暂停」图标。这有助于简化收件箱视图，同时支持快速交互。

当用户将鼠标悬停在电子邮件上时，Gmail 会在右侧显示行级操作。

2. 位于行左侧的第一列操作图标

当所需操作与标识符紧密相关时，将图标直接放置在主要单元格内容（例如任务标题或 ID）旁边效果很好（最常见的就是选中控件）。这种方法提供了即时的上下文控制。对于需要操作靠近行首的工作流来说，这种方法效果更佳。

例子：

• 在Airtable中，操作项「打开/选中」显示在任务名称附近，帮助用户快速采取行动，而无需扫描到最右侧。
• 当用户将鼠标悬停在该行上时，ClickUp 会在第一列中贴条目名称显示常见的行级操作。
• YouTube 的行级操作显示在用户悬停的行的第一列中。

Airtable 提供了悬停在某一行时在第一列执行的操作。

当用户将鼠标悬停在该行上时，ClickUp 会在第一列显示行级操作。

将鼠标悬停在该行上时，YouTube 的行级操作会显示在第一列中。

3. 顶部工具栏中的操作（选择一行后）

另一种简洁的方法是，仅当用户选择一行时才显示特定行的操作。工具栏通常显示在表格顶部。此方法可以让表格在默认视图中，保持足够的简洁。

例子：

Gmail使用了这种技术，选择一行会在表格视图顶部显示相关操作。

4. 承载更多操作的下拉菜单

如果操作超过三个，请将它们放在「更多」 下拉菜单中，以免造成混乱。这样既能保持 UI 整洁，又能提供灵活性。

例子：

• ClickUp 使用水平省略号 (...) 图标来显示其他操作，例如 添加到我的、重命名、转换为等操作。
• Google Drive使用垂直省略号 (⋮) 图标打开下拉菜单，其中包含每个文件的下载、重命名、共享等选项。

ClickUp 使用每行的「更多」图标在下拉菜单中提供自定义操作。

Google Drive 在每一行中使用「更多」图标在下拉菜单中提供自定义操作。

批量操作（应用于多个选定行）

批量操作允许用户选择多行并一次性对所有行执行操作，例如删除多个条目或应用标签。这些操作应仅在选中行时显示，并且应精心设计，以避免混淆或意外点击。

以下是在数据表中提供批量操作的几种常见方法。

1. 带下拉菜单的操作按钮

一种有效的方法是在选择多行时显示上下文操作按钮。点击它会显示一个下拉菜单，其中包含「删除」、「导出」等选项。这样可以很好地缩放较长的操作列表。它遵循了极简主义的设计理念，以保持 UI 简洁。

例子：

在Google 通讯录中，当你选择多个联系人时，顶部工具栏上会显示一个带有「更多操作」图标的菜单。点击此图标会显示一个下拉菜单，其中包含「导出」、「删除」等选项。

当选择多行时，Google 通讯录会显示更多操作图标。

单击更多操作图标将打开一个下拉菜单，其中包含可应用于多个选定行的选项。

2. 顶部工具栏中的操作

当用户选择多行时，表格顶部会显示一个醒目的工具栏。这种方法可以更快地完成常见任务，并减少点击次数。

例子：

• 在Gmail中，选择电子邮件会在顶部显示一个图标栏，其中包含删除、存档、标记为已读等选项。
• 当在表格中选择多个项目时， YouTube Studio会在顶部显示一个带有相关操作的工具栏。

Gmail 在顶部显示一个图标栏，其中包含删除、存档、标记为已读以及针对多个选定行的更多选项。

在 YouTube Studio 中选择多行时，顶部工具栏会显示相关操作。

3. 浮动工具栏中的操作

一种日益流行的用户体验模式是在选中多个项目时，显示一个浮动的上下文工具栏。根据布局，此工具栏通常显示在所选行的正上方或固定在屏幕底部。这种方法在移动或响应式视图中效果良好。此外，它还有助于减少光标在数据和工具栏之间的移动，移动光标可能还会触发其他的行，这样就避免了混乱。

例子：

• 在Jira中，当你选择多个项目时，会出现一个浮动栏，其中包含编辑、复制到剪贴板、删除等批量操作。
• 另一个很好的例子是ClickUp，当选择多行时，视图底部会出现一个浮动工具栏，使操作与上下文相关，且易于访问。

当用户在表中选择多行时，Jira 会在底部显示一个浮动条。

ClickUp在视图底部的浮动工具栏中显示批量操作。

4. 工具栏和下拉菜单的组合

对于复杂的表格，下拉菜单和工具栏的组合可以为用户提供足够的灵活性。你可以将关键操作显示为单独的选项，并将其余操作放在下拉菜单中。这样，你可以优先处理常用操作，并在需要时扩展列表。

例子：

• Gmail就采用了这种模式。当选择多行时，关键操作图标会直接显示，而其他图标则会分组显示在「更多」菜单中。
• Notion采用了同样的方法。当在表格中选择多个项目时，工具栏会显示关键操作和下拉菜单的组合。

为了提供批量操作，Gmail使用工具栏来显示图标和下拉菜单的组合。

当在表中选择多个项目时， Notion会显示关键操作和下拉菜单的组合。

结语

设计表格中的动作模式不仅仅关乎外观；它直接影响可用性、可发现性和交互效率。在设计数据表的操作和交互时，需要考虑以下技巧。

• 优先考虑设计的清晰性：图标应该是可识别的，并带有上下文的工具提示。
• 避免视觉混乱：使用悬停状态或下拉菜单来隐藏不常用的操作。
• 响应要足够迅速：确保布局在较小的屏幕和移动设备上也能良好运行。
• 尊重用户流程：不要强迫用户为了完成常见任务而费尽周折。
• 通过遵循这些模式并根据你的需要进行定制，你可以帮助用户有效地执行所需的操作。