Lists - 列表

Lists present multiple line items vertically as a single continuous element.

Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text.
Lists are best suited for similar data types.

【翻译】
列表将多个订单项作为单个连续元素垂直显示。
列表由连续的行列组成。 每行包含一个图块。 主要操作填充图块，补充操作由图标和文本表示。
列表最适合类似的数据类型。

Actions - 操作
Vertical scrolling
Filtering and sorting

【翻译】
垂直滚动
过滤和排序

**Gestures - 手势
Swipe
Drag and drop

【翻译】
滑动
拖放

Alternatives - 备择方案
Cards Grid lists

【翻译】
卡片
网格列表

Usage - 用法

A list consists of a single continuous column of tessellated sub-divisions of equal width called **rows **that function as containers for tiles.
Tiles hold content, and can vary in height within a list.

【翻译】
列表由单个连续的具有等宽的细分子细分的列组成，称为行，用作图块的容器。
图块保存内容，并且列表中的高度可以不同。

[图片上传失败...(image-ab6463-1552295102144)]
List

【翻译】
列表

image

Row and tile

【翻译】
行和图块

Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. They are optimized for reading comprehension while differentiating either between similar data types, or qualities within a single data type.

【翻译】
列表最适合呈现同类数据类型或数据类型集，如图像和文本。它们针对读取理解进行了优化，同时区分类似数据类型或单个数据类型中的质量。

****List alternatives - 列表替代: ****
If more than three lines of text need to be shown in list tiles, use **cards **instead.
If the primary distinguishing content consists of images, use a grid list.

【翻译】
如果需要在列表图块中显示三行以上的文本，请改用卡。
如果主要区分内容由图像组成，请使用网格列表。

****Density - 密度****
When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

【翻译】
当鼠标和键盘是主要输入方法时，测量可以被压缩以适应更密集的布局。

image

Typical list scanning pattern

【翻译】
典型列表扫描模式

Behavior - 行为

Scrolling - 滚动

Lists scroll only vertically.

【翻译】
列表仅垂直滚动。

Gestures - 手势

The swipe action of each tile should be consistent within lists.

Tiles may be moved between a list and drop target (similar to moving a file into a folder) and picked up and manually reordered within a list.

【翻译】
每个图块的滑动操作在列表内应保持一致。
图块可以在列表和放置目标之间移动（类似于将文件移动到文件夹中），并在列表中拾取和手动重新排序。

Filtering and sorting - 过滤和排序

List tiles can be sorted or filtered by date, file size, alphabetical order, or other parameters.

【翻译】
列表图块可以按日期，文件大小，字母顺序或其他参数进行排序或过滤。

正确的示范

Do.
Alphabetical sorting makes information easier to find.

【翻译】
正确的示范
按字母顺序排序使信息更容易找到。

错误的示范

Don't.
Don’t display information in random order; if the UI doesn’t allow the user to sort a list, your app should use a logical sort order.

【翻译】
错误的示范
不要以随机顺序显示信息;如果UI不允许用户对列表排序，则应用程序应使用逻辑排序顺序。

Content - 内容

Collections of list tiles present related content in a consistent format. Lists use hierarchy to prioritize a type or set of content, which helps users find the most important information. For example, in an email inbox app, an avatar and text snippet are emphasized over a time stamp.

List tiles may contain up to three lines of text, and text length may vary between tiles in the same list. To display more than three lines of text, use a card.

【翻译】
列表图块的集合以一致的格式呈现相关内容。 列表使用层次结构来区分一种或一组内容的优先级，这有助于用户找到最重要的信息。 例如，在电子邮件收件箱应用中，在时间戳上强调化身和文本片段。
列表图块可以包含最多三行文本，并且文本长度可以在同一列表中的图块之间变化。要显示三行以上的文本，请使用卡。

[图片上传失败...(image-670fcd-1552295102144)]
Place the most distinguishing content on the left of the tile and the least distinguishing content on the right.

【翻译】
将最有特色的内容放在图块的左侧，而将最不显着的内容放在右侧。

