表格是桌面应用中常见的内容型组件，它包含大量的信息和丰富的交互形式，表格具有极高的空间利用率，结构化的展示保证了数据可读性。高效、清晰且易用是进行表格设计的原则性要求。本文将从表格的内容组织到交互作一次汇总，作为数据类产品的设计总结。

初次设计数据表格，建议阅读 Material Design 关于 Data Tables 的内容，包含了对表格设计基础而全面的指导。

Data tables​material.io

1 系统化表格需求

我们在选择信息的展示形式时，需要思考的是「用户的需求」以及「不同交互模式的特点」。

除却基本表格组织，根据用户需求，表格需要增加一些额外的功能，例如标记预警/异常值（常见于数据监测系统）、展现数据变化趋势的图标（快速理解数据意义）等。

结合数据特征，我们可以梳理出一份包含数据内容、展现形式和交互的功能架构图，便于指导表格设计和开发。

2 信息组织

2.1 行

• 固定标题行

保证在垂直滚动时，能够及时获取数据的指标含义。

• 合理使用斑马纹

斑马纹强化了水平分割线的功能，特别在宽表格/行样式复杂中，能够引导阅读视线，现今办公软件中的默认表格样式也依旧采用了斑马纹。但在大型结构化数据集中，斑马纹带来了额外的视觉负担，且会与单元格背景色冲突。需要按照场景权衡是否使用斑马纹。

• 浅色分割线

分割线可以在更小纵向空间内将数据分隔开，需要注意分割线色值，防止干扰数据阅读并造成版面视觉过重。

• 减少重复的元素

常出现在数据单位和操作文案上，为了保证清晰简洁，设计时考虑调整重复样式和精简交互文案。

2.2 列

• 「F型」 布局

在左→右阅读习惯中，将数据维度按照重要性高低从左至右排列，遵循「F型」布局方便浏览时快速定位重要指标。

• 固定列

首列（或多列）一般为样本身份标志（例如名称、ID号），与固定首行相似，能够方便用户对应样本名称，理解数据含义（特别在存在水平滚动条时）。 可以使用阴影样式和水平滚动条作为视觉线索。

• 列分割线

当表格的表头和内容整洁对齐时，表格自然形成视觉秩序，合适的间距可以取代纵向分割线。相对地，当表格水平空间较小或是有着复杂表头时，纵向分割线可以帮助数据识别。

• 对齐方式

定性内容左对齐，定量内容数位对齐，表头应用该列对齐方式。在表格中使用无衬线字体减少视觉噪音；涉及数字时，注意使用表格字体（或等宽字体），保证数位对齐，能更方便阅读数字和比较大小。

免费数字字体​blog.graphiq.com

• 可调节的列宽

当表格指标过多或内容过长时，我们会使用水平滚动条对实现信息隐藏。也可以通过可调节的列宽，在一屏宽中展示更多的数据指标指标。设置最小列宽时，以能显示可辨识的指标内容的最小宽度为依据，当指标文本过长时，设计为两行显示或悬停显示完整信息。

3 表格交互

• 筛选

筛选功能能够根据用户需要减少展示数据，一般分为搜索和条件两种筛选方式。筛选区块设置在表格顶部，内容过多时可以收起。

• 排序

可以根据某个指标维度对表格样本进行重新排序。排序按钮一般设置在指标名旁，在设计时，需要注意可点击范围。

• 批量操作

当多行数据需要进行同一个操作时，设计表格时可以归置为批量操作。

模态批量操作 ：当表格数据不全部满足批量操作触发条件时，可以使用模态批量操作。在点击批量操作按钮后，显示多选框，不符合条件的数据处于禁用状态，选择后「确定」实现批量操作。

• 内联操作

内联操作即直接在单元格内进行编辑等操作，用户可以通过双击单元格，或是点击鼠标悬停后出现的功能按钮完成操作。

• 分页器

表格加载有分页加载和渐进加载两种方式。使用分页加载能够实现数据（页面）直接跳转，而不用依次加载全部数据。当表格高度超过一屏时，可以在表格上方和下方都设置分页器，实现灵活浏览。

文章列举了目前设计工作中常见的表格设计点，除此之外还有许多需要优化和权衡之处，例如键盘支持功能的优化，Web 端表格的右键菜单等。在持续积累之外，也欢迎各位的讨论。

参考链接

1. Slava Shestopalov, How to Design Large and Complex Web Tables, Medium Muz
2. Jeremiah Lam, 11 data table design guidelines, uxdesign.cc
3. Matthew Ström, Design Better Data Tables, Medium
4. Qubstudio, Data Tables Design Basics, Design Nation
5. Page Laubheimer, Designing Tables for Desktop Apps with Lots of Data, NNgroup