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