Specifications:
The majority of space on a list tile should be dedicated to the primary action.
Place the most distinguishing content towards the left of the tile.
In tiles with multi-line content, place the most distinguishing content in the first line.
Place supplemental actions on the right side.

【翻译】
产品规格：
列表图块上的大部分空间应专用于主要操作。
将最有区别的内容放在图块的左侧。
在具有多行内容的图块中，将最有区别的内容放在第一行。
在右侧放置补充动作。

image

The primary action takes up the majority of the space on the tile. The supplemental action goes on the right side of the tile.

【翻译】
主要操作占用图块上的大部分空间。补充动作在图块的右侧。

Actions - 操作

Primary and supplemental actions (such as play, zoom in, delete, and select) may open a subsequent view, such as a card. They do not have a submenu or an action overflow menu.

【翻译】
主要和补充动作（例如播放，放大，删除和选择）可以打开后续视图，例如卡片。它们没有子菜单或操作溢出菜单。

Primary actions - 主要操作
Fill the entire tile and are not represented solely by an individual icon or text button
Are consistent for all tiles in a specific list, such as the primary action in a list of music to play songs

【翻译】
填充整个图块，并不是单独由一个单独的图标或文本按钮表示
对于特定列表中的所有图块都是一致的，例如在音乐列表中的主要动作播放歌曲

Supplemental actions - 补充操作
Are represented by icons, secondary text, etc
Have consistent functionality throughout a list, such as an icon that indicates if someone is online
Have a consistent location in a list’s tiles

【翻译】
由图标，辅助文本等表示
在列表中具有一致的功能，例如指示某人是否在线的图标
在列表的图块中具有一致的位置

Repeating actions - 重复动作
Avoid displaying a repeated supplemental action in tiles, such as a share action in every tile.
Toggles, such as stars or pins, are exceptions because they provide unique information about each individual tile.

【翻译】
避免在图块中显示重复的补充操作，例如每个图块中的共享操作。
切换，例如星形或引脚，是例外，因为它们提供关于每个单独图块的唯一信息。

Specs - 规格

In a single-line list, each tile contains a single line of text. The amount of text can vary between tiles within the same list.

【翻译】
在单行列表中，每个图块都包含一行文本。文本的数量可以在同一列表内的图块之间变化。

image

Single-line list specs
Icon left padding: 16dp
List item left padding: 72dp
List right padding: 16dp
List right margin: 56dp

【翻译】
单行列表规格
图标左边填充：16dp
列表项目左边填充：72dp
列表右边填充：16dp
右边距：56dp

image

Example of a single-line list

【翻译】
单行列表示例

In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.

【翻译】
在两行列表中，每个图块最多包含两行文本。文本的数量可以在同一列表内的图块之间变化。

image

Two-line list specs
Icon left padding: 16dp
List item left padding: 72dp
List right padding: 16dp

【翻译】
双行列表规范
图标左边填充：16dp
列表项目左边填充：72dp
列表右边填充：16dp

[图片上传失败...(image-4341d8-1552295102144)]
Example of a two-line list

【翻译】
双行列表示例

In a three-line list, each tile contains a maximum of three lines of text.
The amount of text can vary between tiles within the same list.

【翻译】
在三行列表中，每个图块最多包含三行文本。 文本的数量可以在同一列表内的图块之间变化。

image

Three-line list specs
Icon left padding: 16dp
List item left padding: 72dp
List right padding: 16dp

【翻译】
三行列表规格
图标左边填充：16dp
列表项目左边填充：72dp
列表右边填充：16dp

image

Example of a three-line list

【翻译】
三行列表示例

Single-line list - 单行列表
Text only - 仅限文字
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.
Bottom padding is measured from the baseline.

【翻译】
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。
底部填充从基线测量。

image

Single-line list

【翻译】
单行列表

image

Example of a single-line list

【翻译】
单行列表示例

image

【翻译】
单行列表规格
字体：Roboto Regular 16sp
高：48dp
从屏幕边缘的左右填充：16dp
顶部填充：8dp

image

【翻译】
密集单行列表规范
字体：Roboto Regular 13sp
高：40dp
从屏幕边缘的左右填充：16dp
顶部填充：4dp

