用于展示信息,常用于展示大量结构化的数据。表格可附带操作,对表格进行排序、搜索、筛选,或增加数据

表格设计原则

1.要明确表格出现的场景

是查询场景还是操作场景,前者建议将操作隐形,后者则建议将操作显性。

2.明确信息的层级关系

需要考虑到用户在查看表格时最重点要关注的信息,需要重点考虑表格中行信息的排序

3.考虑好表格的密度

表格中经常会出现大量的数据(文字或数字),设计时需要去考虑整体单元格之间的密度,保证阅读的舒适度

组成部分表格 - 图3

展示规则

对齐方式

默认内容整体左对齐,除非使用不同的对齐有助于理解。例如,右对齐时,数字数据更容易对比大小。
表格 - 图4

在一行内有多个字段时,内容顶对齐。
表格 - 图5

表格内字段过长

当该段文本过长时且重要性不高时,过长的信息可用省略号表示,在鼠标移动到该区域时使用工具提示进行展示。
表格 - 图6

该单元格内信息较重要,需要直观展示,不可隐藏,建议不超过2行。表格 - 图7

使用状态标识符对表格内的状态进行说明
表格 - 图8

按钮展示规则

表格中的按钮颜色,不随主色的改变而改变,皆为蓝色。
表格 - 图9

间距规则(待补充)

从属关系(待补充)

表格单行可包含从属关系,点击可展开

展示样式

斑马线

斑马线作为可选样式之一,在大量数据的表格中可以在行与行直接作出区分。 此时高亮色与其中深色背景底色相同。
表格 - 图10

列网格

强调列。隐藏了横向的线,不强调同行数据的左右对比,更加关注同个属性的对比。
表格 - 图11

单行表格分组

当某一行的第一个字段统领后续字段,后续字段又分割成很多行时,使用此样式。
表格 - 图12

行为操作

表格内的行为操作主要位于左侧的选择区域和右侧的按钮区域。
表格 - 图13

右侧动作区域

最多展示3个,超过3个使用「更多」按钮。
表格 - 图14

左侧批量选择表格 - 图15

表格滚动

表格内容在指定容器内可水平或者垂直滚动。当表格内容不借助翻页器且超过屏幕高度时,表头置顶且固定。
表格 - 图16

当表格内的内容横向区域展示不下时,使用水平滚动。
表格 - 图17