0.0°

谷歌数据表格设计规范

关注

7643 0 6 2020-01-28

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

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

1.用法

2.构成

3.交互操作

4.深色主题规范

5.参数尺寸

一.用法

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

数据表可以包含：

数据表设计原则：

1.组织有序

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

2.交互原则

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

3.易用性

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

二.构成

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

1.表格

列

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

列间距

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

文本

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

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

三.交互操作
排序

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

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

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

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

行悬停

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

列悬停

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