每天我们在手机上浏览各种新闻资讯、娱乐八卦、好友动态时，这些信息通常以 Feed 形式滑过。无时无刻接收着各种信息的你，有没有想过这些信息的 Feed 形式是怎么被定义下来的，不同的 Feed 形式背后又有着什么样的设计考虑呢？
相关干货介绍：
维基百科对 Feed 的定义是一种信息格式，平台可透过它将最新信息传播给用户，用户有意愿订阅网站的先决条件是网站可提供持续更新的信息。
Feed 是信息聚合的最小单元，每一条内容都是一个独立的 Feed，如公众号的每篇文章和视频号的每条视频。
Feed 流是持续更新给用户的信息流，流是一种信息呈现的形式，除了用户订阅的内容还有基于算法进行推荐的信息内容，是一种用户获取信息的方式。
在互联网早期，用户通过门户网站获取内容讯息，各大门户网站的内容都由编辑来筛选，更像纸媒的电子版。每个用户看到的都是相同的内容，没有现在流行的订阅和个性化的分发方式，用户想消费资讯就需要登陆各大门户网站去看编辑好的内容。
基于订阅的 Feed 早期使用是在 RSS（Really Simple Syndication）时期，最早应用在 RSS 阅读器中。用户可以通过 RSS 查看订阅的所有网站新消息，RSS 将用户订阅的各种信息源组合在一起形成内容，对用户而言就是一个专门订阅网站的软件。它可以收集你关心的网站更新的内容，当你关注的内容有更新时，用户可以通过订阅器获取信息。
而 RSS 这种通过接收汇总不同网站的信息来源，再集中呈现给用户的信息组织形式就被称之为 Feed 流。
随着互联网的发展，普通用户也可以通过简单的方式发布讯息，而人们也更习惯的在一个产品中去关注其他的信息发布者，比如微博、Facebook。
2006 年，Facebook 发布了“News Feed”，突破了之前 RSS 的订阅方式，用户可以自主发布动态信息，好友之间可以相互的浏览和产生互动。News Feed 就像一个新的信息集合，订阅的不再是某个门户网站、某个资讯内容，而是创作内容的人，内容就是被关注者生产的动态和在其动态内的社交行为。
目前，随着互联网产品和技术的提升，越来越多的产品开始使用 Feed 流这种形态，不再单一基于订阅为主聚合 Feed，开始演变成挖掘用户行为习惯和消费数据来进行兴趣推荐和社交推荐形式的 Feed 流，例如今日头条、抖音、视频号、YouTube、知乎等。
1. 单列沉浸式
随着短视频产品的兴起，高度碎片化和杀时间成为它的特性。用户在使用短视频产品时，会进入到一个情绪化的大脑工作状态，基本不需要思考，用脑成本低。
单列沉浸式的 Feed 形态更容易将用户拉到消费短视频的场景之中，当用户打开产品即自动播放，不知不觉就会跟着看下去，沉浸在其中。
沉浸流就像是一个永远装不满又让人兴奋下一个开出的视频是什么的盒子，无论怎么刷都有源源不断的视频出现，即使不感兴趣，手指轻轻一滑就又有新的内容。而设计沉浸式视频 Feed 流的核心要点就是不去打破用户的沉浸感。
如何做才能最大程度的维护这种“沉浸感”?
设计要点一：视觉降噪
视觉降噪就好像我们在电影院看电影时，你的眼睛只被前方那一块充满故事性的幕布吸引，周围一切都是黑暗的，让你能更沉浸的投入在电影的故事情节中。
在 UI 上做降噪的手法，可以通过强化有效资讯，消除多余杂讯，稳定变量元素，从而达到降噪的效果。
设计师应该清楚的知道页面哪些内容可控，哪些不可控。
拿视频号的 Feed 举例，描述文本内容是视频 Feed 上设计无法控制的变量元素，有些 Feed 有，有些又没有，而身份信息和操作按钮，是固定出现的元素。
两个固定元素（身份信息）间夹着不可控的变量元素（描述文本），势必产生变化，影响内容体验。固定元素受到变量元素的影响，在上下滑动 Feed 时，用户头像会因为文本内容的多少而上下跳动，导致页面节奏不稳定。
想要让页面结构变得稳定，就要让固定元素（身份信息）保持位置的稳定，不受变量元素（描述文本）拓展的影响。那么，在每次上滑 Feed 时，创作者的身份信息都是稳定的出现在左下角。位置的固定会让整个产品布局更加稳定。
左下角展示创作者身份，右下角放操作按钮是视频号 Feed 流的布局特点。同时能让视频号 Feed 流在操作布局上和抖音、快手的右侧竖立的操作布局有明显的差异性。视频号的这种特有布局追究其原因，是因为希望更多的空间留给视频本身的展示，减少页面元素对视频的遮挡。
这样的布局和抖音、快手比起来可能会牺牲部分的互动率，毕竟竖排且面积更大的操作按钮在互动数据表现上肯定会高于现在视频号采用的布局方式。但是从对浏览视频的干扰上，视频号显然选择了干扰更小的方案。
设计要点二：保持任务的连贯性，减少打断
保持任务的连续性，减少打断和干扰也是保持沉浸体验的方法之一，看评论的时候视频缩放到顶部，保证浏览视频的主任务不被打断和受到评论半屏遮挡的干扰。让浏览者在查看评论的同时，也能继续保持视频内容的不间断播放。
设计要点三：不要过度刺激
无论是产品功能的推广还是广告插入，全屏 Feed 流的转化率都会优于其他形式的 Feed。产品的发展过程会或多或少有一些功能推广、广告等方面的诉求。我们应该思考如何控制功能推广性质上的过度刺激。
如上图，产品侧希望在用户上滑视频流的过程中去推广新特效的发表。从左到右三个方案对用户浏览视频的沉浸感的打断是从强到弱的。如何更好的处理这些强行插入的内容，在提升业务转化率和不影响用户沉浸体验方面，是设计师需要去思考和决策的。
2. 单列非沉浸式
单列非沉浸式视频 Feed 流，是指内容以 Cell 或卡片的形式单列排列，一个 Cell 或一个卡片即为一个 Feed 信息聚合的最小单元载体，并通过封面图、标题、摘要、发表者身份信息等为浏览者提供部分预览内容。浏览者需要通过点击 Cell 或卡片进入二级页面来浏览完整的内容，典型的例子如 YouTube。
通常中长视频采用的单列非沉浸式 Feed 流，一屏最多可以展示 1.5-2 个 Feed 内容，单列非沉浸式 Feed 流要求设计简洁和保持克制，Feed 上保留最核心的预览内容，即内容描述、推荐信息、操作按钮，这些预览内容目的都是为了帮助用户去做筛选决策。
如何才能保持单列非沉浸式 Feed 的“简洁和克制”?
设计要点一：控制外露信息的维度
单列非沉浸式 Feed 上展示的内容是有限的，外露的信息最好控制在「内容信息、相关数据、操作按钮」三个维度以内。
之所以按这三个维度分，是因为选择需要外露的预览内容，要从能最大激发浏览者筛选和点击欲望的角度去出发。Feed 上的任何一个信息都是有价值的，对浏览者筛选内容作用不大的信息，尽量不要放在 Feed 上。同时，每个 Feed 上仅保留一个核心操作按钮，非核心操作尽量弱化处理，降低用户的认知成本。
设计要点二：减少层级
减少层级会使界面变得更加简洁，去掉卡片能使用户更聚焦于内容本身，而不是卡片的边框和装饰。
设计要点三：选择适合产品定位的布局
单列非沉浸式 Feed 在排版布局上往往需要考虑的因素比较多，如：1. 是否使用通栏的样式？2. 头像放在上面还是下面？3. 标题放在上面还是下面？4. 视频封面是否自动播放？
问题一：是否使用通栏的样式？
使用通栏或不通栏的布局取决于多个因素，包括内容类型、产品目标、体验目标等。如果视频内容需要更大的屏幕空间展示画面，通栏布局更适合。通栏布局可以充分利用屏幕空间来展示更多的内容，使用户更专注于视频，适合于当前播放浏览的场景。
而不通栏的样式，更适合让用户前往二级页面去消费完整的视频内容。不通栏的单卡 Feed，更像一个供用户浏览筛选的内容概览。
问题二：头像 / 标题放视频封面上面还是下面？
头像的位置是在视频上还是在视频下，取决于产品是以创作者为重点去推内容，还是以内容为重点创作者仅为辅助筛选的元素。用户在使用手机应用时，视觉动线都是至上而下的，希望用户先看到什么，就把什么信息放在上面。以内容为主的产品视频封面即放在最上，以创作者为主的产品，创作者身份则放在最上。
标题放在上面还是下面也是一样的道理，但标题的位置取决于是否能够帮助用户快速的了解视频内容，从而进一步消费内容提供依据。
然而现在越来越多的创作者会在视频封面上将主题以封面的形式展现给观众，平台上创作者的视频封面带主题的比例如果很大，或者平台推荐创作者在制作封面的时候能很好的带上主题，则在 Feed 的布局上可以降低标题展示的权重，将标题放在封面下方。所以标题的上或下，一方面取决于产品导向，即是否希望创作者制作带标题的封面。另一方面也要考虑现存视频资源有优质封面的创作内容的比例。
问题三：是否自动播放视频？
实际上是否自动播放封面视频，也是一个产品导向的问题，自动播放，可减少用户操作成本，更沉浸。但这需要平台具备较好的推荐算法，保证推荐的视频都是用户喜欢的。若推荐视频内容和用户喜好度不匹配，自动播放反而会变成对用户的干扰，影响用户体验。是否自动播放需要综合考虑产品特点和用户诉求。
3. 双列瀑布流
①什么是瀑布流?
瀑布流布局的英文叫 Masonry Layouts，在移动互联网还没发展的 Web 时代，Pinterest 就在使用瀑布流式的布局方式，所以也有人将瀑布流布局称之为 Pinterest 布局。
瀑布流布局是一个非常经典的布局方式，等宽不等高，根据封面原比例缩放高度达到设计预定的比例。其布局核心是网格布局，除了每个内容的高度有变化，宽度和间距都是完全固定的。
②为什么使用瀑布流?
瀑布流布局最大的优点就是提高筛选效率，更适合于 UGC 产品的使用，当我们不能保证每个 Feed 内容都是吸引用户的，双列无尽的瀑布流式布局是更高效的选择。瀑布流式的布局将每个 Feed 的决策权交到了用户手中，使它们能更快的找到自己想看的内容。
同时，瀑布流形式上简单，视觉样式简洁，能有效的降低页面的复杂度，同时节省很多空间。
瀑布流在设计上需要关注每个独立的卡片的比例大小。上文提及，瀑布流是等宽不等高的，不等高是因为封面的比例或文本的行数决定的，一般情况下，文本的行数很好控制，一行或两行差异不会太大，但封面的比例不同，会很大程度影响瀑布流单个卡片的面积大小。设计规则上应该有封面梯度的要求，避免出现竖封面比横封面占比悬殊过大的情况。
对于视频 Feed 来说，不同形态的 Feed 流满足不同的产品诉求。
单列沉浸式 Feed 流注重单个视频的观看体验，用户可以沉浸的观看视频内容。但全屏的 Feed 流容错率会更低，要保证推出的内容是用户喜欢的，对推荐算法要求就更高。
单列非沉浸式 Feed 流更适合于长视频消费，用户自主探索性要高于沉浸式 Feed 流，同时视频流卡片可以展示更多的内容，如热门视频、相关合集，用户可以通过视频 Feed 卡片去发现更多内容，从而丰富观看体验。
双列瀑布流提供用户选择的权利则更高，通过增加内容的曝光，内容的分发效率提升，为用户提供更多样化的内容选择，推荐内容契合度的容错率就更高。
欢迎关注作者微信公众号：「We-Design」
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
土拨鼠
7360.5w人气 1858文章
热评 陈家的小美工