大厂都是如何推敲图片列表排版的？

但是这是不是说明3:2的图像比例在移动端的展示就已经不存在了呢？并不是的，这就要从产品定位和用户场景来说了。

马蜂窝和爱彼迎是两款主打旅行衍生业务的产品，大多数生产内容的用户可能在旅行过程中对于摄影都有所涉猎。所以UGC图像来源的渠道很可能是相机，对于相机设备输出的图像，采用3:2的比例对用户图像的适配裁剪损失便是最小的了。 

· 16:9

16:9不用赘述了，这是一个非常典型的视频比例尺寸了，一般视频类列表的图片尺寸会比较常用，例如爱奇艺、优酷这样的视频类产品，基本都是采用16:9的尺寸来展示图像。

倒也不是说图像的比例一定要遵循以上这几种，只能说这几个比例覆盖了大多数的图像场景。使用这些比例展示图像，在非常规比例图像需要适配裁剪的情况下，损失的像素能达到最小。

当然，当列表展示的是PGC内容，图像来源主要是由团队内部运营，那么图像比例就可以较为自由一些了，因为上传的图片往往能够得到内部的把控。

二、图片列表的排列

我参考了诸多的应用程序，发现主流的图片的排列方式基本可以由“列结构 行结构”来囊括。下面听我娓娓道来。

 单列 文本=列表布局

列表布局是最为常见的排列方式，列表布局中图片展示较小，用户一般不会去注意图片细节，所以列表布局往往是更注重文本内容的展示。

曾经看到过一个问题：什么情况下列表应该左图右文？什么情况又应该右图左文？

首先要明白，列表布局和人的浏览习惯（从左到右，从上往下）相契合，是典型的F式浏览布局。所以大多数人浏览左右结构列表，都是遵循这个浏览轨迹的。所以你可以将更重要的内容放置在左侧。

举个例子：许多新闻资讯产品采用的都是左文右图布局，是因为图片和标题内容的关联性不大，图片只是用来增加阅读趣味性。根据用户的浏览习惯，标题放在居左更能突出内容，而不会被图像所干扰。

而对于图像内容优先于文本内容的情况，也可以借助用户浏览习惯，将图片居左显示，让图片来更直观地传达内容，让用户的视线顺着左侧的图片向下快速浏览。许多电商类APP就是采用的左图右文的形式。

（ps.之前还看到过一个网友分享的观点：因为用户多数用右手操作，滑动页面时，手指遮挡的是次要的图片内容，而重要的文本内容在滑动的过程中也能够无障碍阅读。我认为这也是一个很好的想法。）

 单列=大图布局 

大图布局一行只展示一张图片，这种排列方式很耗损移动端屏纵向空间，但同时也能够帮助用户过滤繁琐信息，一屏内只关注1-2个内容。

正是因为图片版面大的缘故，能够向用户十分完整地展示图片细节，所以对于图像的质量要求往往会很高（这里说的图片质量不单单是像素质量，还有图片内容质量）。我发现会采用这种图像布局形式的产品，或多或少会设立专门的运营人员编辑，或是采用审核机制，来完成对图像视觉表现上的把控。

 两列 并排=网格布局 

两列网格布局相对于单列大图布局来说，一屏内能够展示的图像内容更多，能够更快速地将内容传递给用户。相对于列表布局来说，网格布局更希望在屏幕空间利用率高的前提下，用图像去命中目标不明确用户。

既然都是为了节约屏幕利用空间了，在该布局下的文本配置基本上也不会超过两行，一般会做省略处理。

 两列 错位=瀑布流布局

为了增加网格布局的趣味性，避免用户视觉疲劳，从单一的并排形式衍生出了错位展示形式，也就是瀑布流了。

瀑布流放任了单个内容在纵向上的展示空间，让内容与内容之间呈现出错位的形式。虽然视觉跳跃性增加了，但是也容易导致用户视觉流混乱。让高度更高的内容容易被看见，高度更低的内容容易被忽略。所以瀑布流更适用于图像高度能够均衡的列表场景。

 多列 拼图=拼图布局 

拼图布局也是增加了图像排版的趣味性，并且根据拼图形式，可以由更多列来组成。相对于用瀑布流来增加趣味性，拼图能显得更加规整。

拼图中如何配置单个拼图比例大小是相对自由的，对于质量高的图像可以占据大版面，对于质量低的图像可以适当缩小。如何去定义，更在于设计师前期规划的把控。

转载声明：本文来源于网络，不作任何商业用途