![941a911a0ea0c325ede3c99ef0deb301.png](https://i-blog.csdnimg.cn/blog_migrate/f08f155d80cda747434a8987b131b306.jpeg)
表格是桌面应用中常见的内容型组件,它包含大量的信息和丰富的交互形式,表格具有极高的空间利用率,结构化的展示保证了数据可读性。高效、清晰且易用是进行表格设计的原则性要求。本文将从表格的内容组织到交互作一次汇总,作为数据类产品的设计总结。
初次设计数据表格,建议阅读 Material Design 关于 Data Tables 的内容,包含了对表格设计基础而全面的指导。
Data tablesmaterial.io![722f028108290bf68850f2159cf69f79.png](https://i-blog.csdnimg.cn/blog_migrate/7f4a6281ae5e5a7502e6eae69ab76f5e.png)
1 系统化表格需求
我们在选择信息的展示形式时,需要思考的是「用户的需求」以及「不同交互模式的特点」。
除却基本表格组织,根据用户需求,表格需要增加一些额外的功能,例如标记预警/异常值(常见于数据监测系统)、展现数据变化趋势的图标(快速理解数据意义)等。
结合数据特征,我们可以梳理出一份包含数据内容、展现形式和交互的功能架构图,便于指导表格设计和开发。
![11291e4b6f391e80fbb9a6a6f60c350b.png](https://i-blog.csdnimg.cn/blog_migrate/217b977eb9d577ef90c1fabed867152b.jpeg)
2 信息组织
![99512df63892485fe33afb5a4413d2e6.png](https://i-blog.csdnimg.cn/blog_migrate/2cfc765c9ca00eb080d138ffad19ebc3.jpeg)
2.1 行
- 固定标题行
保证在垂直滚动时,能够及时获取数据的指标含义。
- 合理使用斑马纹
斑马纹强化了水平分割线的功能,特别在宽表格/行样式复杂中,能够引导阅读视线,现今办公软件中的默认表格样式也依旧采用了斑马纹。但在大型结构化数据集中,斑马纹带来了额外的视觉负担,且会与单元格背景色冲突。需要按照场景权衡是否使用斑马纹。
![4111716fc30adee0c7a2895421836d60.png](https://i-blog.csdnimg.cn/blog_migrate/9659875ad8c677abb26fa2c3779ea028.jpeg)
- 浅色分割线
分割线可以在更小纵向空间内将数据分隔开,需要注意分割线色值,防止干扰数据阅读并造成版面视觉过重。
![2426255ac1ce24ee85b9bae4c3a52737.png](https://i-blog.csdnimg.cn/blog_migrate/e6618e74d337439dd1b5b3bcc00787e9.jpeg)
- 减少重复的元素
常出现在数据单位和操作文案上,为了保证清晰简洁,设计时考虑调整重复样式和精简交互文案。
2.2 列
- 「F型」 布局
在左→右阅读习惯中,将数据维度按照重要性高低从左至右排列,遵循「F型」布局方便浏览时快速定位重要指标。
- 固定列
首列(或多列)一般为样本身份标志(例如名称、ID号),与固定首行相似,能够方便用户对应样本名称,理解数据含义(特别在存在水平滚动条时)。 可以使用阴影样式和水平滚动条作为视觉线索。
- 列分割线
当表格的表头和内容整洁对齐时,表格自然形成视觉秩序,合适的间距可以取代纵向分割线。相对地,当表格水平空间较小或是有着复杂表头时,纵向分割线可以帮助数据识别。
![ca1b8b2c9ce372d3521d099b6c247da4.png](https://i-blog.csdnimg.cn/blog_migrate/b7411abc7c78272ca4e5ad4bb48d1365.jpeg)
- 对齐方式
定性内容左对齐,定量内容数位对齐,表头应用该列对齐方式。在表格中使用无衬线字体减少视觉噪音;涉及数字时,注意使用表格字体(或等宽字体),保证数位对齐,能更方便阅读数字和比较大小。
免费数字字体blog.graphiq.com![d642fa1558f6103f9775533e32d08b38.png](https://i-blog.csdnimg.cn/blog_migrate/d6f421e062a7bd586c2973d60b92040e.jpeg)
- 可调节的列宽
当表格指标过多或内容过长时,我们会使用水平滚动条对实现信息隐藏。也可以通过可调节的列宽,在一屏宽中展示更多的数据指标指标。设置最小列宽时,以能显示可辨识的指标内容的最小宽度为依据,当指标文本过长时,设计为两行显示或悬停显示完整信息。
![229473f692dd9257d72d18b4c32fcfa2.png](https://i-blog.csdnimg.cn/blog_migrate/9b2555b1412694501b771794b787c5cd.jpeg)
3 表格交互
- 筛选
筛选功能能够根据用户需要减少展示数据,一般分为搜索和条件两种筛选方式。筛选区块设置在表格顶部,内容过多时可以收起。
![81cf41453b47856569fd26bad3acd530.png](https://i-blog.csdnimg.cn/blog_migrate/7e03faea1febbce6a5c91045962b0bec.jpeg)
- 排序
可以根据某个指标维度对表格样本进行重新排序。排序按钮一般设置在指标名旁,在设计时,需要注意可点击范围。
![cc17d792b306cda93bf4296ebab5d5df.png](https://i-blog.csdnimg.cn/blog_migrate/3344d8a019aa7d6c43dd8c00a0a943c3.jpeg)
- 批量操作
当多行数据需要进行同一个操作时,设计表格时可以归置为批量操作。
模态批量操作 :当表格数据不全部满足批量操作触发条件时,可以使用模态批量操作。在点击批量操作按钮后,显示多选框,不符合条件的数据处于禁用状态,选择后「确定」实现批量操作。
![8cba31ba11891310ed113a9e663ea0ae.png](https://i-blog.csdnimg.cn/blog_migrate/81c7994ec88a3ed21428fdcf789ccdf5.jpeg)
- 内联操作
内联操作即直接在单元格内进行编辑等操作,用户可以通过双击单元格,或是点击鼠标悬停后出现的功能按钮完成操作。
- 分页器
表格加载有分页加载和渐进加载两种方式。使用分页加载能够实现数据(页面)直接跳转,而不用依次加载全部数据。当表格高度超过一屏时,可以在表格上方和下方都设置分页器,实现灵活浏览。
文章列举了目前设计工作中常见的表格设计点,除此之外还有许多需要优化和权衡之处,例如键盘支持功能的优化,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