阅读提示 | 全文大约2600字，阅读需要12分钟

表格的大小，复杂性，内容和目的各不相同。无论目的如何，所有经过精心设计的表格都可以使所提供的信息更加清晰，并帮助用户采取行动。

本文是最佳实践的集合，可帮助您在web后端设计更好的表格。它分为两部分：表格样式和表格功能。

表格样式

在决定如何设计表格样式时，请优先考虑可读性并消除可能使用户分散注意力的任何视觉干扰。

1.选择最佳行样式

行样式可帮助用户扫描，读取和解析数据。在设计表格时首先要考虑为数据类型和数量选择最佳的行样式。

网格：包括水平线和垂直线在内的数据点之间的距离最大，但是过多的视觉噪声可能会分散注意力。对于数据密集型，建议使用此样式。

网格示例

水平线：仅显示水平线可减少整个网格的视觉噪声。这种样式包含大量空白，同时仍可以帮助用户在阅读时保持数据辨别。对于所有数据集大小，此样式都适用，建议使用。

水平线示例

斑马条纹：每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法。对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定性突出显示的混乱。

斑马条纹示例

自由形式：移除所有分隔物可通过尽可能减少视觉噪声来创建极简外观。对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。

自由格式示例

2.使用清晰对比

通过向表添加对比来建立层次结构。可以使用不同的文本样式和背景来完成。

标题对比度：通过更改粗细和颜色，将标题文本与列文本区分开。如果需要，将不同的颜色背景应用于标题可以提供额外的对比度。

上：标题文字对比，下：标题背景对比

列数据：列数据还可以使用不同的权重和颜色来强调某些数据，例如行标识符（第一列）或单个单元格中的主要数据点（即，单元格数据：1,234 34％）。

上：标识符对比，下：数据对比

3.添加视觉提示

使用不同的颜色背景将组织上下文和含义添加到表中。这些视觉提示有助于以更易于扫描和理解的方式呈现数据。

行背景：更改整个行的颜色以突出显示数据域中的差异（即，在单个值与总和或平均值之间切换）。

行背景示例

单元格背景：更改单元格的颜色以突出显示数据点的状态（即上升趋势，下降趋势）。

单元格背景示例

4.正确对齐列数据

默认情况下，大多数列数据保持左对齐。这有助于使数据易于扫描，可读和可比。有一个特例是与数字大小相关的对齐。这些数字的正确对齐，可以帮助用户识别这些数字的大小。

遵循的规则：

1. 将文本数据向左对齐（即名称）
2. 对齐与大小无关的数字数据（例如，日期，邮政编码，电话号码）
3. 对齐与大小（即计数，百分比）有关的数字数据
4. 根据标题的列数据对齐标题

对齐示例

5.使用表格数字

显示数字时，请使用表格（或等宽）字体。这意味着每个图形都具有相同的宽度，而不是具有成比例的间距（即“ W”宽于“ I”）。这使数值数据列更易于扫描。

对于数据表格，您可以使用固有的等宽字体（例如Courier，Courier New，Lucida Console，Monaco等）或有时包含在比例字体中的等宽数字集。

比例字体与表格字体示例

5.选择合适的行高

选择最适合表中数据类型和数量的行高。常规和宽松的行高提供了更多的空白空间，并且更适合读取大型数据集。使用紧凑的行高将使用户无需滚动即可立即查看更多数据，但会降低表格的可读性并可能导致解析错误。

行高

• 压缩：40px
• 常规：48px
• 轻松：56p

行高示例

6.包括足够的填充

在每列的右侧和左侧至少保留16px的填充。这意味着每列之间的间隔至少应为32px。

填充示例

7.使用文字

字文本可以提供及时的上下文信息和有用的详细信息，而不会占用空间或使表格混乱。它也可以用于合并列。

例如，可以将电子邮件添加为用户名称下方的子文本，而不是为用户和电子邮件分别创建单独的列。

子文本示例

表格功能

数据表格应让用户能够扫描，理解，分析，比较并根据其中的信息采取行动。

1.滚动时保持上下文

固定上下文信息，以帮助用户了解在向下滚动或横向滚动时正在查看的数据。当设计具有大数据集或较小屏幕尺寸的表格时，此功能很重要。

固定标题：当用户开始垂直滚动时，将标题固定在表格的顶部。通过始终保持列标签可见，提供上下文信息。

固定标题示例

固定列：当用户开始水平滚动时，将第一列（带有标识信息）固定在表格的侧面。通过始终保持查看行标识符来提供上下文信息。

固定列示例

2.优先考虑共同行动

允许用户快速完成常见操作，而不必导航到新页面。这将节省用户的时间和精力，使其不必完成简单的重复性任务。

悬停操作：当用户将鼠标悬停在一行上时，显示常见操作。这样可以减少视觉混乱，但可能会给新用户带来新的问题。

悬停操作示例

批量操作：允许用户一次选择和更新多个项目。一旦选择了行，就可以在表的顶部执行常用操作。通过将重复的任务分批处理，此功能可以为用户节省大量时间。

批量操作示例

3.使用过滤器处理数据

使用户能够操纵表格中显示的数据。过滤数据可帮助用户找到所需的内容，获得不同的见解并进行比较。

基本过滤器：允许用户将预设过滤条件应用于数据集。此功能非常普遍，适用于大多数数据表格。

基本过滤器示例

复杂过滤器：允许用户将自定义过滤条件应用于特定列。此高级功能使用户能够分析和比较复杂数字数据表得非常具体的结果。此外，此功能还可以保存“过滤器集”，以便在可能重复使用的情况下节省用户的时间和精力。

复杂的过滤器示例

4.包括分页

将长表格分成多页，每页上有固定的行数。用户需要了解他们当前在哪个页面上，并能够导航到其他页面。此外，用户可以自定义每个页面上包含多少行。

分页示例

5.使列数据可自定义

使用户能够选择表中包含哪些数据。此功能允许用户添加，删除和重新排序列。此外，如果可能重复使用，此功能还可以保存列首选项。

可自定义的列示例

6.使表格显示可自定义

使用户能够自定义顺序和可用数据的显示。这些自定义可以服务于不同的工作流程，展示新的视觉，并帮助视力受损的用户。

列排序：允许用户按特定类别组织行。通过单击列标签旁边的排序图标，可以按字母顺序或数字顺序对任何列进行排序。

排序列示例

可调整大小的列：允许用户扩展和收缩任何列的宽度，以完全显示黯淡的数据。

可调整大小的列

显示密度：允许用户根据用例和视觉可访问性在行高之间切换。

显示密度示例

良好的数据表格设计为用户带来了巨大的实用性和价值。使用您在本文中学到的最佳实践来重新考虑现有的数据表格，或将其应用于下一个web设计项目。

感谢阅读，后续会再出一篇关于移动端的表格设计文章。

更多文章，持续更新中，关注公众号：商业产品技术栈，回复“商业化产品经理”免费领取资料！

#产品经理# #互联网# #商业产品#