表格是桌面应用中常见的内容型组件，它包含大量的信息和丰富的交互形式，表格具有极高的空间利用率，结构化的展示保证了数据可读性。高效、清晰且易用是进行表格设计的原则性要求。本文将从表格的内容组织到交互作一次汇总，作为数据类产品的设计总结。
初次设计数据表格，建议阅读 Material Design 关于 Data Tables 的内容，包含了对表格设计基础而全面的指导。
Data tablesmaterial.io
1 系统化表格需求
我们在选择信息的展示形式时，需要思考的是「用户的需求」以及「不同交互模式的特点」。
除却基本表格组织，根据用户需求，表格需要增加一些额外的功能，例如标记预警/异常值（常见于数据监测系统）、展现数据变化趋势的图标（快速理解数据意义）等。
结合数据特征，我们可以梳理出一份包含数据内容、展现形式和交互的功能架构图，便于指导表格设计和开发。
2 信息组织
2.1 行
- 固定标题行
保证在垂直滚动时，能够及时获取数据的指标含义。
- 合理使用斑马纹
斑马纹强化了水平分割线的功能，特别在宽表格/行样式复杂中，能够引导阅读视线，现今办公软件中的默认表格样式也依旧采用了斑马纹。但在大型结构化数据集中，斑马纹带来了额外的视觉负担，且会与单元格背景色冲突。需要按照场景权衡是否使用斑马纹。
- 浅色分割线
分割线可以在更小纵向空间内将数据分隔开，需要注意分割线色值，防止干扰数据阅读并造成版面视觉过重。
- 减少重复的元素
常出现在数据单位和操作文案上，为了保证清晰简洁，设计时考虑调整重复样式和精简交互文案。
2.2 列
- 「F型」 布局
在左→右阅读习惯中，将数据维度按照重要性高低从左至右排列，遵循「F型」布局方便浏览时快速定位重要指标。
- 固定列
首列（或多列）一般为样本身份标志（例如名称、ID号），与固定首行相似，能够方便用户对应样本名称，理解数据含义（特别在存在水平滚动条时）。 可以使用阴影样式和水平滚动条作为视觉线索。
- 列分割线
当表格的表头和内容整洁对齐时，表格自然形成视觉秩序，合适的间距可以取代纵向分割线。相对地，当表格水平空间较小或是有着复杂表头时，纵向分割线可以帮助数据识别。
- 对齐方式
定性内容左对齐，定量内容数位对齐，表头应用该列对齐方式。在表格中使用无衬线字体减少视觉噪音；涉及数字时，注意使用表格字体（或等宽字体），保证数位对齐，能更方便阅读数字和比较大小。
免费数字字体blog.graphiq.com
- 可调节的列宽
当表格指标过多或内容过长时，我们会使用水平滚动条对实现信息隐藏。也可以通过可调节的列宽，在一屏宽中展示更多的数据指标指标。设置最小列宽时，以能显示可辨识的指标内容的最小宽度为依据，当指标文本过长时，设计为两行显示或悬停显示完整信息。
3 表格交互
- 筛选
筛选功能能够根据用户需要减少展示数据，一般分为搜索和条件两种筛选方式。筛选区块设置在表格顶部，内容过多时可以收起。
- 排序
可以根据某个指标维度对表格样本进行重新排序。排序按钮一般设置在指标名旁，在设计时，需要注意可点击范围。
- 批量操作
当多行数据需要进行同一个操作时，设计表格时可以归置为批量操作。
模态批量操作 ：当表格数据不全部满足批量操作触发条件时，可以使用模态批量操作。在点击批量操作按钮后，显示多选框，不符合条件的数据处于禁用状态，选择后「确定」实现批量操作。
- 内联操作
内联操作即直接在单元格内进行编辑等操作，用户可以通过双击单元格，或是点击鼠标悬停后出现的功能按钮完成操作。
- 分页器
表格加载有分页加载和渐进加载两种方式。使用分页加载能够实现数据（页面）直接跳转，而不用依次加载全部数据。当表格高度超过一屏时，可以在表格上方和下方都设置分页器，实现灵活浏览。
文章列举了目前设计工作中常见的表格设计点，除此之外还有许多需要优化和权衡之处，例如键盘支持功能的优化，Web 端表格的右键菜单等。在持续积累之外，也欢迎各位的讨论。
参考链接
- Slava Shestopalov, How to Design Large and Complex Web Tables, Medium Muz
- Jeremiah Lam, 11 data table design guidelines, uxdesign.cc
- Matthew Ström, Design Better Data Tables, Medium
- Qubstudio, Data Tables Design Basics, Design Nation
- Page Laubheimer, Designing Tables for Desktop Apps with Lots of Data, NNgroup
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
