在内容展示需求较多的网站页面、APP、小程序中，为了确保页面的加载速度，一般会通过分页或瀑布流的形式进行展示，特别是图片、视频为主的内容流中，瀑布流的应用更多。下面，成都UI设计公司蓝橙视觉就给大家分享一下瀑布流排版设计该怎么做。

一、内容类型

瀑布流的内容类型根据需求的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。

二、列宽的制定

对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度。例如只需定义两列网格的左右边距均为 20pt，间距为12pt，那么不管是在那种宽度中，布局都会固定住这几个数值，并自动适配列宽。

三、内容布局

1、图片等高

在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。

2、根据有限图片比例变化

这种形式是在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商APP都是采用的这种布局形式。

以上就是本次为大家分享的瀑布流UI页面设计技巧，瀑布流适合内容展示多的场合，根据实际展示需求的不同，需要选用不同的瀑布流设计形式，让各种类的信息都能在瀑布流拥有不错的展示效果。