F：泡芙喵，产品给了一堆信息密集的内容，我要怎么把内容排的有条有理呢？

泡芙喵：当然怎么好看怎么来啦……难道还往丑了做？   

 

F：泡芙喵，我发现很多app有些分隔线是全屏的，有些分割线是左侧留白的，为什么为什么到底是为什么呢？

泡芙喵：看设计师心情吧，或者是程序员一不小心写错样式啦！

F：咳咳……

泡芙喵：哈哈，我就是皮了一下，下面听我好好说道说道。

 界面分割有哪些样式呢？👇👇👇

在做界面设计时，为了区分信息层级，模块与模块之间的分割通常会用以下3种方式：分割线、卡片式、留白。 

 

1.分割线样式

 

分割线有全屏分割线、一侧留白分割线、两侧留白分割线3种，分割线的颜色、粗细这些细节也会影响界面的美观度，一般使用浅灰色1px分割线居多。

 

1.1 全屏分割线

全屏分割线是贯通整个页面的分割线，主要用于分割差异度较大的信息内容。 

下图列表页面用了全屏分割线，用户视线停留时间也会更长一点。

 

1.2一侧留白分割线

一侧留白分割线主要用于区隔差异度适中的信息内容，如一级信息与二级信息的区分；左侧留白用户视线更顺畅，没有被打断。

 

1.3两侧留白分割线

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

两侧的留白会形成流畅的视觉流，引导用户往下滑动页面。

2.卡片分割样式

 

卡片像一个容器，把不同维度的内容放入不同的卡片中，可以让内容区分的同时还能保持界面的整洁度。

传统列表内容一般为纵向滑动操作，展示的内容有限，而采用卡片式的布局，在纵向的内容流里，还可以增加横向滑动的内容区域。

如下图：中国移动和京东金融的页面，把推荐内容放在横向滑动的卡片里增加了页面利用率。

还可以采用卡片+卡片的方式来突出重要模块，如下左图“低价好物”模块，右图“限时福利”卡片，用彩色卡片突出了视觉层级。

3.背景栏分割

背景栏分割就是把分割线加粗到10px～20px,比起分割线每个模块之间区分更清晰。采用通栏式设计，视觉会在每个模块间停留一下，分割感更强。

4.留白分割

采用留白分割适用于以图片为主，内容有规律，小众且垂直的产品。

首先每张图片本身就可以起到分割的作用，因此，不需要采用多余的线或边框进行分割。其次留白间距上下的内容信息元素统一、重复，这样用户会下意识的将其分为一组。再次小众且垂直的产品目标用户聚焦，整体简洁统一，太多复杂的样式反倒会干扰用户视线。

F：嗯嗯，好像有些思路了……

泡芙喵：那就好！本喵退下了～

- END -

公众号【 泡芙喵F设计教室 】