作者：郭孝星

微博：郭孝星的新浪微博

邮箱：[email protected]

博客：http://blog.csdn.net/allenwells

Github：https://github.com/AllenWells

表格是一个用来展示原始数据集，用户可操作的可视化的网格结构，并且通常出现于桌面企业产品中。

一 表格的布局

1.1 表格类型

1.1.1 基本表格

基本的表格布局如下所示：

• 列表头部：12 sp Roboto Medium，54% 黑色
• 表格内容：13sp Roboto Regular，87%黑色
• 文本对齐：对齐数据列，左对齐文本列

如下所示：

1.1.2 卡片中的表格

表格可以嵌入卡片中。在顶部和底部放置导航和数据操作工具。

卡片表格的设计方式：

• 卡片标题：20sp Roboto Regular，87% 黑色
• 卡片操作图标：24dp container，54% 黑色
• 脚部分页标签：12sp Roboto Regular，54% 黑色

关于卡片表格的头部

有些表格卡片可能需要带有操作而不是标题的头部。这种情况，两个可能的方法：显示持续的操作菜单，或者当条目选中时激活一个内容头部。

表格可选头部的设计方式：

• 操作按钮：用无边框按钮，开启条目选择
• 着色的头部：为背景使用 50 -值的第二应用颜色，显示选中条目的数量，在条目选择上显示可用的内容图标

1.2 表格规格

1.2.1 垂直间距

表格的垂直间距：

• 1.64 dp 的卡片头部高度
• 2.56 dp 的最后行高度
• 3.48 dp 的数据行高度

1.2.2 头部以及脚部内边距

数据表卡片中的元素之间的水平内间距：

• 数据表卡片的一周有 24 dp 的内边距
• 脚部控制菜单中，32 dp 的内边距

1.2.3 列内边距

列之间的内边距：

• 列之间的最小内边距为 56 dp。列中最宽的条目（包含数据和列名称）划定列的边框。
• 在 24 dp 的图标容器中，复选框图标拥有 18 dp 的宽度和高度。

二 表格的交互

2.1 悬停行

当用户悬停到一行任意位置时，显示一个背景。如果个别的单元格有特别的悬停状态，同时显示单元格和行的状态。

• 悬停背景：灰色 200 (#EEEEEE)

如果需要提供列名称的定义，悬停时显示一个提示文本。如果可以排序，悬停时显示一个明亮的排序按钮，指明这个列是可以排序的。

• 提示文本：遵守提示文本指南
• 排序按钮：16dp container，26% 黑色

2.2 选中行

当一行被选中，在当前行使用背景。

• 选中行背景：灰色100 (#F5F5F5)
• 复选框：使用第二个应用颜色

2.3 排列行

如果列排序功能被开启，默认排列最重要的数据，并且在列头部显示已排序的状态。如果用户点击一个已排序的列，反转排序顺序并且旋转排序图标。

• 排序列名称：12sp Roboto Medium，87% 黑色
• 排序的图标：16dp container，87% 黑色

2.4 编辑行

表格可能需要基本的文本编辑（例如，编辑现有的文本内容，或者添加评论）。在表中包含可编辑字段，通过使用 placeholder 文本来提示。你可以使用一个简单的编辑对话框，只放一个文本框，当然也可以显示一个完整的对话组件。

placeholder 文本如下所示：

• Placeholder 文本：13sp Roboto Regular，26% 黑色，文本框中没有分割线

2.4.1 小编辑对话框

小编辑对话框的设计方式：

• 将对话框的边缘与最近的分割线对齐，或者表格边缘
• 24 dp 的左边距和右边距
• 包含单个的文本框，应用 app 主题
• 用户通过按动回车键确认

2.4.2 大编辑对话框

大编辑对话框的设计方式：

• 将对话框的边缘与最近的分隔线或者表格边缘对齐
• 遵从对话框指南，应用 app 主题
• 用户通过点击保存按钮确认文本

2.5 操作行

行的操作体现的是内联菜单。

内联菜单的设计方式：

• 13sp Roboto Regular
• 87% 黑色
• 遵循菜单的空间和尺寸指南

版权声明：当我们认真的去做一件事的时候，就能发现其中的无穷乐趣，丰富多彩的技术宛如路上的风景，边走边欣赏。