组件 分隔线

分隔线

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

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

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

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

用法

列表中用于分隔内容

分隔线类型
  • 全出血分隔线用于分隔不同的内容区块。
  • 内嵌分隔线用于分隔相关的内容。
规格
  • 粗细:1dp
  • 不透明度:12% 黑色或 12% 白色
  • 位置:沿着内容块的底部
Material Design 中的分隔线用于内容分组

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

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

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

没有锚点的项目

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

全出血分隔线在 Material Design 中的应用示例

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

Material Design 中的全出血分隔线用于邮件内容分隔

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

基于图片的内容

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

Material Design 中的空白和副标题分隔的照片

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

Material Design 中的内嵌分隔线用于分隔主要内容

正确示例

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

Material Design 中的内嵌分隔线和锚元素

正确示例

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

Material Design 中的过度使用全出血分隔线导致视觉干扰

错误示例

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

Material Design 中的内嵌型分隔线用于减少视觉干扰

错误示例

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

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

全出血分隔线

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

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

Material Design 中的全出血分隔线示例

全出血分隔线示例

Material Design 中的全出血分隔线示例

全出血分隔线示例

内嵌型分隔线

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

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

Material Design 中的内嵌型分隔线示例

内嵌型分隔线示例

Material Design 中的内嵌型分隔线示例

内嵌型分隔线示例

副标题和分隔线

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

Material Design 中的副标题分隔线示例

副标题上的分隔线示例

Material Design 中的副标题分割线示例

副标题上的分割线示例

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

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

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

Material Design 中的分隔线位于内容块基线内

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