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.

【翻譯】
列表將多個訂單項作為單個連續(xù)元素垂直顯示。
列表由連續(xù)的行列組成退敦。 每行包含一個圖塊冤今。 主要操作填充圖塊纽甘，補(bǔ)充操作由圖標(biāo)和文本表示鱼鼓。
列表最適合類似的數(shù)據(jù)類型钉跷。

Actions - 操作
Vertical scrolling
Filtering and sorting

【翻譯】
垂直滾動
過濾和排序

**Gestures - 手勢
Swipe
Drag and drop

【翻譯】
滑動
拖放

Alternatives - 備擇方案
Cards Grid lists

【翻譯】
卡片
網(wǎng)格列表

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.

【翻譯】
列表由單個連續(xù)的具有等寬的細(xì)分子細(xì)分的列組成，稱為行疆前，用作圖塊的容器寒跳。
圖塊保存內(nèi)容，并且列表中的高度可以不同竹椒。

[圖片上傳失敗...(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.

【翻譯】
列表最適合呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集童太，如圖像和文本。它們針對讀取理解進(jìn)行了優(yōu)化胸完，同時區(qū)分類似數(shù)據(jù)類型或單個數(shù)據(jù)類型中的質(zhì)量书释。

****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.

【翻譯】
如果需要在列表圖塊中顯示三行以上的文本，請改用卡赊窥。
如果主要區(qū)分內(nèi)容由圖像組成爆惧，請使用網(wǎng)格列表。

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

【翻譯】
當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時锨能，測量可以被壓縮以適應(yīng)更密集的布局检激。

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.

【翻譯】
每個圖塊的滑動操作在列表內(nèi)應(yīng)保持一致。
圖塊可以在列表和放置目標(biāo)之間移動（類似于將文件移動到文件夾中）叔收，并在列表中拾取和手動重新排序。

Filtering and sorting - 過濾和排序

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

【翻譯】
列表圖塊可以按日期傲隶，文件大小饺律，字母順序或其他參數(shù)進(jìn)行排序或過濾。

正確的示范

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.

【翻譯】
錯誤的示范
不要以隨機(jī)順序顯示信息;如果UI不允許用戶對列表排序复濒，則應(yīng)用程序應(yīng)使用邏輯排序順序。

Content - 內(nèi)容

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.

【翻譯】
列表圖塊的集合以一致的格式呈現(xiàn)相關(guān)內(nèi)容乒省。 列表使用層次結(jié)構(gòu)來區(qū)分一種或一組內(nèi)容的優(yōu)先級巧颈，這有助于用戶找到最重要的信息蝎毡。 例如污朽，在電子郵件收件箱應(yīng)用中，在時間戳上強(qiáng)調(diào)化身和文本片段孔轴。
列表圖塊可以包含最多三行文本蛆封，并且文本長度可以在同一列表中的圖塊之間變化唇礁。要顯示三行以上的文本，請使用卡惨篱。

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

【翻譯】
將最有特色的內(nèi)容放在圖塊的左側(cè)盏筐，而將最不顯著的內(nèi)容放在右側(cè)。

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.

【翻譯】
產(chǎn)品規(guī)格：
列表圖塊上的大部分空間應(yīng)專用于主要操作砸讳。
將最有區(qū)別的內(nèi)容放在圖塊的左側(cè)琢融。
在具有多行內(nèi)容的圖塊中，將最有區(qū)別的內(nèi)容放在第一行簿寂。
在右側(cè)放置補(bǔ)充動作漾抬。

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.

【翻譯】
主要操作占用圖塊上的大部分空間。補(bǔ)充動作在圖塊的右側(cè)陶耍。

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.

【翻譯】
主要和補(bǔ)充動作（例如播放奋蔚，放大，刪除和選擇）可以打開后續(xù)視圖烈钞，例如卡片泊碑。它們沒有子菜單或操作溢出菜單。

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

【翻譯】
填充整個圖塊毯欣，并不是單獨(dú)由一個單獨(dú)的圖標(biāo)或文本按鈕表示
對于特定列表中的所有圖塊都是一致的馒过，例如在音樂列表中的主要動作播放歌曲

Supplemental actions - 補(bǔ)充操作
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

【翻譯】
由圖標(biāo)，輔助文本等表示
在列表中具有一致的功能酗钞，例如指示某人是否在線的圖標(biāo)
在列表的圖塊中具有一致的位置

Repeating actions - 重復(fù)動作
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.

【翻譯】
避免在圖塊中顯示重復(fù)的補(bǔ)充操作腹忽，例如每個圖塊中的共享操作来累。
切換，例如星形或引腳窘奏，是例外嘹锁，因?yàn)樗鼈兲峁╆P(guān)于每個單獨(dú)圖塊的唯一信息。

Specs - 規(guī)格

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.

【翻譯】
在單行列表中着裹，每個圖塊都包含一行文本领猾。文本的數(shù)量可以在同一列表內(nèi)的圖塊之間變化。

image

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

【翻譯】
單行列表規(guī)格
圖標(biāo)左邊填充：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.

【翻譯】
在兩行列表中骇扇，每個圖塊最多包含兩行文本摔竿。文本的數(shù)量可以在同一列表內(nèi)的圖塊之間變化。

image

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

【翻譯】
雙行列表規(guī)范
圖標(biāo)左邊填充：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.

【翻譯】
在三行列表中少孝，每個圖塊最多包含三行文本继低。 文本的數(shù)量可以在同一列表內(nèi)的圖塊之間變化。

image

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

【翻譯】
三行列表規(guī)格
圖標(biāo)左邊填充：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的填充稍走，除了具有自己的填充的子標(biāo)題的列表袁翁。
底部填充從基線測量。

image

Single-line list

【翻譯】
單行列表

image

Example of a single-line list

【翻譯】
單行列表示例

image

【翻譯】
單行列表規(guī)格
字體：Roboto Regular 16sp
高：48dp
從屏幕邊緣的左右填充：16dp
頂部填充：8dp

image

【翻譯】
密集單行列表規(guī)范
字體：Roboto Regular 13sp
高：40dp
從屏幕邊緣的左右填充：16dp
頂部填充：4dp

Icon with text - 與文本的圖標(biāo)
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的填充钱磅，除了具有自己的填充的子標(biāo)題的列表梦裂。
底部填充從基線測量。

[圖片上傳失敗...(image-8da4cf-1552295102144)]
Single-line list with icon

【翻譯】
帶圖標(biāo)的單行列表

image

Example of a single-line list with icon

【翻譯】
帶有圖標(biāo)的單行列表示例

[圖片上傳失敗...(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

【翻譯】
帶圖標(biāo)規(guī)格的單行列表
字體：Roboto Regular 16sp
高：48dp
圖標(biāo)填充盖淡，左：16dp
文本填充年柠，左：72dp
頂部填充：8dp

image

【翻譯】
包含圖標(biāo)規(guī)格的密集單行列表
字體：Roboto Regular 13sp
高：40dp
圖標(biāo)填充，左：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的填充，除了具有自己的填充的子標(biāo)題的列表味赃。

image

Single-line item with avatar

【翻譯】
帶有頭像的單行項目

image

Example of a single-line item with avatar

【翻譯】
具有頭像的單行項目示例

image

【翻譯】
具有頭像規(guī)格的單行項目
字體：Roboto Regular 16sp
高：56dp
頭像左側(cè)填充：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

【翻譯】
密集單行項目，具有頭像規(guī)格
字體：Roboto Regular 13sp
高：48dp
頭像左側(cè)填充：16dp
文本填充心俗，左：72dp
頂部填充：4dp

**Avatar with text and icon - 與文本和圖標(biāo)的頭像 **
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.

【翻譯】
右圖標(biāo)填充：16dp
在列表的頂部和底部添加8dp的填充傲武，除了具有自己的填充的子標(biāo)題的列表。
底部填充從基線測量城榛。

[圖片上傳失敗...(image-e6c64f-1552295102144)]
Single-line item with avatar and icon

【翻譯】
具有頭像和圖標(biāo)的單行項目

image

Example of a single-line item with avatar and icon

【翻譯】
帶有頭像和圖標(biāo)的單行項目示例

image

【翻譯】
具有頭像和圖標(biāo)規(guī)格的單行項目
字體：Roboto Regular 16sp
高：56dp
頭像左側(cè)填充：16dp
右圖標(biāo)填充：16dp
文本填充揪利，左：72dp
頂部填充：8dp

image

【翻譯】
密集的單行項目，包含頭像和圖標(biāo)規(guī)格
字體：Roboto Regular 13sp
高：48dp
頭像左側(cè)填充：16dp
右圖標(biāo)填充：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的填充甜刻。 一個例外是在帶有子標(biāo)題的列表的頂部绍撞，因?yàn)樽訕?biāo)題包含自己的填充。

image

Two-line list

【翻譯】
雙行列表

[圖片上傳失敗...(image-4f90e3-1552295102145)]
Example of a two-line list

【翻譯】
雙行列表示例

image

【翻譯】
雙行列表規(guī)格：
字體：Roboto Regular 16sp
高：72dp
從屏幕邊緣的左右填充：16dp
頂部填充：8dp

image

【翻譯】
密集的兩行列表規(guī)格：
字體：Roboto Regular 13sp
高：60dp
從屏幕邊緣的左右填充：16dp
頂部填充：4dp

Icon with text - 與文本的圖標(biāo)
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
左圖標(biāo)填充：16dp
文本填充得院，左：72dp
文本填充傻铣，頂部和底部：20dp
底部填充從基線測量。
在列表的頂部和底部添加8dp的填充尿招，除了具有自己的填充的子標(biāo)題的列表矾柜。

image

Two-line list with icon

【翻譯】
雙行列表圖標(biāo)

image

Example of a two-line list with icon

【翻譯】
帶有圖標(biāo)的雙行列表示例

image

【翻譯】
帶有圖標(biāo)規(guī)格的雙行列表：
字體：Roboto Regular 16sp
高：72dp
圖標(biāo)左邊填充：16dp
文本左邊填充：72dp
填充以上列表：8dp
文本右邊填充：16dp

image

【翻譯】
包含圖標(biāo)規(guī)格的密集兩行列表：
字體：Roboto Regular 13sp
圖塊高度：60dp
圖標(biāo)左邊填充：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
頭像左側(cè)填充：16dp
文本填充，左：72dp
文本填充就谜，頂部和底部：20dp
底部填充從基線測量。
中心對齊圖標(biāo)與文本區(qū)域里覆。
在列表的頂部和底部添加8dp的填充丧荐，除了具有自己的填充的子標(biāo)題的列表。

image

Two-line list with avatar

【翻譯】
帶有頭像的雙行列表

[圖片上傳失敗...(image-d75420-1552295102145)]
Example of a two-line list with avatar

【翻譯】
具有頭像的兩行列表示例

image

【翻譯】
包含頭像規(guī)格的雙行列表：
字體：Roboto Regular 16sp
圖塊高度：72dp
圖標(biāo)左邊填充：16dp
文本左邊填充：72dp
填充以上列表：8dp
文本右邊填充：16dp

image

【翻譯】
包含頭像規(guī)格的密集兩行列表：
字體：Roboto Regular 13sp
圖塊高度：60dp
圖標(biāo)左邊填充：16dp
文本左邊填充：72dp
填充以上列表：4dp
文本右邊填充：16dp

Avatar with text and icon - 與文本和圖標(biāo)的頭像
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
頭像左側(cè)填充：16dp
文本填充喧枷，左：72dp
右圖標(biāo)填充：16dp
底部填充從基線測量虹统。
在列表的頂部和底部添加8dp的填充，除了具有自己的填充的子標(biāo)題的列表隧甚。

image

Avatar with text and icon

【翻譯】
與文本和圖標(biāo)的頭像

[圖片上傳失敗...(image-745ec4-1552295102145)]
Example of an avatar with text and icon

【翻譯】
具有文本和圖標(biāo)的頭像的示例

image

【翻譯】
與文本和圖標(biāo)的頭像
字體：Roboto Regular 16sp
圖塊高度：72dp
圖標(biāo)左邊填充：16dp
文本左邊填充：72dp
填充以上列表：8dp
文本右邊填充：16dp

image

【翻譯】
與文本和圖標(biāo)的密集的頭像
字體：Roboto Regular 13sp
圖塊高度：60dp
圖標(biāo)左邊填充：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的填充，除了具有自己的填充的子標(biāo)題的列表帽借。

[圖片上傳失敗...(image-bcd8cc-1552295102145)]
Three-line list

【翻譯】
三行列表

[圖片上傳失敗...(image-f4ece2-1552295102145)]
Example of a three-line list

【翻譯】
三行列表示例

image

【翻譯】
三行列表規(guī)格：
字體：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

【翻譯】
密集三行列表規(guī)格：
字體：Roboto Regular 13sp
圖塊高度：76dp
文本左邊填充：16dp
文本右邊填充：16dp
填充以上列表：4dp

Icon with text - 與文本的圖標(biāo)
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
左圖標(biāo)填充：16dp
文本左邊填充：72dp
文本填充珠增，頂部：16dp
文本填充，底部：20dp
底部填充從基線測量砍艾。
帶有主要文本的頂部對齊圖標(biāo)蒂教。
在列表的頂部和底部添加8dp的填充，除了具有自己的填充的子標(biāo)題的列表脆荷。

[圖片上傳失敗...(image-e2973f-1552295102145)]
Three-line list with icon

【翻譯】
三線列表帶圖標(biāo)

[圖片上傳失敗...(image-d71461-1552295102145)]
Example of a three-line list with icon

【翻譯】
帶有圖標(biāo)的三行列表示例

image

【翻譯】
帶有圖標(biāo)規(guī)格的三行列表：
字體：Roboto Regular 16sp
圖塊高度：88dp
圖標(biāo)左邊填充：16dp
文本左邊填充：72dp
文本填充右側(cè)：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

【翻譯】
包含圖標(biāo)規(guī)格的密集三行列表：
字體：Roboto Regular 13sp
圖塊高度：76dp
圖標(biāo)左邊填充：16dp
文本左邊填充：72dp
文本填充右側(cè)：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
頭像左側(cè)填充：16dp
左邊文本填充：72dp
文本填充凝垛，頂部：16dp
文本填充，底部：20dp
底部填充從基線測量蜓谋。
將頭像與主文本頂部對齊梦皮。
在列表的頂部和底部添加8dp的填充，除了具有自己的填充的子標(biāo)題的列表孤澎。

[圖片上傳失敗...(image-a87385-1552295102145)]
Three-line list with avatar

【翻譯】
三線列表帶頭像

image

Example of a three-line list with avatar

【翻譯】
帶有頭像的三行列表示例

image

【翻譯】
具有頭像規(guī)格的三行列表：
字體：Roboto Regular 16sp
圖塊高度：88dp
填充以上列表：8dp
頭像左側(cè)的填充：16dp
文本左邊填充：72dp
文本右邊填充：16dp

image

【翻譯】
包含頭像規(guī)格的密集三行列表：
字體：Roboto Regular 13sp
圖塊高度：76dp
填充以上列表：4dp
頭像左側(cè)的填充：16dp
文本左邊填充：72dp
文本右邊填充：16dp

Avatar with text and icon - 與文本和圖標(biāo)的頭像
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
頭像左側(cè)填充：16dp
文本左邊填充：72dp
文本填充届氢，頂部：16dp
文本填充，底部：20dp
右圖標(biāo)填充：16dp
底部填充從基線測量覆旭。
使用主要文字頂部對齊頭像和圖標(biāo)退子。
在列表的頂部和底部添加8dp的填充岖妄，除了具有自己的填充的子標(biāo)題的列表。

image

Three-line list with avatar and icon

【翻譯】
三線列表與頭像和圖標(biāo)

image

Example of a three-line list with avatar and icon

【翻譯】
具有頭像和圖標(biāo)的三行列表示例

[圖片上傳失敗...(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

【翻譯】
包含頭像和圖標(biāo)規(guī)格的三行列表：
字體：Roboto Regular 16sp
圖塊高度：88dp
頭像左側(cè)填充：16dp
文本左邊填充：72dp
填充以上列表：8dp
右邊和左邊填充的圖標(biāo)：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

【翻譯】
包含頭像和圖標(biāo)規(guī)格的密集三行列表：
字體：Roboto Regular 13sp
圖塊高度：76dp
頭像左側(cè)填充：16dp
文本左邊填充：72dp
填充以上列表：4dp
右邊和左邊填充的圖標(biāo)：16dp