数据表被用来展示原始数据集,并且通常出现于桌面企业产品中。
数据集可能包含:
- 三个或者更多列的数据
- 一个相关的可视化
- 用户可以批量查询、操作数据
结构
交互
选择行
规格
在最简单的形式中,一个数据表包含列名称的顶层行,以及许多数据行。如果用户需要选择或者操作数据,每一行应该有一个复选框。
基本数据表
列头部
- 12 sp Roboto Medium
- 54% 黑色
表内容
- 13sp Roboto Regular
- 87%黑色
文本对齐
- 右对齐数据列
- 左对齐文本列
当用户悬停到一行任意位置时,显示一个背景。如果个别的单元格有特别的悬停状态,同时显示单元格和行的状态。
悬停背景
- 灰色 200 (#EEEEEE)
悬停于一行
当一行被选中,在当前行使用背景。
选中行背景
- 灰色100 (#F5F5F5)
复选框
- 使用第二个应用颜色
一个选中的表格行
如果列排序被使能,默认排列最重要的数据,并且在列头部显示已排序的状态。如果用户点击一个已排序的列,反转排序顺序并且旋转排序图标。
排序的列名称
- 12sp Roboto Medium
- 87% 黑色
排序图标
- 16dp container
- 87% 黑色
带有正向排序列的表
如果需要提供列名称的定义,悬停时显示一个提示文本。如果可以排序,悬停时显示一个明亮的排序按钮,指明这个列是可以排序的。
提示文本
- 遵守提示文本指南
排序按钮
- 16dp container
- 26% 黑色
悬停于一个列名称
有时,列之间采用推荐的 56 dp 内边距时,列名称在容器中并不合适。有两个选项来处理这种情况:
- 1.完整显示列名称,在表格容器中使能垂直滚动条。
- 2.缩减列名称,悬停时显示全部。
通过一个椭圆阶段长的列名称
悬停于一个截断的列名称
表格可能需要基本的文本编辑(例如,编辑现有的文本内容,或者添加评论)。在表中包含可编辑字段,通过使用 placeholder 文本来提示。你可以使用一个简单的编辑对话框,只放一个文本框,当然也可以显示一个完整的对话组件。
Placeholder 文本
- 13sp Roboto Regular
- 26% 黑色
- 文本框中没有分割线
小的编辑对话框
- 将对话框的边缘与最近的分割线对齐,或者表格边缘
- 24 dp 的左边距和右边距
- 包含单个的文本框,应用 app 主题
- 用户通过按动回车键确认
一个简单、单字段的编辑对话框
大的编辑对话框
- 将对话框的边缘与最近的分隔线或者表格边缘对齐
- 遵从对话框指南,应用 app 主题
- 用户通过点击保存按钮确认文本
一个复杂灵活的编辑对话框
内联编辑按钮
- 18 dp 容器
- 54% 黑色
(可选)基于图标的编辑提示。在内容的另一边的单元格边缘包含图标。
内联菜单 除了编辑文本框,用户可能需要从一个预定义的选项列表中选择。在这种场景中,直接在表格中嵌入一个菜单组件。
内联菜单
- 13sp Roboto Regular
- 87% 黑色
- 遵循菜单的空间和尺寸指南
带有内联菜单的表格
一个扩展的内联菜单
数据表可以被嵌入到卡片中,在顶部和底部放置导航和数据操作工具。
具有头部和脚部的表格卡片
卡片标题
- 20sp Roboto Regular
- 87% 黑色
卡片操作图标(头部和脚部)
- 24dp container
- 54% 黑色
脚部分页标签
- 12sp Roboto Regular
- 54% 黑色
有些表格卡片可能需要带有操作而不是标题的头部。这种情况,两个可能的方法:显示持续的操作菜单,或者当条目选中时激活一个内容头部。
一个表格卡片的可选头部
- 使用无边框按钮
- 使能条目选择
- 为背景使用 50 -值的第二应用颜色
- 显示选中条目的数量
- 在条目选择上显示可用的内容图标
一个数据表的垂直间距以及它的最后行
- 1.64 dp 的卡片头部高度
- 2.56 dp 的最后行高度
- 3.48 dp 的数据行高度
数据表卡片中的元素之间的水平内间距。
- 数据表卡片的一周有 24 dp 的内边距
- 脚部控制菜单中,32 dp 的内边距
- 脚部行数量和标签之间是 40 dp 的内边距
列之间的内边距
- 1.列之间的最小内边距为 56 dp。列中最宽的条目(包含数据和列名称)划定列的边框。
- 2.在 24 dp 的图标容器中,复选框图标拥有 18 dp 的宽度和高度。