Feed流 – 图片设计布局及适配规则(三)

@胡桃子:人类是感性生物,眼睛对于图像捕捉的兴趣程度往往是大于文本的。每天被淹没在各种Feed流中,对于图片的展示方式习以为常、司空见惯。

在设计的时候,觉得只需设计一个卡片,然后复制粘贴整个界面就大功告成了。很容易忽略图片适配的问题,比如微信朋友圈你无法保证用户发几张图片,也无法预估图片的比例,那么就需要我们对它设定相应的规则。

下面我总结了最易出现问题的列表布局、大图布局、宫格布局、拼图布局等图片的适配方式。

一. 列表布局

4vocp3bavur.png插图

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

适配规则:根据屏幕的大小按照一定的比例进行等比缩放。

jgtvkp0gndt.png插图(1)

(图片常用的比例👉Feed流 – 图片比例设计(二))

二.大图布局

wkr1jrwwszc.png插图(2)

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

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

适配规则:

1、图片比例固定。不管用户上传的是横图还是竖图,其展示图片的比例都固定。这种适配方式图片占用空间小,可提高用户的阅读效率。

l5v1cdq53xe.png插图(3)

2、随图片而变化。当用户上传不同比例的图片时,图片展示宽度为屏幕宽度,而图片的展示高度根据确定的宽度等比例缩放。采用该适配方式能将图片信息表达完善,图片占用空间大,适合图片质量高,用户以图片浏览为主的产品。

mpfxpehu1a4.png插图(4)

三.两列网格布局

1. 两列并排布局

k3f4nxckbkq.png插图(5)

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

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

适配规则:根据屏幕的大小按照一定的比例进行等比缩放。

wsc4w0vl2cr.png插图(6)

2.两列错位瀑布布局

jbm03kgvlnd.png插图(7)

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

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

适配规则:

1、图片比例固定。和两列并排的适配规则一样,高度发生变化的原因是内容(例如标签、短文案等)的增加和删减,可查看淘宝的图片流样式,这里就不过多重复了。

2、随图片而变化。固定宽度,图片高度根据固定宽度等比例缩放,这里可查看花瓣app的图片流样式,不过多介绍了。

四.拼图布局

jrqzhntbsdl.png插图(8)

拼图布局也是增加了图像排版的趣味性,样式新颖类似杂志的排版,因此也叫杂志式布局。相对于用瀑布流来增加趣味性,拼图能显得更加规整。

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

适配规则:

下面我总结了宫格布局的规则,在设计时你可以不用把每种情况都设计完,只要把不同图片适配的方案发给开发即可,他们会选用相应的规则。

rngvts4intp.png插图(9)

五.宫格布局

宫格式布局也就是用户上传的图片会适配到一个个的方块中,宫格布局的形式多种多样可以是九宫格、五宫格、三宫格,下面以较为复杂的九宫格的适配为例。

九宫格的适配未对屏幕进行区分,但对只上传一张图片进行了特殊的处理,二张或二张以上直接以最小边为方块的宽,然后等比例缩放,图片的具体适配方案如下。

适配规则:

1、当图片为4~9张时,如下图,填到对应的位置,如下:

nyvpqay55h2.png插图(10)

2、当图片为3张时,3、5位置对调,排成一行:1、2、3,如下:

sxsuiqadsvd.png插图(11)

(示例图只展示宫格排列,下间距没有参考意义)

3、当图片为两张时,直接将图片适配到1、2格子。

4、当图片为1张时,如果0.5 < = 宽 / 高 <= 2 时,被限定在1 – 4格子的范围大小(包括间距),也就是凡是宽高比在这个范围时,最长的那边占两个格子加间距,如下:

lgi3at3ldz2.png插图(12)

(示例图只展示宫格排列,下间距没有参考意义)

当图片宽 / 高 > 2的图片(如全景图),最多占三栏,高最多占一栏(包括间距大小),如下:

f054bfbqzpu.png插图(13)

(示例图只展示宫格排列,下间距没有参考意义)

当宽 / 高 < 0.5(如微博长图),高最多占二栏,宽度最小占二栏1/3(包括间距),如下:

osbjbane0jk.png插图(14)

参考引文

《社交应用动态九宫格图片的规则》: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流 – 图片比例设计(二)

原文地址:胡诌青年(公众号)作者:胡桃子cabz5hfe4ao.jpg插图(15)

人已赞赏
UI设计

浅谈分段控件

2020-10-29 22:05:34

UI设计

一岚美业APP v1.0

2020-10-29 22:05:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索