表格内联编辑的最佳实践

表格在使用结构化方式呈现大量数据的数字产品中起着至关重要的作用。创造无缝的用户体验，尤其是在处理包含复杂数据的表格时，是一项重要的设计挑战。

设计表格需要仔细考虑各种 UI 元素和行为，包括分页、编辑功能、过滤选项、排序机制、列可见性切换和搜索功能。

在本文中，我们将通过确定表格内联编辑表现良好的场景并探索替代方法来探讨表格内联编辑的优点和缺点。

这些见解将帮助您设计更具吸引力的用户交互并增强产品中表格对象的整体可用性。

关键要点

• 使用内联编辑提供一种快速简便的方法来编辑表格中的内容。它最适合有限的数据。
• 如果您希望获得易于理解的信息，又不想在同一视图中混淆编辑，请提供单独的视图（对话框或页面）来编辑表格。
• 为表格编辑提​​供单独的视图（对话框或页面），以防止在编辑重要数据时出现不必要的错误，

表格中的内联编辑

内联编辑是指直接在同一页面上编辑表格数据，而无需导航到单独的视图（如弹出窗口、对话框或页面）。用户可以点击表格单元格或行，修改数据并立即保存。

这是一种快速有效的表格编辑方法。通过减少修改数据所需的点击次数，提高了易用性和用户工作效率。无需打开单独的视图将降低用户丢失上下文的可能性。

剩余的文章包括以下主题。

• 在表格中提供内联编辑的方法
• 内联编辑的优缺点
• 应遵循哪种方法？

在表格中提供内联编辑的方法

有多种方法可以在表格对象中提供内联编辑功能。

1. 编辑单元格

用户可以逐个编辑每个单元格的内容。有两种方法可以切换到编辑模式。

（i）单击单元格将使内容更改为编辑模式，用户可以更新内容。

(ii) 点击单元格上的“编辑”图标将使内容可编辑。用户可以通过键入所需文本来更改内容。此编辑图标可以持续显示，也可以悬停在单元格上显示。

有两种方法可以保存更新的内容。

（i）单击单元格外部将保存修改的内容。

（二）点击明确的“保存”图标将保存修改的内容。点击“取消”按钮可放弃更改。

2. 编辑整行

用户可以对表格行进行内联编辑。在这种情况下，有两种方法可以切换到编辑模式。

（i）单击行上的任意位置将会将所有单元格的内容更改为编辑模式，并且用户可以更新每个单元格中的内容。

(ii) 单击行旁边的“编辑”图标将切换到编辑模式。所有单元格都可编辑。用户可以在每个单元格中键入所需的文本来更改内容。

有两种方法可以保存编辑的内容。

（i）单击行外将关闭编辑模式，并且修改的内容将被保存。

(ii) 点击行旁边的明确“保存”图标/按钮将保存所有单元格的修改内容。点击“取消”按钮可以放弃更改。

3. 编辑多行

用户可以对表中的多个记录进行内联编辑。但是，这只能针对不需要唯一值的列/字段进行。将修改所有选定单元格的内容，并将相同的内容添加到所有选定单元格。

切换到编辑模式：

• 使用复选框选择所需的行/记录。行将被选中。
• 点击编辑按钮。选定的行将转换为可编辑模式。
• 点击一个单元格并更新内容。所选行中同一列/字段的所有单元格的内容都将更新。

要保存所有行的编辑内容：

• 单击“保存”图标/按钮。单击“取消”按钮可以放弃更改。

建议在保存更改之前与用户确认，因为它将丢弃所选行中的原始值。

表格内联编辑的优缺点

下表收集了表格中内联编辑的优缺点。

从上面的讨论中可以清楚地看出，您需要考虑其他选项来为表格提供用户友好的编辑功能。让我们来看看几种替代方法。

替代方法

1. 使用对话框/弹出窗口

要编辑复杂表中的数据，可以选择一行并以编辑模式打开它。此编辑模式将显示在当前视图顶部打开的单独对话框或弹出窗口中。

用户可以执行所需的编辑，然后单击“保存”按钮保存更改。

对话框/弹出窗口关闭，用户返回原始视图。表格开始显示更新后的数据。

2. 使用单独的页面

还有另一种方法可以编辑一行或多行中的大量字段。用户可以选择一行或多行，然后单击“编辑”图标。

所选记录/行的可编辑模式将在新页面上打开。用户可以进行更改并保存。然后用户返回上一个视图。表格中的数据已更新。

3. 使用内联编辑和对话框/页面的组合

您可以将内联编辑与对话框或页面视图相结合。允许对有限数量的字段进行内联编辑，并提供对话框或页面视图来编辑复杂的行/记录和多行/记录。

该表将有一个内联编辑选项和一个顶部的编辑按钮，以便在单独的对话框或页面中打开选定的行或多行。

应遵循哪种方法？

有几个优先事项可帮助您确定您的需求，从而提供合适的解决方案。选择您的优先事项。

• 优先级 1：您更喜欢易于理解的信息，而不希望在同一视图中编辑时造成混乱。
• 优先级 2：您希望在编辑重要数据时避免不必要的错误。
• 优先级 3：您希望快速、轻松地编辑信息。

解决方案取决于您的优先级。

优先级 1 和 2 需要创建单独的视图进行编辑。

• 为了提供无缝体验，让用户使用起来更加方便，请保持应用的 UI（包括带有表格的原始页面和对话框或新页面）相似。这样，用户就不会感觉失去上下文。
• 提供用于编辑复杂数据的对话框或页面有助于确保简单性。用户的任务将被分成多个部分，而不是将所有功能都放在一个地方。这为用户带来了更轻松、更易理解的体验。

优先级 3 需要提供内联编辑支持。

• 为了提供易于编辑的体验，需要仔细定义用户在编辑过程中执行的一系列操作。
• 提供明确的编辑选项以启用编辑模式。用户可以编辑数据并明确单击保存选项以保存更改。
• 如果出现错误，则会显示一条清晰的消息，解释错误以及解决错误的方法。

翻译：云瑞设计

原文：uxplanet