前言

总结：表格设计应该支持四个用户常用的任务：找到符合特定标准的记录、对比数据、查看、编辑、新增一行数据，以及针对特定记录进行操作。

如果你的软件或app包含很多数据，那么很有可能你会用表格的形式来呈现它们。表格常见于许多工作软件，因为它是一种紧凑地显示一个庞大的、包含多个变量的数据集的方式。然而，庞大的表格对于设计师和用户而言都是一个挑战。

这篇文章是一系列如何设计易用表格的文章的一部分，它们将会介绍：

与表格相关的常见用户任务，以及如何在桌面端支持这些任务
如何解决“在小屏幕上放下大表格”的问题——包括移动端表格以及多种尺寸视图的设计（常见于响应式设计）

请注意，本文主要关注在工作软件中常见的包含大量数据的表格，而非常见于电商网站中的产品对比表格。

一、选取表格 vs. 卡片或模块来呈现数据

从 UI 美观角度来讲，表格往往并不是选美比赛的胜者——相反，设计师常常出于实用角度使用表格。相较于其他更为美观的方式（例如一叠卡片，或者是包含多种信息可视化和数据图表的驾驶舱界面），表格具有功能性方面的优势。为了更好地理解和利用这一点，我们需要明确用户何时会使用表格，和用户的哪些任务适合在表格上完成。

数据表格相比于其他数据呈现方式的主要优势在于：

可扩展性：数据库改变时，在已有表格上增加行、列的数量都很容易。
支持对比任务：表格中的相邻两个数据点易于比较。与卡片式设计不同，用户在用表格对比时不需要大量地来回移动视线，或者将数据存储在工作记忆中，因为他们可以同时看见要比较的两条记录。

数据表格：用户的四个主要任务 - 图1
用卡片式设计来呈现多变量数据时，用户需要在将视线从一张卡片移动到另一张卡片时，重新找到开始的位置，从而为对比任务增加了更多的认知负荷，增加操作时间。

二、使用表格时的主要用户任务

根据app属性和用户需求不同，每张表格上用户需要进行的特定任务可能差异很大。然而，在设计表格时，应该注意下面4个在表格中最常使用的、应当被当作核心任务来支持的任务：

找到符合特定标准的记录
对比数据
查看、编辑、新增一行数据
针对特定记录进行操作

2.1 找到符合特定标准的记录

当用户在进行这类任务时，他们可能是想找一个特定记录（已知名称或相关具体信息），或查找几个符合已知若干条件的条目。

该过程可能包含筛选、排序、使用搜索功能（或者浏览器自带的Ctrl+F搜索），或仅仅是从上而下扫视整个数据表格。用户使用的具体方法很难预测，它与数据表格的具体形态、用户预期如何才能最省力地找到目标条目都有关系。
数据表格：用户的四个主要任务 - 图2
该眼动注视图展示了一名研究参与者反复来回看表格中的数据和他使用的筛选条件。该参与者一度逐行检索整个表格，先看第一行、第二行，接着跳到第四行、第六行，然后看下一列数据，再看那几行对应的这一列数据。

设计师可以做以下几件事来帮助用户完成该任务：

（默认的）表格首列的内容应该可辨读、能区分每行的数据，而非是神秘的、自动生成的一串ID数字。这样的设计可以支持用户扫读并发现他们感兴趣的区域。
表格每一列放置的顺序应该反映数据对用户而言的相对重要性，相关的数据列相邻放置。换句话说，如果你把最相关的两列数据放在第1列和第20列，一旦用户发现一行他感兴趣的数据，他就不得不在这遥远的两列之间来回移动视线。
设计可发现、快速、强大的筛选选项。筛选状态应该对用户清晰可见。同时，用户应该能够明确地了解他们看到的是筛选后的数据（生效的筛选选项应该有明确的视觉标识）。

2.2 对比数据

最有效用的表格帮助用户轻松地比较数据——无论该数据涉及两行甚至更多行，或是处于不同列时。通常来说，这种对比旨在确定不同变量或单元格数据的关系、理解一列数据的分布范围和异常值，或仅仅是探索单个或多个变量的常见值。

当用户在复杂、大型表格中进行数据对比时，有两个常见的问题：

因为极大数量的数据填满屏幕，用户可能很难理解每个单元格代表着什么以及它属于哪一行。
有时，用户想要对比的数据列相距很远，比如一列可能在屏幕之外，用户需要水平滚动来查看。来回滚动不仅繁琐，还要求用户记住一列数据，再把另一列数据滚动到屏幕内，再与自己记忆中的上一列数据做对比。
同样的情况也会发生在不同数据行中：如果人们想对比不相邻的两行数据，来回移动同样也可能造成困难，并且难以确保用户始终关注的是正确的单元格。

设计方案应该首要确保：

用户始终了解他们正在查看的是什么数据。
用户可以把他们感兴趣的数据点放在一起。

以下是一些能够实现这两个原则的具体指南：

1. 定位相关信息

