这部电影描述了宫殿形式布局、拼图布局、瀑布流布局三个Feed流的句子布局。

之前看到的句子《Feed流设计：哪些谋杀你时间的APP》，Feed流允许用户不断地刷信息，从而保持更多的时间。仔细观察会发现，越来越多的APP有Feed流，照片布局也不同。

如果你没有对它进行深入的研究，你遇到这样的页面完全不知道该怎么设计。

下面我将查询资料，比较不同的应用程序，然后从三个方面总结一下Feed流的照片布局。

宫形式布局拼图布局瀑布布置

一、宫格式布局

宫形式布局，也就是九宫格布局，常用于社交类的应用程序中，九宫格照片不仅可以包含很多内容，还很受网友关注。

从上面的事件可以看出，宫格式照片布局大多数用于社交发布的动态Feed流，都使用宫格式布局，但发布一张照片时，其状态仍然不同。

微信朋友圈示例：

屏幕没有区分，但只上传了一张照片，进行了特殊处理。两张或更多照片的宽度x高度为150，两边都大于150时，将根据更小的一侧进行比例缩放。

具体的图片排列如下图所示。

1。画三张的时候，3、5位置交替排列：1、2、3；

2.第二章诗一行，1，2，格子大小提前就位。

3.单张照片，如果0.5=宽度/高度=2，则限制为1-4格的范围大小(包括间距)。也就是说，当所有长宽比都在此范围内时，将在最长的一侧添加两个间距。

4。单张照片、宽/高2张照片(例如全景图片)、最多3列、最多1列(包括间隙大小)

5。单幅照片，宽度/高度0.5(如微博张图)，高度最大2列，宽度最小2列1/3(含间距)；

以上图片定制规则适合大多数社交类应用，但只有一张图片搭配时，站酷采用的是直接占据两间的方式。这是站酷的照片质量相对较高，尺寸上没有微信、微博、QQ空间这么多。

r;x-expires=1706858917&x-signature=btAazui1L0JB6U84f6etFP0Wm1Y%3D&index=6" width="640" height="1410"/>

二、拼图布局

这种布局方式是将几个图片拼成一个矩形，样式新颖类似杂志的排版，因此也叫杂志式布局，不过因为其对图片的要求较高，因此多应用在图片社交中。

如：in、Nice。

虽然in和Nice都采用了拼图的方式，不过在图片布局上稍有不同。下面我就用一个简单的图将两个图片布局方式进行对比：

从上图对比看：in和Nice最大的不同就是in的大图比例更大，同时排版时多采用大图搭配小图的方式。

Nice虽然也采用了拼图布局，不过其还是偏于保守，在4张图和9张图样式时，均采用宫格式的布局，同时在其他样式中，拼图中主要的图片采用3：2的比例，相对in来说图片展示性稍逊，但是其优点是在展示图片的同时，手机一屏可以显示更多的内容。

三、瀑布流布局

瀑布流式布局是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest，后逐渐在国内流行。

随着移动互联网的发展，这种瀑布流布局也被用在了UI界面设计中。瀑布流式布局下，用户的视线轨迹以 Z型为主，这样的轨迹易于阅读。

但由于用户采用“就近原则” 阅读信息，容易产生漏读现象 。

因此，瀑布流式的布局适于应用在社区类浏览型页面中，这样的页面往往信息量大，采用瀑布流式布局浏览体验更为流畅。

但缺点则是信息不能完全被关注，容易漏读信息。

上图可以看到：在图片收集的花瓣和视频类的YY都用到瀑布流的形式，其优势就是让用户不停的刷，缺点就是用户很容易漏掉信息，因此这种适合泛浏览类的页面。

四、总结

1. 宫格式布局：适合图片样式较多，质量参差不齐的APP。如：微博、微信、QQ空间等。
2. 拼图式布局：适合图片质量较高，尺寸较为统一的APP。如：in、Nice等。瀑布流式布局：适合图片尺寸不统一，同时属于泛浏览类的APP。如：YY小视频、花瓣发现等。

参考链接：

《社交应用动态九宫格图片的规则》

《仿 Nice 首页图片列表 9 图样式 (iOS)》

《那些谋杀你时间的Feed流》

作者：风筝KK，公众号：海盐社

本文由 @ 风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议