@胡桃子：人类是感性生物，眼睛对于图像捕捉的兴趣程度往往是大于文本的。每天被淹没在各种Feed流中，对于图片的展示方式习以为常、司空见惯。
在设计的时候，觉得只需设计一个卡片，然后复制粘贴整个界面就大功告成了。很容易忽略图片适配的问题，比如微信朋友圈你无法保证用户发几张图片，也无法预估图片的比例，那么就需要我们对它设定相应的规则。
下面我总结了最易出现问题的列表布局、大图布局、宫格布局、拼图布局等图片的适配方式。
一. 列表布局
列表布局是最为常见的排列方式，列表布局中图片展示较小，用户一般不会去注意图片细节，所以列表布局往往是更注重文本内容的展示。
适配规则：根据屏幕的大小按照一定的比例进行等比缩放。
（图片常用的比例👉Feed流 – 图片比例设计（二））
二.大图布局
大图布局一行只展示一张图片，点击详情或通过滑动才能查看其他图片。这种排列方式很耗损移动端屏纵向空间，但同时也能够帮助用户过滤繁琐信息，一屏内只关注1-2个内容。
因为图片版面大的缘故，能够向用户十分完整地展示图片细节，所以对于图像的质量要求往往会很高，采用这种图像布局形式的产品，或多或少会设立专门的运营人员编辑，或是采用审核机制，来完成对图像视觉表现上的把控。
适配规则：
1、图片比例固定。不管用户上传的是横图还是竖图，其展示图片的比例都固定。这种适配方式图片占用空间小，可提高用户的阅读效率。
2、随图片而变化。当用户上传不同比例的图片时，图片展示宽度为屏幕宽度，而图片的展示高度根据确定的宽度等比例缩放。采用该适配方式能将图片信息表达完善，图片占用空间大，适合图片质量高，用户以图片浏览为主的产品。
三.两列网格布局
1. 两列并排布局
两列网格布局相对于单列大图布局来说，一屏内能够展示的图像内容更多，能够更快速地将内容传递给用户。相对于列表布局来说，网格布局更希望在屏幕空间利用率高的前提下，用图像去命中目标不明确用户。
既然都是为了节约屏幕利用空间了，在该布局下的文本配置基本上也不会超过两行，一般会做省略处理。
适配规则：根据屏幕的大小按照一定的比例进行等比缩放。
2.两列错位瀑布布局
为了增加网格布局的趣味性，避免用户视觉疲劳，从单一的并排形式衍生出了错位展示形式，也就是瀑布流了。
瀑布流放任了单个内容在纵向上的展示空间，让内容与内容之间呈现出错位的形式。虽然视觉跳跃性增加了，但是也容易导致用户视觉流混乱。让高度更高的内容容易被看见，高度更低的内容容易被忽略。所以瀑布流更适用于图像高度能够均衡的列表场景。
适配规则：
1、图片比例固定。和两列并排的适配规则一样，高度发生变化的原因是内容（例如标签、短文案等）的增加和删减，可查看淘宝的图片流样式，这里就不过多重复了。
2、随图片而变化。固定宽度，图片高度根据固定宽度等比例缩放，这里可查看花瓣app的图片流样式，不过多介绍了。
四.拼图布局
拼图布局也是增加了图像排版的趣味性，样式新颖类似杂志的排版，因此也叫杂志式布局。相对于用瀑布流来增加趣味性，拼图能显得更加规整。
拼图中如何配置单个拼图比例大小是相对自由的，对于质量高的图像可以占据大版面，对于质量低的图像可以适当缩小。如何去定义，更在于设计师前期规划的把控。
适配规则：
下面我总结了宫格布局的规则，在设计时你可以不用把每种情况都设计完，只要把不同图片适配的方案发给开发即可，他们会选用相应的规则。
五.宫格布局
宫格式布局也就是用户上传的图片会适配到一个个的方块中，宫格布局的形式多种多样可以是九宫格、五宫格、三宫格，下面以较为复杂的九宫格的适配为例。
九宫格的适配未对屏幕进行区分，但对只上传一张图片进行了特殊的处理，二张或二张以上直接以最小边为方块的宽，然后等比例缩放，图片的具体适配方案如下。
适配规则：
1、当图片为4～9张时，如下图，填到对应的位置，如下：
2、当图片为3张时，3、5位置对调，排成一行：1、2、3，如下：
（示例图只展示宫格排列，下间距没有参考意义）
3、当图片为两张时，直接将图片适配到1、2格子。
4、当图片为1张时，如果0.5 < = 宽 / 高 <= 2 时，被限定在1 – 4格子的范围大小（包括间距），也就是凡是宽高比在这个范围时，最长的那边占两个格子加间距，如下：
（示例图只展示宫格排列，下间距没有参考意义）
当图片宽 / 高 > 2的图片（如全景图），最多占三栏，高最多占一栏（包括间距大小），如下：
（示例图只展示宫格排列，下间距没有参考意义）
当宽 / 高 < 0.5（如微博长图），高最多占二栏，宽度最小占二栏1/3（包括间距），如下：
参考引文
《社交应用动态九宫格图片的规则》：http://t.cn/RVagHD0
《仿Nice 首页图片列表 9 图样式 (iOS)》：http://t.cn/EMHgp3O
《那些谋杀你时间的Feed流》：http://t.cn/RNSvWi3
写在最后
今天主要和大家分享了Feed流中容易被大家忽略的图片布局样式。
1、大图布局：图片适配主要有两种方案，其中随图片而变化的情况需要注意设置阈值，防止用户上传超长图影响界面样式。
2、宫格布局：重点需要注意1张图的适配情况。
3、拼图布局：拼图布局主要需要给开发说明采用什么拼图规则。
信息流设计总结
关于feed流的介绍到此结束了，回顾前两篇文章，一起来总结下列表的设计要点：
1、图文比例如何确定：根据产品属性和功能要求大概确定图片范围，然后根据主要文字信息，确定图片的高度。
2、图片尺寸如何设定：为了后期编辑上传，往往采用常规尺寸4:3, 3:2, 1:1等尺寸。
3、按钮如何摆放：主要有和图片顶对齐、居中、底对齐、另外换行，在设计时，我们可根据展现的内容具体分析采用哪种对齐方式。
4、当内容信息增加或减少该如何展示：这时候就需要考虑有标签和无标签怎么显示，文案信息过多是采用截断还是“…”代替，还是折行，这个需要根据具体页面来说，比如如果标题不重要，那么就考虑用“…”代替，如果标题重要就考虑折行。
什么？？你没看过之前的文章，传送门👇
Feed流 | 信息流设计的分析（一）
Feed流 – 图片比例设计（二）
原文地址：胡诌青年（公众号）作者：胡桃子