编辑导读:拆分布局，顾名思义，会在物理上将相关元素相互靠近，在视觉上形成一个整体；不相关的元素在物理上相互分离，在视觉上呈现出分割整体的效果。本文作者对APP的分离式布局进行分析，希望对你有所帮助。

分部布局，顾名思义，使相关的元素在物理上相互靠近，在视觉上形成一个整体；不相关的元素在物理上相互分离，在视觉上呈现出分割整体的效果。

app中的分栏排版是对界面信息架构的功能点进行梳理和分类后形成的可视化排版产品。将视觉上或内容上需要区分的内容以不同的形式划分出来，为一个APP页面信息营造出视觉上的完整和独立感，并能帮助用户理解页面的层次结构，赋予页面内容组织性。

在信息设计中，我们经常需要用划分设计的方法将信息分组。界面中大致有三种划分方式:卡片、线条、空格。

1.电子商务应用程序

电商APP的产品界面属于业务复杂的界面，信息量大，信息层次多。为了保证首页业务展示的完整性和合理性，以及用户使用时信息的流畅，在设计界面时要考虑一些技巧，如下图所示:

淘宝、JD.COM、陶艺用背景上的白色卡片作为信息分割版块，让信息繁杂的页面看起来整洁清晰。

2.音乐应用

音乐产品页面属于内容信息相对简单的页面，最基本的功能就是听歌和找歌。但是不同的流媒体音乐app都有自己的个性和独特的产品卖点，所以在视觉设计上都有自己的风格，如下图所示:

上图中，QQ和MOO音乐模块用空格分开。虽然整体视觉风格不同，但是大面积的留白让整个页面看起来统一规整。

3.漫画应用

漫画的APP页面大多是内容IP信息，产品的核心是IP。所以在设计的时候，封面占漫画首页的80%，这也要求分割线不能有很强的存在感，如下图所示:

看漫画，腾讯动漫，尹稚漫画都是用卡空白分割的。漫画的产品界面主要是封面图片。图片显示适合瀑布显示，卡片的空白分割才是匹配瀑布显示的。

1.模式1:线性分段

1)定义

线性分段是指是指用线将不同的信息内容分开。在材料设计上，有明确的划分定义和规范。(iOS中没有相关定义。根据上图4的视觉效果，我更喜欢Android的分割方式，所以我更喜欢采用Android的设计规范建议和效果。)

材料分隔线:分隔线是一条细而轻的线，用于对列表和页面布局中的内容进行分组。分割线可以把页面内容和层次组织成一个块。

视觉上，分割线可以将页面内容分割成层次更清晰的组块。

此外，MD还定义了其UI规范的细节，规定分割线粗细为1dp，颜色可根据昼夜模式分别为黑色或白色，不透明度为12%，沿内容块底边显示，以保证Android平台所有分割线的显示效果一致。(国内的实际情况是大部分app的分割线是1px厚度，视觉效果相比MD的1dp更符合下面的精妙原理)

2)使用原则

分隔线可以帮助用户理解页面内容是如何组织的。但是过度使用分割线会造成视觉干扰，影响页面信息的传递，所以Android系统明确规定了分割线的使用原则:

1。微妙:分割线在布局中应该很容易被注意到，但不突出。

2。次要:分割线只在空格不能分割时使用。

3。少用:慎用分割线，用它来创建组而不是划分物品内容。

3)使用场景和分类

分割线可以分为三种类型:

1。全出血分隔器:用于分隔完全独立的内容。

2。嵌入分隔线(插入分隔线):用于用锚点(头像或图标)分隔相关内容。

3。中间分隔符:用于分隔没有锚点(头像或图标)的相关内容。

大部分时候(信息等级≤2)，分割线分割的信息也可以用空格分割，但是空格足够大。比如我们把分割线的方式改成留白，因为空间足够大，视觉效果清晰(没有多余线性元素的干扰)。

用大空格替换分割线:

但如果为了提高屏幕效果，想要在一个屏幕中显示尽可能多的信息，那么在同样的信息布局下，分割线带来的分割效果会更清晰，如下图所示:

当信息等级大于或等于3时，使用线性分割时要谨慎。线条分不清多个层次，会影响视觉效果。我们可以具体看看下面的卡分段的使用条件是否满足。

2.方法二:卡片

1)定义

卡片是一个具有独立主题的表层容器，由内容和操作组成。

①表面容器；②缩略图；③标题；

④字幕；⑤富媒体；⑥正文；

⑦文本按钮；⑧图标按钮；

除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。

2)使用原则

用卡要注意以下三个原则:

1.包括:卡是一个可识别的、包含内容的独立单元。

2.独立:卡片可以独立存在，与上下文无关。

3.不可分:一张卡不能与另一张卡合并或拆分成多张卡。

