兔课网：学UI设计如何学会分割线？

3466人阅读 2020-03-17

兔课网：学UI设计如何学会分割线？分隔线简介在UI中，为了视觉美观以及方便用户获取信息，我们必须要把内容进行分组、隔离。分隔线（divider）就是这样一条长长的细线，用来对页面中的单个或成组内容进行分隔。

36Kr

为什么要强调「单个或成组内容」，而不直接说「内容」呢？因为这两者会用到不同的分隔线。单个内容有如：单个文本、图标、单张图片等，成组内容则是至少两个内容在一起。如下图，它们的分隔线长度是不一样的：

左图：单个内容（36Kr），右图：成组内容（微信）

在页面中，用于分隔的元素有很多，什么时候该使用分隔线呢？其实分隔线是一种很弱的分隔元素，也就是说，在最弱的时候才会用到它。这个大家族还有很多成员：

轻量的分隔元素：空白、分隔线、投影、标题、分隔条、锚元素（anchoring element，如图像、按钮等，形式不固定，需要基于场景判断是否算锚元素）；

较重的分隔元素：卡片、大图、表格；

很重的分隔元素：tab标签页；

各种分隔元素轻颜相机（左），淘宝（右）

上图中不论是信息较少的轻颜还是内容庞杂的淘宝，它们都用到了各种分隔元素来使用户以最快速度读取信息，如：左图中的留白、卡片、标题、分隔线，以及右图中的tab标签页、网格、图片等。

分隔线的特点是轻量、存在感弱，我们得节制使用它。

分类

从视觉重量来看，分隔线有三种，由重到轻依次为：

全出血分隔线（full-bleed divider）：左右封闭，是最强的分隔线，常用于分隔信息较多的成组内容或独立性很强的简单内容：

全出血分隔线喜马拉雅（左），iOS（右）

喜马拉雅APP中间的那条分隔线分隔的是两组内容，上方的专辑介绍和下方的相关搜索是独立的两组信息，需要把它们强力分开。在右侧的iOS弹窗中，虽然每组内容并不多（只有标题和icon），但它们却带有明显的操作性和独立性--每一行都可以点击并触发新的页，用全出血分隔线能指引用户不会点错。

内嵌分隔线（inset divider）：左侧不封闭右侧封闭，是较强的分隔线，用于分隔单个或成组内容，有时还能暗示内容可点击：

内嵌分隔线 36Kr（左），京东到家（右）

两张图中被分隔的对象都是信息简单的组，又都可以点击，故用了分隔强度适中的内嵌分隔线。

居中分隔线（middle divider）：左右都不封闭，是最弱的分隔线；常见于分隔单个内容，或独立出现在整个页面中，有时它们还会担负起暗示用户不能操作的作用（比如不可点击或不能打开新页）。

居中分隔线 36氪（左），材料设计（右）

材料设计的示例图中，界面中只有这一条分隔线。由于上下内容并不独立，反而紧密相关--都是牙刷的产品特征，所以用了最弱的分隔线。

居中分隔线（京东到家）

居中分隔线经常出现在订单或收据页面，位于价格上方，上面两图都是一个页面只有一条分隔线，作为相关信息之间的弱分隔。

前面讲过，在表单中，居中分隔线还能暗示该栏（cell）不能跳转至新页面。由于跳转是一种交互性较强的操作，分隔线的向右延伸正能强调这种交互。但如果一个页面整体看来需要的是居中分隔线，又有个别需要支持点击和跳转的cell，该怎么办呢？此时可以给该cell右侧添加右箭头（如上图）。

看到这里你可能还对这些微妙的区别有点头晕😵，没关系！下面的规则能帮助你更好记忆和选择最适合的分隔线。

如何选取

分隔线是一种很纯粹的功能性组件，它样式单调，也无状态变化可言。在选择时我们可以参考这样的原则来入手：

1. 内容需要做强分隔还是弱分隔？越强则封闭得越多。如果被分隔的对象是内容复杂/互相独立/操作性强的，那它们就需要强分隔（全出血分隔线）；

2. 是否已经有了辅助分隔的锚元素？如果有，那么分隔线就可以弱一点（内嵌或居中分隔线就够了，不必全出血）；

Facebook的三个迭代版本（从左至右）

让我们来看一下Facebook这三个版本对分隔线的运用，很明显右边两个最新的版本视觉效果更佳，左一最大的问题是太过于紧密。右一和左二的列表信息是完全一致的（头像+名字+共同好友+两个按钮），右一除了顶栏不同，还少了分隔线，我认为Facebook在此处去掉分隔线是很合理的，因为列表中的锚元素实在太多（头像、按钮、粗体字标题），已经足以分隔内容了。其实当表单的锚元素超过一个时，便可以考虑不要分隔线了。

Tips：

分隔元素的视觉重量与被分隔内容的视觉重量成正比，前者大于后者会造成视觉干扰，小于后者则起不到分隔作用。

材料设计中还专门总结了另一种分隔线：带副标题的分隔线（divider with subheaders）：副标题在分隔线下方，副标题在这里也算是一种有分隔功能的锚元素，理所当然分隔线也是内嵌型的了：