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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Feed流设计:那些容易被忽略的图片适配知识
0.0°
2019-03-28 原创文章 经验/观点 举报 12908 645 290 30

我们每天被淹没在各种Feed流中,感觉它的设计是如此简单,只需设计一个卡片,然后复制粘贴整个界面就大功告成了。

Image title

我们每天被淹没在各种Feed流中,感觉它的设计是如此简单,只需设计一个卡片,然后复制粘贴整个界面就大功告成了。


但是大家很容易忽略图片适配的问题,比如微信朋友圈你无法保证用户发几张图片,也无法预估图片的比例,那么就需要我们对它设定相应的规则。下面我总结了最易出现问题的大图布局、宫格布局、拼图布局的图片适配方式。


一、大图布局


大图布局也就是不管用户上传几张图片,Feed流中以一张大图进行展现,点击详情或通过滑动才能查看其他图片。使用大图布局的图片适配方式一般有两种,一种是展示图片比例固定;另一种是随图片而变化。


1、展示图片尺寸固定


不管用户上传的是横图还是竖图,其展示图片的比例都固定。采用该适配方式图片占用空间小,可提高用户的阅读效率,因此当你的产品目的想要提高用户的阅读效率时可以使用,比如字里行间。

Image title



2、随图片而变化


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

Image title



需要注意的是,采用该方式需要设置阈值,当图片的高度超过一定数值,高度就不在增加以阈值为准,当图片的高度小于一定数值,高度不在减小,以阈值为准。


二、宫格布局


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


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

Image title



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

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

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

Image title



4)当图片为1张时,宽 / 高 > 2的图片(如全景图),最多占三栏,高最多占一栏(包括间距大小)

Image title



5)单张图片,宽 / 高 < 0.5(如微博长图),高最多占二栏,宽度最小占二栏1/3(包括间距)

Image title



三、拼图布局


这种布局方式是将几个图片拼成一个矩形,样式新颖类似杂志的排版,因此也叫杂志式布局,不过因为其对图片的要求较高,因此多应用在图片社交中,如in。

Image title



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

Image title



四、总结


今天主要和大家分享了Feed流中容易被大家忽略的图片布局样式。


1、大图布局:图片适配主要有两种方案,其中随图片而变化的情况需要注意设置阈值,防止用户上传超长图影响界面样式。

2、宫格布局:重点需要注意1张图的适配情况。

3、拼图布局:拼图布局主要需要给开发说明采用什么拼图规则。



参考引文

社交应用动态九宫格图片的规则http://t.cn/RVagHD0

仿Nice 首页图片列表 9 图样式 (iOS) http://t.cn/EMHgp3O

那些谋杀你时间的Feed流http://t.cn/RNSvWi3

微信公众号:设计早8点

更新:2019-03-28

收藏

645人已收藏

风筝KK

微信公众号:设计早8点

  • 39

    作品

  • 5366

    粉丝

  • 59

    关注

  • 以字段映射为例,带你了解B端页面该如何设计!
  • 【B端】字段映射如何设计?别被大厂方案禁锢了
  • 小团队有必要建立完善的设计体系吗?
  • 如何提升B端界面的精致度,做到这两点就够了!

    猜你喜欢

      2019-03-28 原创文章 经验/观点 举报 12908 645 290 30

      Feed流设计:那些容易被忽略的图片适配知识

      0.0°

      你确定要举报Feed流设计:那些容易被忽略的图片适配知识

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年03月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      290
      645
      30

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

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

      登录

      手机号

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

      登录
      第三方账号登录