组件 分隔线

分隔线

分隔线是一个细长、轻量的元素,用于对列表和页面布局中的内容进行分组。

分隔线把页面内容和层次结构组织成单独的块。

全出血分隔线强调了需要更多视觉分隔的独立的内容区域。全出血分隔线的替代方案包括空白、副标题、或内嵌分隔线。

基于图片的网格列表中的内容不需要分隔线。网格列表使用空白和副标题已经能充分的分隔内容。

用法

列表中用于分隔内容

分隔线类型

  • 全出血分隔线用于分隔不同的内容区块。
  • 内嵌分隔线用于分隔相关的内容。

规格

  • 粗细:1dp
  • 不透明度:12% 黑色或 12% 白色
  • 位置:沿着内容块的底部

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

分隔线通过在页面上创建一个规律和层次结构,来帮助用户理解内容是如何组织的。但过度使用分隔线会造成视觉干扰,减弱分隔线的作用。

全出血分隔线强调分隔内容区域和章节,但如果不需要进行如此明显的分类,可以考虑使用空白、副标题或内嵌型分隔线。

没有锚点的项目

当列表没有锚元素(如头像或图标)时,仅通过间距不足以分隔内容块。在这种情况下,全出血分隔线可以帮助创建一种规律来分隔单独的内容块。

全出血分隔线分隔邮件的摘要。

全出血分隔线分隔邮件中的发件人、收件人、主题和正文部分。

基于图片的内容

因为网格本身会创造视觉差异,网格列表不需要使用分隔线来从内容中分离副标题。在这种情况下,空白和副标题会充分的分隔这些部分。

空白和副标题分隔了这些照片。

正确示例

合理的使用内嵌分隔线分隔内容的主要部分。

正确示例

同时使用内嵌分隔线和锚元素(如头像)。

错误示例

过度使用全出血分隔线会造成视觉干扰,并最终减弱分隔线的作用。

错误示例

内嵌型分隔线有助于减少视觉干扰,应该和锚元素一起使用,但过度使用会减弱分隔线的作用。

分隔线类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

全出血分隔线

全出血分隔线可以用于分隔明显不同的内容(例如:联系人信息中的详细介绍),或列表和页面布局中不同的元素(如列表项)。

全出血分隔线还可以用于指出元素展开时的接缝。

全出血分隔线示例

全出血分隔线示例

内嵌型分隔线

内嵌型分隔线用于分隔相关的内容,例如联系人列表中的一部分,或邮件中的对话。

内嵌型分隔线应该和锚元素(如头像或图标)一起使用,并和标题的参考线对齐。

内嵌型分隔线示例

内嵌型分隔线示例

副标题和分隔线

当分隔线和副标题一起使用时,把分隔线放在副标题上方,以加强副标题和内容的联系。

副标题上的分隔线示例

副标题上的分割线示例

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

分隔线有 1dp 的粗细,在亮色主题中为黑色并带有 12% 的不透明度,在暗色主题中为白色并带有 12% 的不透明度 。

分隔线沿着内容块的底部边缘放置,独立于网格。

分隔线位于内容块的基线内。