Icon with text - 与文本的图标
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.
Bottom padding is measured from the baseline.

【翻译】
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。
底部填充从基线测量。

[图片上传失败...(image-8da4cf-1552295102144)]
Single-line list with icon

【翻译】
带图标的单行列表

image

Example of a single-line list with icon

【翻译】
带有图标的单行列表示例

[图片上传失败...(image-b583f3-1552295102144)]
Single-line list with icon specs
Font: Roboto Regular 16sp
Height: 48dp
Icon padding, left: 16dp
Text padding, left: 72dp
Top padding: 8dp

【翻译】
带图标规格的单行列表
字体：Roboto Regular 16sp
高：48dp
图标填充，左：16dp
文本填充，左：72dp
顶部填充：8dp

image

【翻译】
包含图标规格的密集单行列表
字体：Roboto Regular 13sp
高：40dp
图标填充，左：16dp
文本填充，左：72dp
顶部填充：4dp

Avatar with text - 头像和文本
Bottom padding is measured from the baseline.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
底部填充从基线测量。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

image

Single-line item with avatar

【翻译】
带有头像的单行项目

image

Example of a single-line item with avatar

【翻译】
具有头像的单行项目示例

image

【翻译】
具有头像规格的单行项目
字体：Roboto Regular 16sp
高：56dp
头像左侧填充：16dp
文本填充，左：72dp
顶部填充：8dp

[图片上传失败...(image-92f32d-1552295102144)]
Dense single-line item with avatar specs
Font: Roboto Regular 13sp
Height: 48dp
Left avatar padding: 16dp
Text padding, left: 72dp
Top padding: 4dp

【翻译】
密集单行项目，具有头像规格
字体：Roboto Regular 13sp
高：48dp
头像左侧填充：16dp
文本填充，左：72dp
顶部填充：4dp

**Avatar with text and icon - 与文本和图标的头像 **
Right icon padding: 16dp
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.
Bottom padding is measured from the baseline.

【翻译】
右图标填充：16dp
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。
底部填充从基线测量。

[图片上传失败...(image-e6c64f-1552295102144)]
Single-line item with avatar and icon

【翻译】
具有头像和图标的单行项目

image

Example of a single-line item with avatar and icon

【翻译】
带有头像和图标的单行项目示例

image

【翻译】
具有头像和图标规格的单行项目
字体：Roboto Regular 16sp
高：56dp
头像左侧填充：16dp
右图标填充：16dp
文本填充，左：72dp
顶部填充：8dp

image

【翻译】
密集的单行项目，包含头像和图标规格
字体：Roboto Regular 13sp
高：48dp
头像左侧填充：16dp
右图标填充：16dp
文本填充，左：72dp
顶部填充：4dp

Two-line list - 双行列表
Text only - 仅限文字
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dpText padding, left: 16dp
Text padding, top and bottom: 20dp
Bottom padding is measured from the baseline.
Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：72dp
文本填充，左：16dp

文本填充，顶部和底部：20dp
底部填充从基线测量。
在列表的顶部和底部添加8dp的填充。 一个例外是在带有子标题的列表的顶部，因为子标题包含自己的填充。

image

Two-line list

【翻译】
双行列表

[图片上传失败...(image-4f90e3-1552295102145)]
Example of a two-line list

【翻译】
双行列表示例

image

【翻译】
双行列表规格：
字体：Roboto Regular 16sp
高：72dp
从屏幕边缘的左右填充：16dp
顶部填充：8dp

image

【翻译】
密集的两行列表规格：
字体：Roboto Regular 13sp
高：60dp
从屏幕边缘的左右填充：16dp
顶部填充：4dp

Icon with text - 与文本的图标
Primary text font: Roboto Regular 16spSecondary text font: Roboto Regular 14spTile height: 72dpLeft icon padding: 16dpText padding, left: 72dpText padding, top and bottom: 20dpBottom padding is measured from the baseline.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：72dp
左图标填充：16dp
文本填充，左：72dp
文本填充，顶部和底部：20dp
底部填充从基线测量。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

