在特定的元素选取和设计上很容易陷入困局，我们今天要讨论的是元素与元素之间的分隔设计，希望对大家有所帮助。

感谢「海盐社」的小伙伴：@小火焰@风筝KK 对于这篇分享文章给予的帮助，也希望对大家有所帮助。

每一年设计都会有新的设计方向，今年用的最多是留白分割，但我们设计的时候不能光看别的产品上使用，我们也照搬，我们需要的是找到对自己产品最适合的设计方向。而我们今天要讨论的是模块与模块之间的分割设计，不同类型的分割设计都是如何使用的。

一、分割的作用

APP中分割布局中，它能起到分隔、组织、细化的作用，帮助用户了解页面层次，赋予内容组织性。

二、常见分割方式

在做界面设计时，我们为了区分信息结构及层次，通常采用以下四种布局样式：背景栏分割、分割线分割、留白分割、卡片投影。

1、背景栏分割

分割线是UI设计中最常见的一种分隔方式，能帮助用户理解页面层次，有分隔、组织的作用，一般是为了将内容分割开，形成独立的内容和信息。如下图所示：

分割的强弱：一般

对内容的干扰：弱，分割线因为存在感不太强，适合划分有关联性的内容，并且能够有效的提升浏览效率

上下滑动的视觉感受：贯穿线的存在感由线的颜色深浅决定，目前大部分页面的分割线存在感都不是很强，也因此浏览时信息比较流畅。

2、卡片投影

卡片投影一直是以小巧整齐的内容容器的形式而存在，每一个卡片的都承载不同的信息，是用户了解更多细节信息的入口。如下图所示：

分割的强弱：强

对内容的干扰：强

上下滑动的视觉感受：阴影在卡片上的叠加，使卡片上的内容层级在视觉上提高了不少，能更好的拓展视觉深度以及可操作性，但使用这种分割对空间的要求有点高，也因此会显得整体页面视觉比较空。

3、背景栏分割

背景栏分割有点像一个容器上放了不同维度的内容，能够在内容区分的同时，还能保持界面的统一性。如下图所示：

分割的强弱：强

对内容的干扰：强，这种布局会分散用户的注意力，阻碍用户快速扫览

上下滑动的视觉感受：每个被分割的卡片都是相对独立的维度，但是放在一个界面后，视觉上又会比较规整且统一，但由于分割感比较强，因此视觉阻断较强，阅读成本较高。

4、留白分割

利用间距来设计界面，对应的就是现在流行的无框设计，不适用分割线，纯粹依靠间距来实现界面的排版，目前来说这是一个大趋势，很多主流的APP都是通过留白来做的页面分割。如下图所示：

分割的强弱：弱

对内容的干扰：弱，由于本身是依靠间距来分割的不同模块，因此不存在对内容的干扰。

上下滑动的视觉感受：页面大多是以图片为主，本身的边缘就具备分割作用，内容少并且极有规律，整体界面风格简洁大方易识别。

三、不同类型 APP 常见的分割方式

了解了分割常见的分割形式之后，下面我们来看看不同类型的APP分割形式。

1、电商类APP

电商类的APP属于业务比较复杂的界面，既要保证首页业务展示的完整性，又要保证用户使用时的流畅感，设计时都要考虑一些技巧和思考维度，那么电商类的首页都是采用的什么样的分割形式呢？我们来分析一下，如下图所示：

淘宝、一淘和京东使用的是大背景上增加白色卡片作为分割版块，使功能复杂的页面看起来很规整并且简洁，同时界面的空间使用率也很高。

2、音乐类APP

音乐类APP属于界面功能比较简单一点的页面，功能上最根本就是听歌，但不同的流媒体音乐都有各自的个性，及独特的卖点，也因此视觉设计上都有各自的风格，如下图所示：

上图中虾米、QQ、MOO音乐模块的分割使用的都是留白分割，虽然整体视觉上风格都不同，但是使用的分割方式都是大留白，让整个页面看起来很统一且规整。

3、漫画类APP

漫画类的APP大多都是靠内容IP撑起来的，产品的核心是IP，也因此设计的时候封面占漫画首页的80%，这也要求了分割线不能太过强的存在感，如下图所示：

