@胡桃子:人类是感性生物,眼睛对于图像捕捉的兴趣程度往往是大于文本的。每天被淹没在各种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流 – 图片比例设计(二)
原文地址:胡诌青年(公众号)作者:胡桃子