image

Two-line list with icon

【翻译】
双行列表图标

image

Example of a two-line list with icon

【翻译】
带有图标的双行列表示例

image

【翻译】
带有图标规格的双行列表：
字体：Roboto Regular 16sp
高：72dp
图标左边填充：16dp
文本左边填充：72dp
填充以上列表：8dp
文本右边填充：16dp

image

【翻译】
包含图标规格的密集两行列表：
字体：Roboto Regular 13sp
图块高度：60dp
图标左边填充：16dp
文本左边填充：72dp
填充以上列表：4dp
文本右边填充：16dp

Avatar with text - 头像和文本
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dpLeft avatar padding: 16dp
Text padding, left: 72dp
Text padding, top and bottom: 20dp
Bottom padding is measured from the baseline.
Center-align icon with text area.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
头像和文本
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：72dp
头像左侧填充：16dp
文本填充，左：72dp
文本填充，顶部和底部：20dp
底部填充从基线测量。
中心对齐图标与文本区域。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

image

Two-line list with avatar

【翻译】
带有头像的双行列表

[图片上传失败...(image-d75420-1552295102145)]
Example of a two-line list with avatar

【翻译】
具有头像的两行列表示例

image

【翻译】
包含头像规格的双行列表：
字体：Roboto Regular 16sp
图块高度：72dp
图标左边填充：16dp
文本左边填充：72dp
填充以上列表：8dp
文本右边填充：16dp

image

【翻译】
包含头像规格的密集两行列表：
字体：Roboto Regular 13sp
图块高度：60dp
图标左边填充：16dp
文本左边填充：72dp
填充以上列表：4dp
文本右边填充：16dp

Avatar with text and icon - 与文本和图标的头像
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dpLeft avatar padding: 16dp
Text padding, left: 72dp
Right icon padding: 16dp
Bottom padding is measured from the baseline.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：72dp
头像左侧填充：16dp
文本填充，左：72dp
右图标填充：16dp
底部填充从基线测量。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

image

Avatar with text and icon

【翻译】
与文本和图标的头像

[图片上传失败...(image-745ec4-1552295102145)]
Example of an avatar with text and icon

【翻译】
具有文本和图标的头像的示例

image

【翻译】
与文本和图标的头像
字体：Roboto Regular 16sp
图块高度：72dp
图标左边填充：16dp
文本左边填充：72dp
填充以上列表：8dp
文本右边填充：16dp

image

【翻译】
与文本和图标的密集的头像
字体：Roboto Regular 13sp
图块高度：60dp
图标左边填充：16dp
文本左边填充：72dp
填充以上列表：4dp
文本右边填充：16dp

Three-line list - 三行列表
Text only - 仅限文字
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dp
Text padding, left: 16dp
Text padding, top: 16dp
Text padding, bottom: 20dp
Bottom padding is measured from the baseline.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：88dp
文本填充，左：16dp
文本填充，顶部：16dp
文本填充，底部：20dp
底部填充从基线测量。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

[图片上传失败...(image-bcd8cc-1552295102145)]
Three-line list

【翻译】
三行列表

[图片上传失败...(image-f4ece2-1552295102145)]
Example of a three-line list

【翻译】
三行列表示例

image

【翻译】
三行列表规格：
字体：Roboto Regular 16sp
图块高度：88dp
文本左边填充：16dp
文本右边填充：16dp
填充以上列表：8dp

[图片上传失败...(image-bf5853-1552295102145)]
Dense three-line list specs:
Font: Roboto Regular 13sp
Tile height: 76dp
Text left padding: 16dp
Text right padding: 16dp
Padding above list: 4dp

【翻译】
密集三行列表规格：
字体：Roboto Regular 13sp
图块高度：76dp
文本左边填充：16dp
文本右边填充：16dp
填充以上列表：4dp

Icon with text - 与文本的图标
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dp
Left icon padding: 16dp
Text left padding: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp
Bottom padding is measured from the baseline.
Top-align icon with primary text.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：88dp
左图标填充：16dp
文本左边填充：72dp
文本填充，顶部：16dp
文本填充，底部：20dp
底部填充从基线测量。
带有主要文本的顶部对齐图标。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