冻结标题行和首列（如果表格比屏幕大）
视觉设计应该确保用户在整张表格上不停移动视线时始终能确认自己所处的位置。使用边框、斑马式涂色、悬停高亮数据所在行等方式来帮助用户。

2. 让信息相邻、便于比较

用户应当能够轻松地隐藏列、对列进行重新排序（使用低交互成本的方式，并且考虑到那些不会使用拖拽-放置交互的用户）。这些功能应该具有可发现性，并用清晰的视觉符号来表征它们的状态信息，例如某些列已被隐藏。
用户也应该能够简单地隐藏或重新排列行，以及根据某个特定变量排序。（该功能往往和筛选功能相关，但两者并不相同——用户应该能够手动隐藏特定的一行或多行数据。）

冻结首行和首列、浅色的表格边框、斑马式涂色均帮助用户扫读表格，并在阅读、对比数据时始终确定自己所处的位置。该表格的首行和首列还使用了细微的投影来说明它们悬浮在表格的其他数据“之上”，来帮助用户进行空间上的定位。
数据表格：用户的四个主要任务 - 图4
该表中呈现了一个易被发现的、管理隐藏列的菜单，它清楚地显示了当前状态（目前存在15个隐藏列）。该表格支持两种方式重新排列行：（1）在表格内部的列标题之间进行拖拽—放置来调整（该功能的可发现性很低，也未考虑无障碍设计，但用户一旦学会后，就是一个有效的捷径）或（2）在该菜单中拖拽和调整列的顺序。

2.3 查看、编辑或增加一行数据

用户使用表格时的另一个常见任务是查看、创建或编辑一行数据。对于这三种情况而言，仅以扁平的表格形式呈现单行数据可能会给用户阅读（以及进一步编辑）数据带来挑战，尤其是在表格很宽、用户需要横向滚动来接触所有列的数据时。

有多种整体地呈现单列数据的方式，从而增加可读性和可编辑性。每种方式都有各自的优缺点：
数据表格：用户的四个主要任务 - 图5
以模态弹窗形式呈现的编辑功能会模糊表格上的信息。

就地编辑（即表格内的数据变为可编辑状态）。这个方案只有在表格比较窄的情况下适合。确保表格内处于编辑模式的行与查看模式的看起来不同，这样用户就可以清楚了解哪些是可以编辑的，预防无意的误编辑。
模态弹窗。使用模态的一个很大的缺陷（这也是我们不推荐用模态来完成深度编辑工作的原因）即是它会挡住表格里的相邻数据，用户会无法参考相似的数据行，或从中复制数据。我们在许多可用性测试中都观察到用户在编辑数据时，习惯性地参考其他行中的已有数据（因为这帮助他们再认，而非回忆该行数据的合理范围）。
非模态模块或单独窗口。这两种方式都会占据一定的表格空间，但仍然允许用户查看表格数据。
以折叠面板的形式展开一行数据。虽然这种方式不会挡住表格的其他部分，该方式的一个缺陷是用户往往在处理数据后忘记清理（例如，在完成编辑后收起折叠面板），从而导致表格的呈现较为破碎，不利于完成后续的其他核心任务。更重要的是，用户可能会很难参考到其他数据，尤其是在这些数据不毗邻正在被编辑的那行数据时。

数据表格：用户的四个主要任务 - 图6
用户以非模态的右侧面板形式编辑表格中的一行数据。这种呈现方式完全显示了这行数据，同时允许用户查看整个表格的其他数据。

2.4 针对特定记录进行操作

表格中的另一个重要任务是针对单个或多个记录进行操作（不仅仅是编辑数据）：例如，删除、分享，或进行与该记录相关联的操作（例如寄出发票、修改截止日期等等）。

传统上，有两种可以实现该任务的方式：单行操作和批量操作。

2.4.1 单行操作

如果针对每行的操作只有一到两个，那么将针对单行的操作放在表格的每一行之内是可行的。然而，如果操作不止一两个，它就会占据大量的屏幕空间。由此带来的后果往往是这两种之一：

拥挤的、缺少文字标签的若干操作放在一起，导致难以点击、难以区分。
操作隐藏在悬浮手势下，或藏在一个笼统的“操作”菜单中，导致难以发现（尤其是悬浮操作的使用会欠缺无障碍设计考虑）。

2.4.2 批量操作

批量操作往往包含一个选择数据的机制（例如，每行前的勾选框）和一系列在表格之上或之下的操作按钮或菜单。这种设计经济地使用了空间来呈现多个选项。如果用户经常需要对于整个数据集进行相同的操作，能一键“选择全部”的选项可以为用户提供一个便利的捷径。

总结

对比模块化，例如卡片式的呈现方式，表格更高效地利用了空间，也很适合对比数据、发现规律。
数据表格必须支持以下常见用户任务：

找到符合特定标准的记录
对比数据
查看、编辑、新增一行数据
针对特定记录进行操作

附录

如果你对设计表格相关内容感兴趣，可以点击“”了解更多关于网页和桌面应用设计全天课程（英文课程及描述）。

原文地址：https://www.nngroup.com/articles/data-tables/