【Material Design视觉设计语言】UI组件设计（四）：表格

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：[email protected]
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

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

一 表格的布局

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% 黑色
• 遵循菜单的空间和尺寸指南