人类是感性动物，眼睛往往更喜欢捕捉图像而不是文字。也正是因为应用中无处不在的图片，让我经常习惯了图片的展示方式。不过静下心来思考其排版显示背后的原因后，还是总结出了一些原则。图片出现的场景有很多，本文主要总结一下图片在列表中的排列方式。以下是我对几十款APP的总结分析，希望能帮助到大家以后更方便的展示和排版图片。图片比例网上流行的图片比例无非是1:1、4:3、16:9。但是仅仅记住设计师使用的这些比例数据，不了解背后的原因，你可能仍然难以使用它们。从源头上看，这些比例与从早期胶片摄影到现代相机传感器尺寸的一步步演化是分不开的。篇幅原因，我就不展开更多了，有兴趣的朋友可以查看一下这个资料。我主要分析移动端设计师在产品设计前期如何指定图片的显示比例。我认为最关键的要素是列表图片的应用场景和来源用户。1.1:11:1的画面由于其正方形的规律性，可以最大程度地突出主体。而正方形最容易适配非1:1的图片，可以找到一种通用的适配方案，最大限度地保留主体的关键信息（我想这也是头像经常被用户裁剪的原因之一到一个正方形）。1:1图片展示往往希望图片在横向和纵向展示的信息尽可能完整，布局尽可能规整，所以我们可以看到大部分电商平台展示商品图片都是采用1:1比例。2、4:3说到4:3，很多朋友肯定第一时间想到的就是3:2的画面比例，因为原来135胶片输出的照片比例是3:2。但随着手机摄影在大众中的普及，4:3的画面逐渐流行起来。而市面上主流手机拍照的照片尺寸一般都是4:3。所以当榜单展示UGC内容时，图片的主要来源是平台用户，那么用户最有可能的图片来源就是手机摄影。这时候将画面比例设置为4:3比较合理。类似案例如58同城允许房东自行上传租房信息图片。不可能每个房东都有专业的摄影器材，大部分图片可能都是手机拍的。所以此时，将图像显示设置为4:3，将最大限度地减少用户图像的适配和裁剪损失。但这是否意味着3:2的画面比例在移动端已经不存在了呢？不是，要看产品定位和用户场景。马蜂窝和Airbnb是两个专注于旅游衍生业务的产品。大多数生产内容的用户可能在旅行中涉猎过摄影。因此，UGC图片的来源渠道很可能是摄像头。对于摄像头设备输出的图像，3:2比例的用户图像的自适应和裁剪损失最小。3.16:916:9不用赘述，这是一个很典型的视频比例大小，一般视频列表的图片大小比较常用，比如爱奇艺、优酷等视频产品，基本都用16:9大小显示图像。并不是说图像的比例一定要遵循上述几种，只能说这些比例涵盖了大部分的图像场景。在需要适当裁剪非常规比例的图像的情况下，使用这些比例显示图像可最大限度地减少像素损失。当然，当榜单展示PGC内容，图片来源主要由团队运营时，那么图片比例就可以更加自由，因为上传的图片往往可以在内部进行控制。图片列表的排列方式我参考了很多应用，发现主流图片的排列方式基本上可以用“列结构+行结构”来覆盖。下面听我说说。1、单栏+文字=列表布局列表布局是最常见的排列方式。列表布局中的图片展示较小，用户一般不会注意图片的细节，所以列表布局往往更注重文字内容的展示。曾经看到一个问题：什么情况下列表应该在左边，文字在右边？什么情况下右边的文字应该在左边？首先我们要明白，列表布局符合人们的浏览习惯（从左到右，从上到下）。,是典型的F风格浏览布局。因此，大多数人浏览左右结构列表并遵循此浏览轨迹。所以你可以把更重要的内容放在左边。例如：很多新闻资讯产品采用的是文字在左，图片在右的布局，因为图片与标题的内容关系不大，图片只是用来增加阅读的趣味性。根据用户的浏览习惯，将标题放在左侧可以更好的突出内容，而不会被图片打扰。对于图片内容优先于文字内容的情况，也可以利用用户的浏览习惯，在左侧展示图片，让图片更直观的传达内容，让用户的视线快速向下浏览左边的图片。很多电商APP都是采用左图右文的形式。（之前也看到一个网友分享的一个观点：因为大部分用户都是右手操作，在滑动页面的时候，手指挡住了副图内容，重要的文字内容在滑动的过程中也可以无障碍阅读过程。我觉得这也是个好主意。）2.单列=大图布局大图布局在一行中只显示一张图片。这种排列占用了手机屏幕上大量的垂直空间，但也可以帮助用户过滤繁琐的信息。只关注屏幕上的1-2个内容。正是因为图片的大布局，才能将图片的细节完整的展示给用户，所以对图片的质量要求往往非常高（这里所说的图片质量不仅仅是像素质量，而是还有图片内容的质量）。我发现使用这类图片排版的产品，或多或少都会设置专门的操作人员进行编辑，或者使用审核机制来完成对图片视觉表现的把控。3、两栏+并排=网格布局与单栏大图布局相比，双栏网格布局可以在一屏中显示更多的图片内容，并且可以更快地将内容传递给用户。与列表布局相比，网格布局希望在屏幕空间利用率高的前提下，用图片来命中目标不明确的用户。由于都是为了节省屏幕空间，这种布局下的文字配置基本不会超过两行，一般都会省略。4.两列+错位=瀑布流布局为了增加网格布局的趣味性，避免用户视觉疲劳，在单一的并排形式基础上衍生出一种错位展示形式，即瀑布流。瀑布流让单个内容在垂直方向的展示空间，使得内容与内容之间存在错位的形式。虽然增加了视觉跳跃，但也容易造成用户视觉流的混乱。使高度较高的内容易于查看，而高度较低的内容则容易被忽略。因此，瀑布流更适合可以平衡图片高度的列表场景。5.多栏+拼贴=拼贴布局拼贴布局也增加了图片排版的乐趣，可以根据拼贴的形式组成更多的栏目。比起用瀑布来增添趣味，拼图可以显得更有规律。拼贴中单个拼图的比例如何配置比较自由。对于高质量的图片，可以占据较大的版面，对于低质量的图片，可以适当缩小。如何定义取决于设计者前期规划的把控。
