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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
设计笔记之信息流设计细节
0.0°
2019-07-24 原创文章 经验/观点 举报 1630 3 3 0

-------------------

文内部分观点来自:

海盐社-姜正

吴星辰

Ethankdesign

------------------






1.信息流是什么

例如书架、橱窗、展柜等,

多个物品按照特定规律依次排列,这种呈现方式称之为流

流符合移动端的信息归纳原则


2.信息流的作用

信息流的核心功能是将什么内容呈现给用户,通过何种组织形式呈现给用户


Image title


feed流根据内容属性的不同可以分为3种:文字feed流,图片feed流,视频feed流

一个产品以何种方式呈现feed流,是由产品定位决定的,而他将主导设计形式,了解用户的关注点。只有适合产品性质的形式才能将信息完美的传递给用户。

平台希望用户长时间停留在产品上,满足feed流里面的广告变现,实现商业目的。





文字feed流:标题文字+辅助图片


Image title



· 优点:信息明确,一目了然,一屏可展示多内容,信息获取率高,学习成本低

· 缺点:视觉冲击力较弱


决定图片在左或者在右的关键:根据用户自左到右的阅读习惯。因类似资讯类,新闻类app,图片并不能完全准确传递信息的内容,因此把图片放在右侧作为辅助, 而类似商品类app,图片本身是吸引点的其中一部分,能够准确传递信息,因此把图片放在左侧






图片feed流:图片+辅助文字


图片feed流:可分为水平单图和水平双图


图片高度

· 高度固定:排版整齐,方便对比

· 高度不固定:展示完整,布局灵活,不死板


水平双图


Image title


· 优点:展示内容更多,方便对比

· 缺点:信息较杂乱


水平双图设计注意事项

· 图片质量:图片清晰,主体明确,色彩和谐

· 文字层级:字体大小

· 图标及头像:图标不是重点,不宜过大(建议20x20px); 头像也是(建议30x30px)

· 间距把控:根据邻近原则,元素的关联性越大,间距越小,且间距需遵循规律(等分原则和五分原则),不可随意

· 通常采用限宽不限高的适配方式,让布局更灵活,卡片+投影的方式能更好的区分层级关系

· 如下厨房,减少模块分割,可让页面简洁从而与其他页面风格保持一致,但同时要更注意间距的把握,才能使层级分明

· 通过观察可以看出,小红书的双图间距明显比其他的窄,使屏幕的利用率更高,是因为小红书首页主要是以图片流展示,无其他模块(除了常规tab和搜索),再结合小红书作为UGC社区兴趣分享平台,因此更窄的间距能够使其更饱满且符合产品调性的同时不会显得凌乱


水平单图


Image title



· 优点: 图片主导性强,页面焦点集中多用于展示页面,引导用户沉浸式阅读

·  缺点:占用位置过大,展示内容较少


水平单图设计注意事项

· 下厨房 关注tab:图片不能点击进入,交互没有页面跳转,既然是已关注的人,自然我们会更关注她的作品本身,以最少的路径来展示图片,秉承了下厨房简洁的特性

· 与下厨房相比,vue明显更看重社交,因此把评论点赞送礼等放在了优先级更高的位置

· 设计类和经验分享类app更适合用水平单图的形式,图片主导性强且页面焦点集中


图片流总结

· 优点: 视觉冲击力强,更容易吸引用户,适配简单,学习成本较低,画面视觉层级丰富,优秀的图片可以提升整体产品气质

·  缺点:占用空间大,展示内容小,信息传达不如文字直接明确,针对显示不全的缩略图需要二级点击





根据排列方式不同分为:时间轴feed流,智能算法feed流



Image title



微信朋友圈具有重社交属性,用户虽然刷的是内容,但是重社交属性内容建立在熟人身上,所以更体现人的重要性; 微博有社交属性但是设计形式是轻社交形式,人和内容同时体现


feed流设计注意事项

· 一般只能算法feed流可以放更多的内容,即使在不方法的情况下,图片还是能够看清楚,用户可以快速浏览图片信息

· 时间轴feed流突出文字内容,突出头像,左边一般会有5/1的留白,目的是让用户更加聚焦于文字阅读





视频feed流:短视频+辅助文字


Image title



· 优点: 视觉冲击力强,更容易吸引用户;感官冲击力强,满足用户的在视觉和听觉上的感受;沉浸式体验好,用户可以专心观看当前内容;操作交互简单,用户只需要简单的上下滑东便可切换;短视频形式,用户的接受度更强。

·  缺点:占用空间大,展示内容少;需要缓存,对网络质量要求高;只能进行短视频播放,内容展示不全;交互上需要频繁刷屏;学习成本较高,用户初次进入需要辅助引导说明。




希望通过设计笔记的记录,能够加深自己对设计细节的理解和提高自己的分析水平。


更新:2019-07-24

收藏

3人已收藏

邓多肉

等我学成,就来娶你

  • 10

    作品

  • 13

    粉丝

  • 78

    关注

  • Skate kiddy项目总结
  • 2018作品集
  • 【UI中国X搜狗输入法皮肤】一起野餐吧
  • DPB设计力大师
相关标签

    猜你喜欢

      2019-07-24 原创文章 经验/观点 举报 1630 3 3 0

      设计笔记之信息流设计细节

      0.0°

      你确定要举报设计笔记之信息流设计细节

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年07月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      3
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录