UI设计中图片列表的排版教程

　　人类是感性生物，眼睛对于图像捕捉的兴趣程度往往是大于文本的。也正是因为应用程序中无处不在的图片，让我时常对于图片的展示方式习以为常、司空见惯。今天AAA教育郭老师就针对UI设计中图片列表的排版教程进行简单的说明。
 

　　图片出现的场景有很多，但这篇UI设计中图片列表的排版教程文章我主要总结一下图片在列表中排列的方式。以下是我对几十款APP进行总结分析后进行的整理，希望能够有助于你以后对图片列表的展示排版更加游刃有余。
 

　　图片比例
 

　　线上图片的比例最为流行的无非是 1:1、4:3、16:9 这几种了。但只是记住了这几个被设计师用来津津乐道的比例数据，而不去了解它们背后的缘由，可能你还是很难去运用它们。
 

　　1. 1:1
 

　　1:1 的图像因为其正方形的规整性，让图像能够最大程度地突出主体。并且正方形对于非1:1图片的适配也最为容易，能够找到一个普适的适配方案来最大化地保留主体关键信息(我认为这也是为什么头像往往都让用户裁剪为正方形的原因之一)。

 

　　2. 4:3
 

　　说到4:3一定有很多小伙伴会马上想到3:2的图像比例，因为最起初135胶卷输出的照片比例就是3:2。但随着手机端摄影在大众中普及，4:3的图像逐渐流行起来。并且目前市场上的主流手机摄影的照片尺寸一般都为4:3。
 

　　类似的案例比如58同城让房东自行上传租房信息的图片。不可能每一个房东都有专业的摄影设备，大部分的图像可能都是由手机拍摄的。所以这时候设置图像展示为4:3对于用户图像的适配裁剪损失最小。

 

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

　　3. 16:9
 

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

 

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

　　图片列表的排列
 

　　1. 单列+文本=列表布局

 

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

　　2. 单列=大图布局

 

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

　　3. 两列+并排=网格布局

 

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

　　4. 两列+错位=瀑布流布局

 

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

　　5. 多列+拼图=拼图布局

 

　　拼图布局也是增加了图像排版的趣味性，并且根据拼图形式，可以由更多列来组成。相对于用瀑布流来增加趣味性，拼图能显得更加规整。拼图中如何配置单个拼图比例大小是相对自由的，对于质量高的图像可以占据大版面，对于质量低的图像可以适当缩小。如何去定义，更在于设计师前期规划的把控。
 

　　总结
 

　　上面我详细的讲解了UI设计中图片列表的排版教程，相信同学们对图片列表的排版有一定了解了，希望我的文章能够帮助到你，郭老师之前也分享过《UI设计中下拉刷新设计使用技巧》、《UI设计中节日闪屏设计指南》、《如何做好UI底部导航栏图标设计》、《如何做好UI详情页设计》等，因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果你想了解更多的知识，请把问题留言给在线小姐姐，我会进行一一解答。郭老师最近接到很多同学的问题，我也进行了详细的整理，后续会更新上来，敬请关注AAA教育网站。