组件 分隔线

分隔线

分隔线是一个纤细、轻量的线条,可以对列表和页面中内容进行分组。

分隔线把页面内容和层级组织成单独的区块。

全出血分隔线利用更明显的视觉分隔,强调了内容区域的独立性。可以利用留白、组标题以及内嵌分隔线来替代全出血分隔线。

以图片为主的网格列表不需要分隔线。网格列表使用留白和组标题就足以起到分隔的作用。

用法

列表中分隔内容

分隔线类型

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

规格

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

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

分隔线确立了页面的规律和结构,以此帮助用户理解内容的组织方式。过度使用分隔线会造成视觉干扰,减弱分隔线原本的作用。

全出血分隔线强调内容区域的独立性,倘若无需如此明显的视觉分隔,考虑使用留白、组标题和内嵌分隔线。

没有依靠的项目

当列表没有可依靠的元素(如头像或图标)时,仅通过留白不足以分隔内容块。此时全出血分隔线有助于独立区块创建规律和独立。

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

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

图片为主的内容

因为网格本身会创造视觉层次,网格列表不需要使用分隔线来从内容中分离组标题。此时,留白和组标题就足起到分隔作用。

留白和组标题分隔了照片和相册。

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

在有依靠元素(如头像)的组合中使用内嵌分隔线。

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

内嵌型分隔线有助于减少视觉干扰,应当在有依靠元素的组合中使用,但过度使用会减弱分隔线的作用。

分隔线类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

全出血分隔线

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

全出血分隔线还可以指出材料展开时的接缝,内容展开时的出现位置。

全出血分隔线示例

全出血分隔线示例

内嵌分隔线

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

内嵌型分隔线应该在有依靠元素的组合中使用,例如与标题的关键线对齐的头像或图标。

内嵌分隔线示例

内嵌分隔线示例

组标题和分隔线

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

组标题上方的分隔线

组标题上方的分隔线

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

分隔线的粗细为 1dp,在亮色主题中为不透明度 12% black,在暗色主题中为不透明度 12% white 。

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

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