提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
-------------------
文内部分观点来自:
海盐社-姜正
吴星辰
Ethankdesign
------------------
1.信息流是什么
例如书架、橱窗、展柜等,
多个物品按照特定规律依次排列,这种呈现方式称之为流
流符合移动端的信息归纳原则
2.信息流的作用
信息流的核心功能是将什么内容呈现给用户,通过何种组织形式呈现给用户
feed流根据内容属性的不同可以分为3种:文字feed流,图片feed流,视频feed流
一个产品以何种方式呈现feed流,是由产品定位决定的,而他将主导设计形式,了解用户的关注点。只有适合产品性质的形式才能将信息完美的传递给用户。
平台希望用户长时间停留在产品上,满足feed流里面的广告变现,实现商业目的。
文字feed流:标题文字+辅助图片
· 优点:信息明确,一目了然,一屏可展示多内容,信息获取率高,学习成本低
· 缺点:视觉冲击力较弱
决定图片在左或者在右的关键:根据用户自左到右的阅读习惯。因类似资讯类,新闻类app,图片并不能完全准确传递信息的内容,因此把图片放在右侧作为辅助, 而类似商品类app,图片本身是吸引点的其中一部分,能够准确传递信息,因此把图片放在左侧
图片feed流:图片+辅助文字
图片feed流:可分为水平单图和水平双图
图片高度
· 高度固定:排版整齐,方便对比
· 高度不固定:展示完整,布局灵活,不死板
水平双图
· 优点:展示内容更多,方便对比
· 缺点:信息较杂乱
水平双图设计注意事项
· 图片质量:图片清晰,主体明确,色彩和谐
· 文字层级:字体大小
· 图标及头像:图标不是重点,不宜过大(建议20x20px); 头像也是(建议30x30px)
· 间距把控:根据邻近原则,元素的关联性越大,间距越小,且间距需遵循规律(等分原则和五分原则),不可随意
· 通常采用限宽不限高的适配方式,让布局更灵活,卡片+投影的方式能更好的区分层级关系
· 如下厨房,减少模块分割,可让页面简洁从而与其他页面风格保持一致,但同时要更注意间距的把握,才能使层级分明
· 通过观察可以看出,小红书的双图间距明显比其他的窄,使屏幕的利用率更高,是因为小红书首页主要是以图片流展示,无其他模块(除了常规tab和搜索),再结合小红书作为UGC社区兴趣分享平台,因此更窄的间距能够使其更饱满且符合产品调性的同时不会显得凌乱
水平单图
· 优点: 图片主导性强,页面焦点集中多用于展示页面,引导用户沉浸式阅读
· 缺点:占用位置过大,展示内容较少
水平单图设计注意事项
· 下厨房 关注tab:图片不能点击进入,交互没有页面跳转,既然是已关注的人,自然我们会更关注她的作品本身,以最少的路径来展示图片,秉承了下厨房简洁的特性
· 与下厨房相比,vue明显更看重社交,因此把评论点赞送礼等放在了优先级更高的位置
· 设计类和经验分享类app更适合用水平单图的形式,图片主导性强且页面焦点集中
图片流总结
· 优点: 视觉冲击力强,更容易吸引用户,适配简单,学习成本较低,画面视觉层级丰富,优秀的图片可以提升整体产品气质
· 缺点:占用空间大,展示内容小,信息传达不如文字直接明确,针对显示不全的缩略图需要二级点击
根据排列方式不同分为:时间轴feed流,智能算法feed流
微信朋友圈具有重社交属性,用户虽然刷的是内容,但是重社交属性内容建立在熟人身上,所以更体现人的重要性; 微博有社交属性但是设计形式是轻社交形式,人和内容同时体现
feed流设计注意事项
· 一般只能算法feed流可以放更多的内容,即使在不方法的情况下,图片还是能够看清楚,用户可以快速浏览图片信息
· 时间轴feed流突出文字内容,突出头像,左边一般会有5/1的留白,目的是让用户更加聚焦于文字阅读
视频feed流:短视频+辅助文字
· 优点: 视觉冲击力强,更容易吸引用户;感官冲击力强,满足用户的在视觉和听觉上的感受;沉浸式体验好,用户可以专心观看当前内容;操作交互简单,用户只需要简单的上下滑东便可切换;短视频形式,用户的接受度更强。
· 缺点:占用空间大,展示内容少;需要缓存,对网络质量要求高;只能进行短视频播放,内容展示不全;交互上需要频繁刷屏;学习成本较高,用户初次进入需要辅助引导说明。
希望通过设计笔记的记录,能够加深自己对设计细节的理解和提高自己的分析水平。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册