大家在学习UI设计时，经常会接触到页面的布局，而往往页面布局的方式会直接影响到一个app或网页的视觉，通常好的布局，能够给用户带来非常舒服的视觉效果，更容易得到用户的接受和好评。然而，想要好的布局，就需要将最经常用的分割方式一起找出来，分析其优缺点，只有知道了他们的优缺点，才能运用得当。

A、背景栏分割

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

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

优点：设计时好的布局，可以提高屏幕的利用率，同时能让界面看起来更加的有秩序，大大的降低了用户对大量信息的理解时间。

缺点：对图标视觉的要求相对较高，因此在做这种页面时，一定要把控好图标的色彩搭配和细节的一致性，不然画面会显得很粗糙。

总结：这种布局分割适合内容多且不好梳理的页面，利用背景分割，将每个部分分成独立的模块，将用户的注意力留在想看的模板，同时提高用户的理解能力，如图：

B、分割线分割

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

优点：这种设计方案比较保守，当不知道用那种方式来做分割时，可以选择这种，一般都不会错。

缺点：需要处理好线的粗细，间距和颜色，线条不宜过粗，颜色不能太重，若处理不好会让页面有一种挤压及粗重的感觉。

总结：这种分割线通常使用在UGC模块上，首先需要考虑到屏幕的利用率，其次对每个用户产生的内容要进行分割，但存在感不能太强，避免干扰用户对内容本身的注意力，所以通常会使用在UGC模块上。

C、留白分割

所谓的留白其实是指页面元素间或包围页面元素的空白空间，虽然这种手法可能会被认为浪费空间，但不得不说，目前大部分app的首页都是采用留白分割，如图：

优点：使用留白能让整个页面在视觉上展现的更加舒适，去除很多的边边框框的束缚，显得更加规整，且不杂乱。

缺点：要求界面元素统一，重复，同时图片的大致调性要一致，不然会显得界面和凌乱，而且留白的增多也意味这会减少屏幕的利用率，因此在使用留白做分割还是要符合产品调性和整体页面的展示效果。

总结：这种分割较为适合产品调性较简洁，同时页面图片较多的界面，因为与其说时留白做分割，不如说时图片做分割。

D、卡片投影分割

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

优点：能快速吸引用户的注意力，而且容易出现视觉效果，设计师的时候大部分设计师都比较喜欢用卡片投影。

缺点：屏幕的利用率比较低，更主要的时开发实现有些难度，上线版一般和设计稿差距很大。

总结：卡片投影更适合信息量多，但视觉较为精简的页面，因此目前很多的电商，金融类首页用的都是卡片投影式的设计。

其实，总的来说，任何表现形式都是为了更好的呈现功能和内容，但作为一名合格的设计师，你不能盲目的去追随趋势，一定要了解为什么采用这种形式。