App设计体系之feed

265天前发布

原创文章 / UI / 教程
渐渐见减减简 原创,如需商业用途或转载请与渐渐见减减简联系,谢谢配合。

App设计体系之feed

feed是由多个内容提供源组成的资源聚合器,帮助用户持续地获取最新的订阅源内容。

feed内容产出方包括UGC(用户生产内容)和PGC(专业生产内容),内容的元素包括图片和文字,由于图片比文字的权重大,因此图片的样式决定了界面的调性。


1、全屏大图

大图布局也就是不管用户上传几张图片,都以一张大图进行展示,对图片素材要求较高,适用于内容为视频或者PGC,沉浸式体验,感官冲击力强。


2、宫格布局

适用于内容为UGC,内容丰富,图片限制在1~9张,图片显示尺寸根据图片张数而变化。


以朋友圈的9宫格进行讲解


1张图片时,宽和高的比例在0.5~ 2 ,以长度较长的那边为准,尺寸为2个格子(包括间距);


1张图片时,宽和高的比例大于2,图片宽度为3个格子;


1张图片时,宽和高小于0.5,图片高度为2个格子;


3、拼图布局


4、瀑布流布局

不会因为图片比例不同而导致界面无法适配,符合用户的Z型阅读轨迹。


5、标题为主图片为辅

大多适用于PGC内容,如新闻类App,用户根据标题能更快筛选出感兴趣的信息,对标题的要求很高。

5
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息