连1px的分割线都用不好，可别说你懂界面设计

对界面的设计，实质上是对信息布局的设计。尤其是在移动端，需要将纷繁复杂的信息都塞进仅有几英寸的屏幕内，这很考验设计师的版式能力。

分割线又是界面设计中最常用的元素之一。一条不起眼的分割线，有时候就是一根救命稻草。尤其是在设计信息量多、信息层级复杂的页面时，如果能合理巧妙的运用分割线，就能够将杂乱的信息排布得当，省去思考新布局新样式的时间。

分割线可大致分为三类：

1.全屏分割线；

2.单边分割线；

3.悬浮分割线。

全屏分割线

全屏分割线即从页面最左侧贯穿最右侧的分割线。

如今日头条的首页，在信息流的卡片中运用了全屏分割线，将新闻内容和工具栏这两个不同功能的信息明确地区分开来。

（今日头条）

滴滴在呼叫出租车的页面中也运用了全屏分割线。如下图，上下两条分割线，把卡片分成三个部分：预约时间、出发地目的地、推广文案。

（滴滴出行）

其他App的使用情况：区分导航栏与信息流内容，区分卡片标题与下级功能入口…

我们可以发现全屏分割线多用于区分不同的信息内容，且它们之间多为并列、丛属的关系，差异度较大。

单边分割线

单边分割线其中一侧有留白，另一侧连接页面边缘。

大多数App的个人中心页面就是运用单边分割线的典型案例。这一类页面以列表为主，列表内容多为图标+文字的形式。可以注意在这里分割线是从文字下方开始出现的，而图标下方则留白处理。

（京东金融）

不单止是简单的列表，在更复杂的页面也能看到单边分割线的应用。在淘票票的首页中，单边分割线区分了不同的电影条目，在电影基本信息和推广文案之间，也用了一根单边分割线区隔开。相同的是，它们都在左侧有不同程度的留白。

（淘票票）

以上两个案例都有一定代表性，囊括了单边分割线的大部分使用情况。可以从中看出：单边分割线在形式上起到了平衡视觉重心的作用。如在京东金融的页面中，分割线在图标下方留白处理，稀释了图标所带来的重量感；在淘票票的页面中，分割线在电影海报下方的留白处理，减轻左侧的视觉重量，平衡了整体视觉重心。

除了平衡视觉重心以外，单边分割线其实还有另外一个作用。

这两个页面中能看到既有全屏分割线，也有单边分割线。在这里，单边分割线依然有平衡视觉的作用，如左图平衡了加减图标的重量感，右图平衡了方块的重量感。但单边分割线在这里更重要的作用是，配合全屏分割线，形成信息的主次关系。

如右图中，全屏分割线划分出来的“信用卡”“贷款”“股票”等皆为一级信息，而由单边分割线划分的“信用卡新客户免单活动”“贷款预估”等则为二级信息。简单的一条单边分割线，就把信息之间的层级关系交代的一目了然。

悬浮分割线

悬浮分割线两侧均有留白，与页面边缘不接触。

悬浮分割线多运用于信息流页面。如Medium，悬浮分割线在区分上下两篇文章的同时，也没有让它们完全分离，而是两边留白的方式，保留两者之间的相关性。

悬浮分割线运用在信息流页面中，两侧的留白会形成清晰流畅的视觉流，引导用户往下滑动页面，浏览更多的信息。

总结

分析了这么多关于分割线的应用情况，简单总结一下。

在功能上，不同类型的分割线最主要的区别在于：对信息的阻隔程度的大小。从大到小可依次排序为：全屏分割线＞单边分割线＞悬浮分割线。

因此全屏分割线主要用于区隔差异度较大的信息内容，如不同功能模块之间的区分；

单边分割线主要用于区隔差异度适中的信息内容，如一级信息与二级信息的区分；

悬浮分割线主要用于区隔差异度较小的信息内容，如同级信息之间的区分。

在视觉上，分割线由于形态不同，各自都有不同的视觉作用。单边分割线因本身的视觉不平衡，合理应用的情况下，反而可以平衡视觉重心；悬浮分割线因本身两侧均有留白，因此能结合页面中其他元素，在两侧形成清晰流畅的视觉流。

以上是我对分割线的一点见解。虽然只是不起眼的一个元素，但如果对它的具体应用情况有一个基本的了解，就能够更灵活更准确地用好这根线了。