恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Facebook信息流图片展示逻辑规则研究
0.0°
2018-04-13 原创文章 经验/观点 举报 3544 7 9 1


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

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

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

然而墙外的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(新浪微博曾有段时间进行了类似的设计,但现在已恢复九宫格),普遍依然采用九宫格。


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

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

开个玩笑




更新:2018-04-13

收藏

7人已收藏

我是宋识超

这里是我的在线作品库

  • 5

    作品

  • 40

    粉丝

  • 24

    关注

  • 2018个人作品集
  • litb单品页交互设计
  • 兰亭集势APP设计
相关标签

    猜你喜欢

      2018-04-13 原创文章 经验/观点 举报 3544 7 9 1

      Facebook信息流图片展示逻辑规则研究

      0.0°

      你确定要举报Facebook信息流图片展示逻辑规则研究

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      7
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录