13.耍好控件 | 大厂都是如何推敲图片列表排版的?

人类是感性生物,眼睛对于图像捕捉的兴趣程度往往是大于文本的。也正是因为应用程序中无处不在的图片,让我时常对于图片的展示方式习以为常、司空见惯。殊不知静下心来思考一番其排版展示背后的原因,还是总结出了一些原理。

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

一、图片的比例

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

这几个比例从源头上讲,都离不开早期的胶片摄影到现代相机传感器大小的一步步演变。篇幅原因我不去多做扩展,有兴趣的朋友可以去查阅这方面的资料。

我主要是解析一下针对移动端设计师来说,产品设计前期应该如何规定图片的展示比例。我认为最关键的要素还是列表图片的应用场景来源用户是谁。

· 1:1

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

1:1的图像展示往往是希望图像在横向与纵向上展示的信息尽量完整化,布局尽量规整化,所以我们能看到大部分电商平台展示商品图片都是遵循1:1比例。

· 4:3

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

所以当列表展示的是UGC内容,图片主要来源是平台用户,那么用户最可能的图像来源渠道就是手机摄影了。这时候设置图片比例为4:3是比较合理的。

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

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

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

· 16:9

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

倒也不是说图像的比例一定要遵循以上这几种,只能说这几个比例覆盖了大多数的图像场景。使用这些比例展示图像,在非常规比例图像需要适配裁剪的情况下,损失的像素能达到最小。(图像适配方案我已经在《耍好控件 之 图片处理》中讲到过了,在此不再重复。)

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

二、图片列表的排列

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

单列+文本=列表布局

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

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

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

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

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

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

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

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

两列+并排=网格布局

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

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

两列+错位=瀑布流布局

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

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

多列+拼图=拼图布局

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

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

 

原文链接

- Posted in: Columns

- Tags:

0 条评论 ,1,835 次阅读

发表评论

  1. 既然来了,说些什么?

Top