表格中内联编辑功能要如何设计？6个章节教会你！

编者按：对于B端设计师而言，处理复杂的表单界面设计恐怕是必修课。来自 Saadia Minhas 的这篇文章深入探讨了又一个经典的问题，复杂表单当中的内联表单的设计技巧。文章并不仅仅分析了内联表单中的诸多设计陷阱，优缺点，并且给出了一些问题的常见解决方案，最后还梳理了设计策略上，需要注意的要点。

表格在数字产品中扮演着至关重要的角色，尤其是在需要以结构化方式呈现大量数据时。设计一个无缝的用户体验，尤其是在处理复杂数据的表格时，是一项重要的设计挑战。

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

本文将探讨表格内联编辑的优点和缺点，分析其适用的场景，并探索替代方案。这些见解将帮助你设计更具吸引力的用户交互，并提升表格对象的整体可用性。

关键要点

• 内联编辑提供了一种快速简便的方式来编辑表格内容，尤其适用于数据量有限的情况。
• 如果你希望用户轻松理解信息，同时避免在同一视图中混淆编辑操作，建议提供单独的视图（如对话框或页面）来编辑表格。
• 为表格编辑提供单独的视图（对话框或页面），可以防止在编辑重要数据时出现不必要的错误。

表格内联编辑

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

内联编辑是一种快速且高效的表格编辑方式。通过减少修改数据所需的点击次数，提升了易用性和用户的工作效率。同时，由于无需打开单独的视图，用户不会丢失上下文信息。

表格中的内联编辑

文章接下来主要探讨以下3方面的内容：

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

在表格中实现内联编辑的方法

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

1. 编辑单元格

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

• (i) 点击单元格：点击单元格后，内容将进入编辑模式，用户可以更新内容。

• (ii) 点击「编辑」图标：点击单元格上的「编辑」图标后，内容将变为可编辑状态。用户可以通过输入文本来更改内容。编辑图标可以始终显示，也可以仅在悬停时显示。

使用编辑图标来内联编辑单元格中的内容

• (i) 点击单元格外部：点击单元格外部将保存修改的内容。
• (ii) 点击「保存」图标：点击明确的「保存」图标将保存修改的内容。点击「取消」按钮可放弃更改。

用户可以保存或者取消修改的内容

2. 编辑整行

用户可以对整行进行内联编辑。切换到编辑模式的方法有两种：

• (i) 点击行上的任意位置：点击行上的任意位置后，该行所有单元格的内容将进入编辑模式，用户可以更新每个单元格的内容。

行内编辑

• (ii) 点击「编辑」图标：点击行旁边的「编辑」图标后，该行将进入编辑模式，所有单元格都可编辑。用户可以在每个单元格中输入文本来更改内容。

编辑图标以及一行以启用编辑模式

保存编辑内容的方法有两种：

• (i) 点击行的外部：点击整行外部空白将关闭编辑模式，并保存修改的内容。
• (ii) 点击「保存」图标/按钮：点击行旁边的「保存」图标/按钮将保存所有单元格的修改内容。点击「取消」按钮可放弃更改。

用户可以保存或者取消修改的内容

3. 编辑多行

用户可以对表格中的多行进行内联编辑。然而，这种方法仅适用于不需要唯一值的列/字段。所有选定单元格的内容将被修改，并且相同的内容将应用于所有选定单元格。

切换到编辑模式的方法：

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

保存所有行编辑内容的方法：

• 点击「保存」图标/按钮。点击「取消」按钮可放弃更改。

建议在保存更改之前与用户确认，因为此操作将覆盖所选行中的原始值。

选择表中的多行

在表格的多行中进行内联编辑

表格内联编辑的优缺点

下表总结了表格内联编辑的优缺点。

优点：

• 快捷操作方式：用户点击单元格即可直接编辑，无需额外操作步骤
• UI连贯性优势：编辑过程始终在同一页面完成，有效地保持了语境
• 学习成本低：独立的界面需要用户重新适应新的交互，增加认知负担
• 不容易感到迷失：脱离原始界面，会导致上下文环境变化与数据关联性断裂
• 保持交互连续性：返回原界面时需重新定位信息焦点，影响操作节奏

缺陷：

• 适用场景限制：仅适用于数据结构简单、字段量少的表单和场景
• 复杂数据处理麻烦：存在横向滚动浏览需求时，行内编辑易特别造成信息断层
• 数据验证局限：复杂数据结构的输入校验机制实现起来难度较高
• 批量编辑适配度低：独立页面更适合批量操作，行内编辑仅支持有限的批量处理
• 内容容量限制：字段字符数需要严格控制，长文本编辑场景适用性较差

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

替代方案

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

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

用户可以执行所需的编辑，然后点击「保存」按钮保存更改。对话框/弹出窗口关闭后，用户会返回原始视图，表格将显示更新后的数据。

编辑单元格内容的编辑图标

点击编辑图标，可以在对话框中打开单元格的内容。用户可以编辑和保存内容。

编辑图标以可在编辑模式下打开行中的内容。

单击「编辑」图标将在对话框中打开行的内容

2. 使用单独的页面

另一种方法是编辑一行或多行中的大量字段。用户可以选择一行或多行，然后点击「编辑」图标。所选行的可编辑模式将在新页面上打开。用户可以进行更改并保存，然后返回上一个视图。表格中的数据将更新。

点击编辑图标，会在单独的页面中打开该行的内容。用户可以修改并保存内容。

选择多行编辑内容

单击「编辑」按钮将在对话框中打开所选行的内容

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

你可以将内联编辑与对话框或页面视图结合使用。允许对有限数量的字段进行内联编辑，并提供对话框和页面视图，来编辑内容复杂的单行或者多行的内容。

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

单元格的内联编辑

选择该行以在对话框中以可编辑模式打开内容。

应遵循哪种方法？

有几个优先事项可以帮助你确定需求，从而提供合适的解决方案。以下是选择优先事项的建议：

• 优先级选项 1：你希望用户轻松理解信息，同时避免在同一视图中编辑时造成混乱。
  优先级选项 2：你希望在编辑重要数据时避免不必要的错误。
  优先级选项 3：你希望用户能够快速、轻松地编辑信息。

但是设计时的具体解决方案，取决于你的优先级选择。

选项 1 和 2 需要你创建单独的视图进行编辑。

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

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

• 为了提供易于编辑的体验，需要仔细定义用户在编辑过程中执行的操作。
• 提供明确的编辑选项来启用编辑模式，用户可以编辑数据，并提供明确的按钮来保存更改的内容。
• 如果出现错误，系统应显示清晰的消息，解释错误的缘由并提供解决方法。