组件 列表

列表

列表是一个连续的元素,展示了多个垂直排列的项目。

列表由多个连续的行组成,每行都有一个磁帖。整个磁帖作为主要的操作,次要操作通过图标或文本展示。

列表最适用于相似的数据类型。

操作

垂直滚蛋
筛选和排序

手势

滑动
拖放

替代方案

卡片
网格列表

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

列表是由多个等宽的组成的,行里面包含了磁帖

磁帖中包含内容,并且可以有不同的高度。

列表

行和磁帖

列表最适合用于呈现同类数据或数据类型集,例如图片和文本。列表有利于阅读理解,并且利于辨别类似数据或单个数据类型的性质。

替代方案

  • 如果有超过三行的文本需要显示,请使用卡片来替代。
  • 如果主要内容是图片,请使用网格列表

紧凑型

在以鼠标和键盘为主要输入方式的设备上,可以压缩列表尺寸以适应更密集的布局。

典型列表浏览方式

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

滚动

列表只能垂直滚动。

手势

列表中所有磁帖的滑动操作应保持一致。

磁帖可以在列表间相互移动(类似于移动文件到一个文件夹),或者在同个列表内手动排序。

筛选和排序

列表磁帖可以按日期、文件大小、字母顺序或其他参数进行排序和筛选。

按字母排序使得信息更容易被找到。

不要按随机顺序显示信息;如果 UI 不允许用户对列表进行排序,则应该默认使用一种更合理的排序方式。

内容 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

如果列表之间的内容相关,它们的磁帖都应当使用一致的格式来呈现内容。列表利用视觉层级确定一类或一组内容的优先级,这有助于用户找到最重要的信息。例如,在邮件应用中,头像和内容摘要比邮件的时间更重要。

磁帖最多可以包含三行文本,并且同个列表中的不同磁帖的文本长度可以不同。如果要显示超过三行的文本,请使用卡片。

把最易识别的元素放在磁帖的左侧,不容易识别的元素放在磁帖的右侧。

规格:

  • 磁帖中的大部分空间应当用于主要操作。
  • 把最易识别的元素放在磁帖的左侧。
  • 多行文本的磁帖中,把最容易识别的文本放在首行。
  • 次要操作放在磁帖的右侧。

主要操作占据了磁帖的大部分空间。次要操作放在磁帖的右侧。

操作 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

主要操作和次要操作(例如播放、缩放、删除和选择)可能会打开后续视图,例如卡片,但是没有子菜单或弹出菜单。

主要操作

  • 填满整个磁帖,而不能显示为单独的图标或文本按钮
  • 同个列表的所有磁帖的主要操作都是相同的,例如音乐列表中的主要操作是播放歌曲

次要操作

  • 表示为图标、次要文本等
  • 同个列表所代表的功能相同,例如图标可以表示某人是否在线。
  • 在同个列表的磁帖中所处的位置相同。

重复操作

避免在磁帖中显示重复的次要操作,例如在每个磁帖上都添加一个分享操作。

开关是个例外,例如加星、置顶,因为它们所提供的操作是针对单独的磁帖的。

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

单行列表中,每个磁帖都包含一行文本。同个列表中,各磁帖中所包含的字数可以不同。

单行列表规格

图标左边距:16dp
列表内容左边距:72dp
列表右边距:16dp
列表右侧外边距:56dp

单行列表示例

两行列表中,每个磁帖都包含两行文本。同个列表中,各磁帖中所包含的字数可以不同。

两行列表规格

图标左边距:16dp
列表内容左边距:72dp
列表右边距:16dp

两行列表示例

三行列表中,每个磁帖都包含最多的三行文本。

同个列表中,各磁帖中所包含的字数可以不同。

三行列表规格

图标左边距:16dp
列表内容左边距:72dp
列表右边距:16dp

三行列表示例

单行列表

仅文本

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

底部边距从基线开始测量。

单行列表示例

单行列表示例

单行列表规格

字体:16sp Roboto Regular
高度:48dp
距离屏幕的左右边距:16dp
上边距:8dp

紧凑型单行列表规格

字体:13sp Roboto Regular
高度:40dp
距离屏幕的左右边距:16dp
上边距:4dp

图标和文本

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

底部边距从基线开始测量。

带图标的单行列表示例

带图标的单行列表示例

带图标的单行列表规格

字体:16sp Roboto Regular
高度:48dp
图标左边距:16dp
文本左边距:72dp
上边距:8dp

紧凑型带图标的单行列表规格

字体:13sp Roboto Regular
高度:40dp
图标左边距:16dp
文本左边距:72dp
上边距:4dp

头像和文本

底部边距从基线开始测量。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

带头像的单行列表

带头像的单行列表

带头像的单行列表规格

字体:16sp Roboto Regular
高度:56dp
头像左边距:16dp
文本左边距:72dp
上边距:8dp

紧凑型带头像的单行列表规格

字体:13sp Roboto Regular
高度:48dp
头像左边距:16dp
文本左边距:72dp
上边距:4dp

头像、文本和图标

右侧图标边距:16dp

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

底部边距从基线开始测量。

带头像和图标的单行列表示例

带头像和图标的单行列表示例

带头像和图标的单行列表规格

字体:16sp Roboto Regular
高度:56dp
头像左边距:16dp
右侧图标边距:16dp
文本左边距:72dp
上边距:8dp

