Dividers - 分隔线

A divider is a thin, lightweight rule that groups content in lists and page layouts.

【翻译】
分隔符是一种轻量级的轻量级规则，用于对列表和页面布局中的内容进行分组。

Dividers help organize page content and hierarchy into individual tiles.
Full-bleed dividers emphasize separate content areas and sections that require more distinct visual separation. Alternatives to full-bleed dividers include white space, subheaders, or inset dividers.
Image-based content in grid lists does not need dividers. Grid lists adequately separate content using white space and subheaders.

【翻译】
分隔符帮助将页面内容和层次结构组织成单个图块。
等屏宽分割线强调单独的内容区域和需要更明显的视觉分离的部分。等屏宽分割线替代品包括空格，子报头或插入分隔符。
网格列表中基于图像的内容不需要分隔符。 网格列表使用空格和子标题来充分分隔内容。

Usage - 用法
For lists and to separate content

【翻译】
用于列表和分隔内容

Type of dividers - 分隔符类型
Full-bleed dividers are used to separate distinct content sections.
Inset dividers are used to separate related content.

【翻译】
等屏宽分割线用于分离不同的内容部分。
插入分隔符用于分隔相关内容。

Specs - 规格
Thickness: 1dp
Opacity: 12% black or 12% white
Placement: Along the bottom edge of content tiles

【翻译】
厚度：1dp
不透明度：12％黑色或12％白色
放置：沿着内容的底部边缘

Usage - 用法

Dividers help users understand how content is organized by establishing a rhythm and hierarchy on a page. But a heavy use of dividers can lead to visual noise and dilute their impact.

Full-bleed dividers emphasize separate content areas and sections, but if such strong divisions are not required, consider using white space, subheaders, or inset dividers.

【翻译】
分隔线通过在页面上建立节奏和层次结构，帮助用户了解内容的组织方式。 但是，大量使用分隔符可能会导致视觉噪声并降低其影响。
等屏宽分割线强调单独的内容区域和部分，但如果不需要这种强分割，请考虑使用空格，子标头或插入分隔符。

Items without anchors - 没有锚点的项目
When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

【翻译】
当列表没有锚定元素（如头像或图标）时，单独的空间并不总是足以分隔图块。在这种情况下，等屏宽分割线可以帮助创建节奏和单独的区块。

[图片上传失败...(image-81a0e5-1552295408103)]
Full-bleed dividers separate email summaries.

【翻译】
等屏宽分割线分隔电子邮件摘要。

image

Full-bleed dividers separate the From, To, Subject, and Message sections of the email screen.

【翻译】
等屏宽分割线分隔电子邮件屏幕的“发件人”，“收件人”，“主题”和“邮件”部分。

**Image-based content - 基于图像的内容 **
Because the grid itself creates visual distinction, grid lists do not need dividers to separate subheaders from content. In this case, the white space and the subheaders separate the sections adequately.

【翻译】
因为网格本身创建视觉区别，网格列表不需要分隔符来从内容中分离子标头。在这种情况下，白色空间和子标题适当地分离这些部分。

image

The white space and the subheaders separate the photos and albums.

【翻译】
白色空间和子标题分隔照片和相册。

正确的示范

Do.
Judicious use of inset dividers demarcates major sections of content.

【翻译】
正确的示范
合理使用插图分隔符划分内容的主要部分。

正确的示范

Do.
Use inset dividers in conjunction with anchoring elements such as avatars.

【翻译】
正确的示范
使用插入分隔线与锚固元素（如化身）结合使用。

[图片上传失败...(image-14105b-1552295408103)]
Don't.
Overuse of full-bleed dividers creates visual noise and ultimately diminishes the meaning of the dividers.

【翻译】
错误的示范
过度使用等屏宽分割线会产生视觉噪声，并最终降低分割线的含义。

[图片上传失败...(image-94c36d-1552295408103)]
Don't.
Inset dividers help cut down on visual noise and should be used with anchor elements, but overuse reduces their meaning.

【翻译】
错误的示范
插入分隔符有助于减少视觉噪声，应与锚固元素一起使用，但过度使用会降低其意义。

Types of dividers - 分割符的类型

Full-bleed dividers - 等屏宽分割线

Full-bleed dividers separate distinct content sections (e.g., biographic details from contact information) or distinct content elements (e.g., list items) in both lists and page layouts.

Full-bleed dividers can also indicate seams in material where the material will expand when content is expanded.

【翻译】
等屏宽分割线将列表和页面布局中的不同内容部分（例如，联系人信息的传记细节）或不同内容元素（例如，列表项）分离。
等屏宽分割线还可以指示材料在材料膨胀时膨胀的接缝。

image

Example of full-bleed divider

【翻译】
等屏宽分割线示例

image

Example of full-bleed divider

【翻译】
等屏宽分割线示例

Inset dividers - 插入分隔符

Inset dividers separate related content, such as sections in a list of contacts or emails in a conversation.

Inset dividers should be used in conjunction with anchoring elements such as icons or avatars aligned with the Title Key Line.

【翻译】
插入分隔符用于分隔相关内容，例如对话中的联系人或电子邮件列表中的部分。
插入分隔线应与锚定元素（例如图标或与标题键行对齐的头像）结合使用。

[图片上传失败...(image-1ea581-1552295408103)]
Example of inset divider

【翻译】
插入分隔符示例

image

Example of inset divider

【翻译】
插入分隔符示例

Subheaders and dividers - 子标题和分隔符

When using a divider with a subheader, place the divider above the subheader to reinforce the relationship between the subheader and the content.

【翻译】
当使用带有子标题的分隔符时，将分隔符放在子标题之上以加强子标头和内容之间的关系。

[图片上传失败...(image-914c5e-1552295408103)]
Example of divider above subheader

【翻译】
子标题上的分隔符示例

[图片上传失败...(image-af3cc7-1552295408103)]
Example of divider above subheader

【翻译】
子标题上的分隔符示例

Specs - 规格

Dividers are 1dp thick, with an opacity of either 12% black in light themes or 12% white in dark themes.

Dividers are placed along the bottom edge of the content tiles, independent of the grid.

【翻译】
分隔线为1dp厚，不透明度为12％黑色在光主题或12％白色在黑暗主题。
分隔线沿着内容卡片的底部边缘放置，独立于网格。

image

The divider sits within the baseline of the tile.

【翻译】
分隔符位于图块的基线内。