自从国内C端产品用户到达天花板后，B端产品渐渐流行起来，在做B端产品设计的过程中基本离不开表格的设计，本文主要介绍谷歌的数据表格设计规范，希望给大家带来一些启发

谷歌数据表格设计规范主要从五个方面来进行阐述：

1.用法

2.构成

3.交互操作

4.深色主题规范

5.参数尺寸

一.用法

数据表以行和列的形式展示信息，以易于扫描的方式组织信息，便于用户查找和理解信息。

数据表可以包含：

• 1.交互式组件（例如，按钮或菜单）

• 2.非交互元素（例如状态）

• 3.查询和操作数据的功能

数据表设计原则：

1.组织有序

表格内的信息呈现应该具备一定的组织原则，例如按照信息优先级原则或首字母A-Z排序。

2.交互原则

数据表格应该允许用户进行交互操作，使用户对表格信息进行自定义操作和展示

3.易用性

表格信息的呈现应该遵循一定的逻辑原则，便于用户理解表格内容

二.构成

数据表的内容由以下部分构成

1.表格

2.列标题名称

3.排序按钮

4.行复选框

5.行数

列行高

每列行高为52dp，列标题行高为56dp（比常规行高4dp）

列间距

列之间的间距填充为32dp或更多

文本

列标题文本使用中等粗体字体（以区别于正文）。

长于列宽的文本将被省略号省略。鼠标悬停时，显示全称。

三.交互操作

排序

为了帮助用户对信息进行排序，默认情况下，列可以显示列排序。

列标题的名称旁边放置一个向下或向上的箭头图标来表示列的排列顺序。用户点击标题名称或箭头图标可以进行反向排序，点击后，箭头图标旋转180度。向上箭头指示按列排序（升序），表格反向排序：向下箭头表示该列以降序排列。

行复选框

选中行复选框后，该行应显示背景色。

当用户发大屏幕，显示器一屏的宽度显示不下复选框以及其他所有列的信息时，背景色可以提示用户选择是哪一行信息

行悬停

当用户将鼠标悬停在一行上时，该行应该显示背景色。

列悬停

当用户将鼠标悬停在列标题上时：

1.显示完整的列名称或详细描述

2.如果启用了排序，将鼠标悬停在列名称上时，会显示或向下或向上箭头图标。

内联菜单

在表格的信息里面可以增加菜单选择，来展示更多的信息

分页

分页控件一般位于表格底部，提供对所有页面的快速访问，同时暗示存在更多页面。

包括：

• 每页的行数

• 左右箭头可浏览页面

• 总行数，包括当前正在查看的范围

四.深色主题规范

背景色:#3C3C46 100%          正文颜色:#FFFFFF 100%        表头颜色：#FFFFFF 60%

线颜色：#FFFFFF  12%     

正文字号：14px

五.尺寸规范

触摸目标区域

交互式元素的最小点击区域是48 x 48 dp。点击区域可以大于图标大小

表格单元格填充

• 表格单元顶部和底部填充：6dp

• 表格单元格左填充：8dp

  

圆角

数据表默认情况下为带有细微的圆角的圆角矩形。圆角半径：4dp

数值对齐

将数字向右对齐以提高可扫描性。