紧凑型带头像和图标的单行列表规格

字体:13sp Roboto Regular
高度:48dp
头像左边距:16dp
右侧图标边距:16dp
文本左边距:72dp
上边距:4dp

两行列表

仅文本

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:72dp
文本左边距:16dp
文本上下边距:20dp

底部边距从基线开始测量。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

两行列表

两行列表

两行列表规格:

字体:16sp Roboto Regular
高度:72dp
距离屏幕的左右边距:16dp
上边距:8dp

紧凑型两行列表规格:

字体:13sp Roboto Regular
高度:60dp
距离屏幕的左右边距:16dp
上边距:4dp

图标和文本

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:72dp
左侧图标边距:16dp
文本左边距:72dp
文本上下边距:20dp
底部边距从基线开始测量。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

带图标的两行列表

带图标的两行列表

带图标的两行列表规格

字体:16sp Roboto Regular
高度:72dp
图标左边距:16dp
文本左边距:72dp
列表上边距:8dp
文本右边距:16dp

紧凑型带图标的两行列表规格

字体:13sp Roboto Regular
磁帖高度:60dp
图标左边距:16dp
文本左边距:72dp
列表上边距:4dp
文本右边距:16dp

头像和文本

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:72dp
头像左边距:16dp
文本左边距:72dp
文本上下边距:20dp

底部边距从基线开始测量。

图标与文本居中对齐。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

带头像的两行列表

带头像的两行列表

带头像的两行列表规格

字体:16sp Roboto Regular
磁帖高度:72dp
图标左边距:16dp
文本左边距:72dp
列表上边距:8dp
文本右边距:16dp

紧凑型带头像的两行列表规格

字体:13sp Roboto Regular
磁帖高度:60dp
图标左边距:16dp
文本左边距:72dp
列表上边距:4dp
文本右边距:16dp

头像、文本和图标

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:72dp
头像左边距:16dp
文本左边距:72dp

右侧图标边距:16dp

底部边距从基线开始测量。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

头像、文本和图标

Example of an 头像、文本和图标列表

头像、文本和图标

字体:16sp Roboto Regular
磁帖高度:72dp
图标左边距:16dp
文本左边距:72dp
列表上边距:8dp
文本右边距:16dp

紧凑型头像、文本和图标列表

字体:13sp Roboto Regular
磁帖高度:60dp
图标左边距:16dp
文本左边距:72dp
列表上边距:4dp
文本右边距:16dp

三行列表

仅文本

主要文本字体:16sp Roboto Regular

次要文本字体:14sp Roboto Regular
磁帖高度:88dp
文本左边距:16dp
文本上边距:16dp
文本下边距:20dp

底部边距从基线开始测量。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

三行列表示例

三行列表示例

三行列表规格

字体:16sp Roboto Regular
磁帖高度:88dp
文本左边距:16dp
文本右边距:16dp
列表上边距:8dp

紧凑型三行列表规格

字体:13sp Roboto Regular
磁帖高度:76dp
文本左边距:16dp
文本右边距:16dp
列表上边距:4dp

图标和文本

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:88dp
左侧图标边距:16dp
文本左边距:72dp
文本上边距:16dp
文本下边距:20dp

底部边距从基线开始测量。

图标与主要文本上对齐。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

带图标的三行列表示例

带图标的三行列表示例

带图标的三行列表规格

字体:16sp Roboto Regular
磁帖高度:88dp
图标左边距:16dp
文本左边距:72dp
文本右边距:16dp
列表上边距:8dp

紧凑型带图标的三行列表规格

字体:13sp Roboto Regular
磁帖高度:76dp
图标左边距:16dp
文本左边距:72dp
文本右边距:16dp
列表上边距:4dp

头像和文本

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:88dp
头像左边距:16dp
文本左边距:72dp
文本上边距:16dp
文本下边距:20dp

底部边距从基线开始测量。

头像和主要文本上对齐。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

带头像的三行列表示例

带头像的三行列表示例

带头像的三行列表规格

字体:16sp Roboto Regular
磁帖高度:88dp
列表上边距:8dp
头像左边距:16dp
文本左边距:72dp
文本右边距:16dp

紧凑型带头像的三行列表规格

字体:13sp Roboto Regular
磁帖高度:76dp
列表上边距:4dp
头像左边距:16dp
文本左边距:72dp
文本右边距:16dp

头像、文本和图标

主要文本字体:16sp Roboto Regular
次要文本字体:14sp Roboto Regular
磁帖高度:88dp
头像左边距:16dp
文本左边距:72dp
文本上边距:16dp
文本下边距:20dp

右侧图标边距:16dp

底部边距从基线开始测量。

头像、图标均和主要文本上对齐。

在列表上下添加 8dp 的内边距,有组标题的列表有自身的边距,可以不添加。

带头像和图标的三行列表

带头像和图标的三行列表


带头像和图标的三行列表规格

字体:16sp Roboto Regular
磁帖高度:88dp
头像左边距:16dp
文本左边距:72dp
列表上边距:8dp
图标的左右边距:16dp

紧凑型带头像和图标的三行列表规格

字体:13sp Roboto Regular
磁帖高度:76dp
头像左边距:16dp
文本左边距:72dp
列表上边距:4dp
图标的左右边距:16dp