在日常业务场景中,表格这一元素是十分常见的,不过不少人却还是不能将表格设计得尽善尽美。不过我们也不能妄想解决所有场景下的表格设计问题,所以不如选择从常见问题入手展开设计,比如本文作者便总结了表格设计常会面临的问题及解决方案,一起来看看吧。
在之前我们分享过一篇关于表格设计的详解,比较系统地分享了表格设计的思路和流程。文章链接:年前最后一篇长干货,B端表格规范最终集奉上。
但表格设计细节太多了,光靠一篇系统性的分享肯定无法覆盖所有场景和问题,所以本篇内容主要集中在表格设计中面临的常见问题展开:
- 单元格的组成和内间距应用;
- 单元格尺寸设置和响应逻辑;
- 单元格的内容类型;
- 单元格内的文字样式;
- 单元格的内容堆叠;
- 单元格的对齐模式处理;
- 表格中的批量操作;
- 表格内容的修改;
- 堆叠表头的设计要点;
- 序号和 ID 的认识。
每个表格都是由若干矩形单元格组成的,单元格内可以包含对应的图片、图标、按钮、文字内容。当我们设计一个表格的时候,不管你有没有使用线段来分割出每个单元格,都需要用这种网格模式完成表格的布局。
这意味着,单元格之间是没有间距的,它们相互之间是紧密贴合在一起的,而不是通过外边距控制布局的。
在此基础上,为了防止单元格内容和其它单元格内容贴到一起,或在有格线的时候和格线贴在一起,我们就需要为每个单元格添加内间距,可以使用4的倍数设置。