feed|设计羊皮卷-feed流应该如何设计

编辑导语：在当今内容为王的时代，传统的信息流无法承载日益丰富的产品内容，一种个性化的内容推荐方式-feed流逐渐孕育而生。本篇文章中作者分析了feed流的组成元素，以及常见的feed流样式。推荐对feed流感兴趣的朋友们阅读。

文章插图
在这个内容为王的时代，各个类型的产品都开始围绕着自己所处的赛道营造丰富的信息流，传统的信息流不再能承载当下丰富多样的内容，信息流也不再单纯属于信息类以及文娱类产品，许多金融类产品甚至是工具类产品都开始有了社区，不同类型的内容开始进入用户的视野。
因此传统的信息流无法承载日益丰富的产品内容，逐渐一种个性化的内容推荐方式-feed流逐渐孕育而生，其样式丰富，其中包括大卡流、双列流、沉浸流、动态流、文本流、动态流、橱窗流…..笔者将在本文中分析feed流的组成部分，以及使用场景和设计要点。
一、feed流的主要组成部分笔者调研了不同类型的feed流，发现feed流主要由以下几个部分组成。如下图：

文章插图
笔者为大家挑选了几个比较常见的元素为大家进行分析。
1. 图片/视频在大多出产品的feed流中，占最大面积的就是图片或视频。相较于文字，图片更能够激发用户点击的欲望，在带有社区属性的产品中，设计师还需要考虑如何适配横屏以及竖屏封面。
其次是如果该位置出现的是视频。在常见的视频产品中，当系统识别出该内容处于用户界面的中间区域，则会自动进行预告播放。在1-2秒的时间内，用户能够快速浏览视频中最精彩的部分。在展现方式上通常使用带有圆角的距形进行展示，圆角一般设置为：8、10、12、14、16、20PX。
2. 标题在feed的设计中，标题是最不可缺少的部分，在字体的设计上，大多数采用黑色字体。在排布方式上在一行至两行，如出现标题字数过多，可以用「 … 」的方式进行呈现。其次需要限制产品的创作者以及运营在配置标题时，注意文案应该简明扼要，不要过于累赘。
3. 文案该区域可以叫做文案区域或二级标题区域，在该区域的设计中，字体颜色建议大多数采用灰色进行展示。在文案的编写上可以加入更带有引导性的词汇用于引导用户点击。
4. 标签标签的出现目的主要有两个方面，第一个方面是帮助用户能够快速的区分内容的种类如：预告、独播、直播、精选、推荐等。用户可以在众多feed流中通过快速查看标签进行筛选，从而快速找到自己想看的内容。
第二个方面主要是帮助产品进行更加精准的流量分发，产品会根据用户的操作习惯进行分群，再根据用户兴趣给每个群体打上相对应标签。而这些标签则是对应了不同群体的用户，因此也就有了淘宝商城中千人千面的推荐形式。
5. 辅助信息辅助信息主要是为了满足不同产品的信息呈现，如在视频平台中，辅助信息可以承载电影评分、电视剧的集数、播放量、综艺的更新日期、点赞数、评论等，甚至会加入相关的快捷操作如静音。辅助信息在设计中，不易做的过于突出，需要清晰单个feed的信息层级，挑选必要的信息进行展现。
6. 操作操作区域的目的是为了产品的算法更加了解用户的偏好，因为用户的兴趣是会发生变化的，如果用户在某段时间突然特别不想看到某些内容，就可以通过点击操作将内容进行「不喜欢」或「减少相关内容」的操作，这样也能给予用户对于feed流一定的自定义。
在交互形式上，点击操作区域后，建议采用较为轻量的交互方式，如点击后出现底部弹窗或气泡的形式。