快看漫画、腾讯动漫、知音漫画都是用的留白分割，我看过之前知音漫画的改版，之前使用的是背景分割，对此我的看法是上面提到的背景分割对用户阅读时造成的干扰比较大，而漫画类的首页图片存在感就很强，因此降低分割线的存在感才是合适的做法。

4、内容类APP

内容型APP的产品核心在于UGC内容的呈现，因此这种类型界面设计时就需要凸显用户和内容的关联性，从而促进信息在用户之间沟通。如下图所示：

最右、Lofter、即刻背景栏分割，因为作为UGC内容页面，每个用户发送的内容都相对独立，而且上面按钮比较多，简单地说就是一个功能多且内容少的一个独立模块，因此使用背景栏分割，是内容自然的呈现出来，让用户发掘自身兴趣所在。

5、FM音频类

在碎片化时间越来越多的快节奏的时代里，知识类电台渐渐成长为电台市场的生力军，同时“听”也已经变成了工作生活中很重要的场景，如下图所示：

得到、蜻蜓FM、喜马拉雅使用的是背景分割，FM类的APP首页内容有很多不同的种类，情感、学习、英语等满足各种用户的需求，所以使用背景分割，能更好的将这些信息处理并形成统一的视觉输出。

小结：从上面五种不同的类型的产品，我们能够看出，分割与产品类型是有一定关联的，所以我们在设计的时候，首先要确定好产品的类型，才能更好的选择界面分割方式，从而能有更好的视觉输出和效果。

四、不同类型 APP排名前五的设计趋势

声明：以下TOP5排名数据来自艾瑞研究

1、电子商务类

以上图中我们可以发现使用的都是背景分割，而且每个卡片都是不同的维度，相对独立，通过背景栏的分割，以及不同模块的标题，提高了视觉效率。

目前电商类的首页都是以独立小卡片式形成独立区域，图片大小统一且规整，风格都是图片配合白色或有点底色的卡片来进行不同内容的划分，将用户的视线集中在卡片上，因此就算是功能多且信息比较庞大的电商，也能做到视觉上的规整。

2、音频类

由于目前音频类的首页大多都是以歌单占据页面的中心位置，而用户对于不了解的歌单多数都是被封面和歌单名称吸引点击，因此界面都是用的留白分割。

同时利用好看且统一的图片做分割，并且不同版块的内容也是统一和重复的，运用合理的标题将每个版块清晰的划分出来，所以能够营造出比较整体简洁的感觉。

3、电影类

除了电影网使用的是分割线以外，其他四个APP使用的都是背景栏分割，由于电影类的APP用户对于文字的阅读需求相对于图片比较高，所以相对于电商类的背景栏分割，电影类的使用的就是最典型的背景栏分割。

这种分割形式我们经常会在个人中心里会见到，将每个独立的模块放在不同的卡片里，视觉分割感很强，模块的划分存在感比较突出，也有利于用户专注于阅读自己感兴趣的模块里。

4、运动类

首页都是用运用记录及开始运动的大按钮占据大部分的页面，同时下面搭配不同的推荐课程，使用起来方便快捷。

悦动圈、Keep、咕咚和乐动力使用的是卡片投影，同时配色大多使用的是绿色，清新、放松，能让用户感到平衡和鼓舞，更符合健身锻炼的理念，而使用卡片投影则能让用户更一眼就能看到自己关心的内容，让页面保持简约的同时，还能保持内容的纯粹性和直观性。

5、有声听书类

由于是听书类的APP，因此播放是这些产品的核心，所以播放按钮成为底部icon的中心，或者以浮标的形式存在每个页面中。

听书类型由于内容信息比较繁杂，界面分割以背景栏分割为主，大标题作为信息归纳，这样会能快速让用户在复杂的内容里找到自己想要的，少数如企鹅FM和荔枝FM则是将分类做成了顶部tab的形式，因此界面内容属于同一模块，没有分割线且以feed的形式来展示内容。

五、划重点

1、不同的分割形式产生的强弱、对内容的干扰和滑动时的感受都是有所不同的；

2、分割与产品类型有一定关联，在设计的时候，首先要确定好产品的类型，选择界面分割方式，才能有更好的视觉输出和效果；

3、同种类型但不同的产品，设计时总有一些相似的设计趋势和特点，重点在于我们要善于总结和发现。