Material Design — 分隔线（Dividers）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

Dividers

Material Design链接：Dividers

Deviders

分隔线是一种轻量级的规则，它将列表和页面布局中的内容分组。

分隔线能将页面内容和层次结构组织成单个块。

全出血分隔线强调单独的内容区域和需要更明显的视觉分离的部分。 全出血分隔线的替代品包括留白，子标题或内置分割线。

网格列表中基于图像的内容不需要分隔线。 网格列表使用留白和副标题能够充分分离内容。

用法

用于列表和分离内容

分割线的类型

全出血分隔线（Full-bleed dividers）用于分隔不同的内容部分。

内置分隔线（Inset dividers）用于分隔相关内容。

Specs

厚度：1dp

不透明度：12％黑色或12％白色

展示位置：沿着内容图块的底部边缘

用法

分隔线通过在页面上建立节奏和层次结构，帮助用户了解内容的组织方式。 但大量使用分隔线会导致视觉噪音并弱化其影响。

全出血分隔线强调单独的内容区域和部分，但如果不需要如此强烈的分隔，考虑使用留白，副标题或内置分割线。

没有锚点的项

当列表中没有锚定元素（如头像或图标）时，单独使用留白并不足以将项分隔开来。 在这种情况下，全出血分隔线可以帮助创建节奏并将其分隔成单个块。

基于图像的内容

由于网格本身会创建视觉区分，网格列表不需要分隔线来将子标题与内容分开。 在这种情况下，留白和子标题足以将各个部分分开。

网格列表使用留白与子标题即可

左：内置分隔线将主要部分分开    右：将分隔线与锚点元素结合使用

分隔线滥用导致视觉噪声与分隔弱化

分隔线类型

全出血分隔线

全出血分隔线在列表和页面布局中分隔不同的内容部分（eg 联系人信息中的内容详情）或不同的内容元素（eg 列表项）。

全出血分隔线还可以展示材料中内容膨胀时材料将膨胀的材料中的分隔（如下图右）。

内置分隔线

内置分隔线分隔相关内容，例如对话中的联系人列表或电子邮件列表中的部分。

内置分隔线应与锚点元素（eg 与标题对齐的图标或头像）一起使用。

子标题和分隔线

将分隔线与子标题一起使用时，将分隔线放在子标题上方以加强子标题和内容之间的关系。