组件 分隔线

分隔线

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

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

通栏分隔线强调需要更明显视觉分隔的独立内容区域和章节。通栏分隔线的替代方案包括空白、子标题或内嵌分隔线。

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

用法

用于列表和分隔内容

分隔线类型
  • 通栏分隔线用于分隔不同的内容区域。
  • 内嵌分隔线用于分隔相关内容。
规格
  • 粗细: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 中位于区块基线内的分隔线

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