[图片上传失败...(image-e2973f-1552295102145)]
Three-line list with icon

【翻译】
三线列表带图标

[图片上传失败...(image-d71461-1552295102145)]
Example of a three-line list with icon

【翻译】
带有图标的三行列表示例

image

【翻译】
带有图标规格的三行列表：
字体：Roboto Regular 16sp
图块高度：88dp
图标左边填充：16dp
文本左边填充：72dp
文本填充右侧：16dp
填充以上列表：8dp

[图片上传失败...(image-af0e39-1552295102145)]
Dense three-line list with icon specs:
Font: Roboto Regular 13sp
Tile height: 76dp
Icon left padding: 16dp
Text left padding: 72dp
Text padding right: 16dp
Padding above list: 4dp

【翻译】
包含图标规格的密集三行列表：
字体：Roboto Regular 13sp
图块高度：76dp
图标左边填充：16dp
文本左边填充：72dp
文本填充右侧：16dp
填充以上列表：4dp

Avatar with text - 头像和文本
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dpLeft avatar padding: 16dp
Left text padding: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp
Bottom padding is measured from the baseline.
Top-align avatar with primary text.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
图块高度：88dp
头像左侧填充：16dp
左边文本填充：72dp
文本填充，顶部：16dp
文本填充，底部：20dp
底部填充从基线测量。
将头像与主文本顶部对齐。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

[图片上传失败...(image-a87385-1552295102145)]
Three-line list with avatar

【翻译】
三线列表带头像

image

Example of a three-line list with avatar

【翻译】
带有头像的三行列表示例

image

【翻译】
具有头像规格的三行列表：
字体：Roboto Regular 16sp
图块高度：88dp
填充以上列表：8dp
头像左侧的填充：16dp
文本左边填充：72dp
文本右边填充：16dp

image

【翻译】
包含头像规格的密集三行列表：
字体：Roboto Regular 13sp
图块高度：76dp
填充以上列表：4dp
头像左侧的填充：16dp
文本左边填充：72dp
文本右边填充：16dp

Avatar with text and icon - 与文本和图标的头像
Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dpLeft avatar padding: 16dp
Text left padding: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp
Right icon padding: 16dp
Bottom padding is measured from the baseline.
Top-align avatar and icon with primary text.
Add 8dp of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.

【翻译】
主文本字体：Roboto Regular 16sp
次要文字字体：Roboto Regular 14sp
瓷砖高度：88dp
头像左侧填充：16dp
文本左边填充：72dp
文本填充，顶部：16dp
文本填充，底部：20dp
右图标填充：16dp
底部填充从基线测量。
使用主要文字顶部对齐头像和图标。
在列表的顶部和底部添加8dp的填充，除了具有自己的填充的子标题的列表。

image

Three-line list with avatar and icon

【翻译】
三线列表与头像和图标

image

Example of a three-line list with avatar and icon

【翻译】
具有头像和图标的三行列表示例

[图片上传失败...(image-3ac033-1552295102145)]
Three-line list with avatar and icon specs:
Font: Roboto Regular 16sp
Tile height: 88dp
Left avatar padding: 16dp
Text left padding: 72dp
Padding above list: 8dp
Right and left padding by the icon: 16dp

【翻译】
包含头像和图标规格的三行列表：
字体：Roboto Regular 16sp
图块高度：88dp
头像左侧填充：16dp
文本左边填充：72dp
填充以上列表：8dp
右边和左边填充的图标：16dp

[图片上传失败...(image-bd440-1552295102145)]
Dense three-line list with avatar and icon specs:
Font: Roboto Regular 13sp
Tile height: 76dp
Left avatar padding: 16dp
Text left padding: 72dp
Padding above list: 4dp
Right and left padding by the icon: 16dp

【翻译】
包含头像和图标规格的密集三行列表：
字体：Roboto Regular 13sp
图块高度：76dp
头像左侧填充：16dp
文本左边填充：72dp
填充以上列表：4dp
右边和左边填充的图标：16dp