卡的使用需要满足以上三个原则，但只有不满足以上原则才能使用卡。具体的卡片分类和适用场合请参考以下内容。

3)使用场景和分类

根据卡片左右两边是否有边距，可以简单的分为横幅卡片和非横幅卡片。

从视觉上看，由于圆角的对焦效果，非横幅卡更好的用于突出单张卡片的独立性，对图像的分割会更强。

无论是哪种卡牌类型，都是包含单个题目内容(操作)的独立容器，其内容的独立性类似于前面提到的分栏符分隔的内容。

那么什么时候用列分割线，什么时候用卡分割线？这里有三个建议给你:

1.当这个主题里面的内容已经有分割线时，建议使用卡片分割，让主题信息层次更加清晰。

2.当单个主题内内容类型较多，上下/[k0/]比例较大时(如≥1/2屏)，建议使用卡片分割，更好地圈定主题的内容范围，给用户清晰的内容边界感。

3.当需要扩展页面的水平空空间，并提示页面可以水平滑动时，就需要使用非横幅卡片，利用水平内容连续性原理，帮助用户建立水平滑动的意识。

3.方法3:留空

1)定义

所谓留白分割，是指利用人类视觉感知的原理(格式塔原理逼近法则:人脑倾向于将彼此靠近的元素视为一组)，仅通过增加间距来实现信息的自然分组。

利用亲密度原理的空白分割

如上图所示，当纵向间距增加1.5倍时，信息分为上、下两组，当横向间距也增加1.5倍时，信息分为上、下、左、右四组[具体原因可查关于格式塔原因。

值得一提的是同类单一元素(图片、文字、图标等。)默认都是用空格分开的。例如，间距是区分相册中各张照片之间、文章中各文本之间以及段落之间的单个信息元素的默认选择。

2)使用原则

默认情况下，单个元素由空格分隔。随着元素的增加，多个元素按照特定的信息组合形成信息组块。当组块相互分离后，就涉及到今天的话题:空格/线性/卡片分割方法的选择。在这方面，iOS和Android系统有很大的区别。

在iOS中，线性分段是条目间默认的分段方式(见iPhone通讯录和设置)。当多个信息组块分组时，为了区分不同的分组，会采用更高级别的卡片分割方法。

在Android系统中，空白分割是信息组块之间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区分上下文内容。(参见地址簿和Pixel 5的设置)

从2014年材质设计发布后的“卡片设计”到2019年前后的“离线设计”的流行，结合设计趋势，对比上图中iOS和Android的分割效果，建议在不影响核心数据指标的情况下，尽量使用条目之间的空格，这样会让界面更加清爽。用线条来划分很多线条的视觉效果不够简洁。

3)使用场景和分类

留白划分的实际设计实现需要定义留白大小的设计规范，有多少层次的信息，每个信息层次之间有多少空格，每个空格适用于什么情况。

在设计任务中，UI视觉设计师在设计页面或模块时，往往会对页面进行网格划分，然后以最小网格为基础设计不同倍数的间距，以增强页面的秩序感。

理论上来说，只要分隔距离足够大，就可以根据邻近原则形成信息群。然而，信息层次越多，需要的间距种类就越多，间距种类越多，信息层次就越不清晰(你只能简单地根据间距的大小来判断信息层次，就像只用相邻的颜色来区分颜色，不对比就不容易发现差异，不够直观)。

而且每增加一个视觉层次，其间距至少要达到前一个层次的两倍，才能使接近规则生效，产生明显的分组效果。因此，在信息层次很少的情况下(≤2)，划分空格比较合适；当信息层次(≥3)较多时，会浪费空小时，难以达到清晰的分割效果，造成信息层次分化。

根据切分方法本身的特点(视觉干扰、切分强度、滑动沉浸)、上下文项内容之间的关系、单项内容复杂度以及屏幕之间的利用率空，我们可以对切分方法做一个简单的总结，如下:

简而言之:

1.当信息项的复杂度较低时，优先选择空间分隔，使视觉耳目一新，不受干扰。

2.当信息项复杂度增加，单独空白分割效果不明显时，建议引入线性分割，使信息层次更清晰，屏幕效果更高。

3.当信息项的复杂度进一步提高时，需要进一步加强信息项本身的边界感，建议引入卡片，增强项信息的视觉层次和可操作性。

最后需要强调的是，信息细分本身不是目的，而是手段。分割方式的选择，是为了使版面具有清晰的组织和信息呈现，以赏心悦目的信息顺序更好地突出表达的内容，从而达到最佳的视觉信息传达效果。

因此，在决策时，除了以上详细考虑外，还应考虑整体布局效果和信息传递效率。

本文由@陈一原创发布。每个人都是产品经理。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。