Facebook信息流图片展示逻辑规...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
4086 1 10 2018-04-13


相信大家平时在各类社交平台看到的照片,基本上都是九宫格展示的,

例如大家茶余饭后必刷的朋友圈和微博

  国内基本都是这种九宫格排列

然而墙外的Faceboo可却独树一帜,运用了不一样的展示方案:不同数量不同尺寸的图片上传之后有着不一样的排列效果。

非死不可图片排列展示独树一帜



究竟是人性的扭曲,还是道德的沦丧 为什么呢,经过一盏咖啡的功夫,我们一拍大腿,大致总结了以下有优劣:

一盏盖碗……提拉米苏


优势:

1,特别有逼格

2,无论几张图都能充满屏幕,增大图片展示面积

3,欢迎大家继续补充


劣势:

1,图片摆列的方案较多过多,影响信息流流畅性,容易卡顿

2,需要一定的开发成本

3,欢迎大家继续补充


于是为了探究facebook图片展示规律,我们决定用穷举法来探究其中的奥秘


我们准备了以下几个尺寸的图片,为了方便观察和计算,我对他们用颜色做了区分,

不同尺寸的图片用颜色作区分


同时用字母进行如下命名:

长图(A 红色),

不是很长的长图(a 粉色),

宽图(B 蓝色)

不是很宽的宽图(b 粉蓝色)

正方形图(C 黄色)

 

图片发布流程 

Image title



通过图片发布流程我们可以大致看出,图片的排列基本上选择完成后就可以预览到拼图的效果,可见排列图片的逻辑是在APP本地完成的


剩下的时间我们根据图片数量和不同尺寸的排列方式,进行了尽可能的穷举来找规律


拼图方案:

单张图

单张图直接宽度铺满屏幕,高度按照图片比例高度自适应。


两张图

发布过程中我们发现图片选择顺序对排列结果有直接影响,因此我们同时需要把图片发布顺序加入测试内容中


因此排列方式有5X5=25种

5X5种排列方式图

双图方案排列



得到以下共计四种排列结果

Image title1,长图并排(AA, Aa,aA)

3,宽图并排1(Bb,BB,bB)

3,宽图并排2(bb)

4,方图并排(AB,Ab,AC……CC)


三张图

三张图就有5X5X5几种排列方式


此处用AA开头举例



我们得到以下几种排列方式


Image title

这一过程中其实我我们就隐隐发现其中的规律,因此出去开头一定数量的实验后,后面基本上就是根据猜想进行验证了


四张图

四张图有5x5x5x5种组合


这里用AaB开头举例

四张基本就是验证前面的猜想,同时尝试更多极限组合,找出可能的排列方式

最后得到以下几种排列

四张图片的排列组合有5个

五张及以上


五张及以上就只有一种样式了


Image title



经过及一定数量的尝试和猜想与验证后,我们得到以下规律:

APP会先根据照片数量选择排列方案,然后再方案中选择裁剪面积最小的方案,如果几种排列方案裁剪面积相同,则选择首图保留最多的方案


也就是说设计人员其实只是设计了一些图片排列的模板,然后APP按照上面的规则进行了图片排列,设计人员应该得到的业务需求是尽量增大图片展示面积,从而提出了这个解决方案虽然我们在研究的过程中差点被忽悠瘸了运用了最笨的穷举法,耗费了较大的工作量,但是我们最开始拍大腿的想法得到了验证,也是可喜可贺。


相对于普通的九宫格,Facebook的图片展示方式确实让人耳目一新,独特的裁剪拼图逻辑也能保证重要内容得到优先展示,然而所需要的开发量也并不小。我们猜想其中原因可能是通过统计数据发现facebook用户发图较少超过5张(因为目前只对5张及以下做了适配),于是为了提升大多数用户体验效果做了此设计。也可能是希望正向引导用户少发内容相似的图片(不信大家回去看朋友圈,大部分九张图的话,都有好几张内容相似,感觉就是强迫症们强行凑九宫格)。


同时,国内尚未找到有跟进此设计的APP(新浪微博曾有段时间进行了类似的设计,但现在已恢复九宫格),普遍依然采用九宫格。


究竟是九宫格图片展示更适合国人的习惯,亦或者是这种图片展示方式虽然能增加图片展示效果但对性能影响过大反而得不偿失,还需要具体数据的支持才能得出结论。

目前我们只能把原因归结于帝国主义水深火热扎克伯格压榨员工过度开发。同时也因为我们研究时间和方法的关系肯定有很多不足之处,希望大家能多提意见

开个玩笑




全部评论:1

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票