UI系列干货 - 什么是信息流、Feed流、瀑布流、推荐流？

hzqadmin 阅读：14 2024-08-09 20:58:15 评论：0

在后面的日子里我们会推出UI系列设计干货，关于品牌干货先告一段落，后面碰到品牌相关我们再去推出，今年主要为线上系列干货推文，一般情况下周内会选择一三五进行推文，喜欢本号内容的小伙伴欢迎将设计工厂添加星标准时收看哦~

相信很多小伙伴在刚接触UI的时候，对一些行业里面的专业名词很是不懂。就比如说去面试的时候别人问你这里为什么用了Feed流？这里用瀑布流的意义在哪里？你们推荐流都根据哪些标签推荐的？让你简单的谈下你对信息流的理解？我相信很多朋友一下就蒙了，这哪里知道！都是看其他竞品这样做我也跟着这样做。。。显然这样的回答肯定不是明智之举，所有我们今天就围绕这些问题和大家一起谈谈~

信息流Feed流瀑布流推荐流

一、什么是信息流？

在这里我们将信息流分两种广义、狭义。

广义指在空间和时间上向同一方向运动过程中的一组信息，它们有共同的信息源和信息的接收者，即由一个信息源向另一个单位传递的全部信息的集合。

狭义指信息的传递运动，这种传递运动是在现代信息技术研究、发展、应用的条件中，信息按照一定要求通过一定渠道进行的。

说人话就是主动推给你的信息，你是被动接受的一方，常见信息流一般会以纯文字、图文、图片、视频、链接、语音、广告的方式推送。

信息流的几种类型

现在的信息流一共包括二种交互

第一种 以Facebook为代表的信息流，我们把它称作为卡片式交互信息流。

第二种以Twitter为代表的信息流，我们把它称作为时间轴的交互信息流。

卡片式信息流

卡片式信息流可以有很多东西，一行文字也可以展示多行，单张图片区域更大，同时也可以展示多张图片，即使在没有点击放大的情况下，图片内容还是能够看的清楚，用户可以快速浏览图片信息，视觉焦点大多会集中在图片上，然后才去看文字，适用于图片社交类App、娱乐性陌生人社交类App。最为典型的App有Facebook、Instagram。

时间轴信息流

突出文字内容，突出头像，由于左边会有1/5的留白，所以图片区域会小很多，整个流都会紧凑一些，目的是让用户更加聚焦于文字阅读。最为典型的App有微信朋友圈、Twitter。

信息流基本内容

我们将一个完整的信息流，从上到下依次分为三大块

个人信息区

主要有头像、昵称、与个人荣誉相关的勋章、个人介绍、发帖时间。

内容展示区

主要有语音、视频、图文、纯文字、图片、链接、广告、分享的卡片、地址信息。

用户操作区

用户操作区主要有评论、点赞、分享、收藏等，但不局限于这些操作。

信息流的设计

在开始设计信息流的时候，我们可以深入了解下产品，了解产品的定位以及用户群体，需要弄明白要做的产品属于什么信息流类型，针对不同的类型设计不一样的信息流交互。

根据之前的一些坑，这里分享几个技巧类型：

其一你可以在头像、昵称、个人介绍处理上适当的偏小一点，图片加大处理，突出图片内容，减少不必要的干扰，操作区域图标突出表达，使得用户更好的交互互动。

其二可以把头像、内容文字加大处理，图片适当的偏小一些，目的是主要的突出字体，让用户更加聚焦在文字上面，在这里需要特别强调的是图片展示逻辑，我建议大家在单张图片的情况下采用16：9的比例去设计图片区域。如果是小图九宫格话则以正方形展示.

图片展示最大范围可以根据设计要求来做，如遇到图片超过图片最大展示范围的情况，应该截取中间部分展示，如图片比图片最大展示范围要小，可以按照实际大小展示，如图片是长图的情况下，处理办法也是相同。同时除了考虑图片展示的情况下，还要考虑语音与文字，文字与链接，链接与语音，视频与文字，视频与语音等多种组合的情况。

二、什么是Feed流？

Feed英文直译是供应喂养的意思；“流”理解则是内容的呈现形式，通过什么样的形式呈现给用户。那么Feed流简单说就是无需用户搜索和思考，只要持续下滑，产品会根据数据算法为不同用户推荐关于其相关的兴趣爱好，吸引用户持续下拉。这就是你为什么刷抖音能刷一天停不下的原因。这看似是被里面精彩的内容迷住了，但其实是被feed流给控制了！

Feed流：自左而右自上而下

Feed流的3中展现形式

文字、图片、视频

因为产品不同所以呈现出的feed流形式也不尽相同，只有适合产品性质的设计形式才能将信息完美的传递给用户，方能展现产品的气质。

文字类

就是图片+文字形式呈现，排版时候我们要遵从用户的阅读习惯，自左而右，自上而下。

优点文字信息明确、一目了然；而且一屏可以展现的信息比较多，同时符合自左到右、自上而下的阅读顺序，学习成本低。

缺点视觉冲击力小，交互路径长，仅有标题信息，展示不全面。

图片类

图片类布局是将几个图片拼成一个矩形，样式新颖类似杂志的排版，因此也叫杂志式布局，不过因为其对图片质量要求较高。相比图文形式的Feed具有良好的视觉冲击力，但是在展示方面通常会弱化文字元素，好处一点就是可以在短时间内吸引用户视线。

优点：视觉冲击力强，更容易吸引用户，预览速度快，同时适配简单，节省开发成本，丰富视觉层级；高质量的图片可以提升整体产品气质。

缺点：占用空间大，展示内容少；信息传达不如文字直接明确；针对显示不全的缩略图需要二级点击；图片质量差的话很容易降低产品气质。

视频类

视频类feed流现在主要是以抖音、快手这些短视频为主，在一些电商领域也有涉足。视频性feed流相比于图片，视觉冲击力更强，能够提供更多感官上感受，容易吸引用户的注意力。现在展示形式都是主动循环播放，画面占满全屏。

优点视觉感官冲击力强，容易满足用户的在视觉和听觉上的感受；沉浸式体验较好，用户可以专心观看当前内容；而且操作简单，用户只需要简单的上下滑动便可切换。

缺点对网络质量要求高，需要缓存，只能进行短视频播放，而且占用空间较大，交互上需要频繁刷屏；

三、什么是瀑布流？

瀑布流布局最先由pinterest.com网站首创。

瀑布流特点：

其一滑动的时候会不停的出现新的东西，不断地加载新的暗示信息，通过给出不完整的视觉图片去吸引你的好奇心向下探索。

其二如今用户都是一目十行的快速阅读模式，短时间内可以会看到大量的信息，瀑布流加载模式直接避免点击的的翻页操作，在最小的操作成本下能够获得最多的内容体验，这种视觉方式，会让人容易沉浸其中，不容易被打断。

优点瀑布流里的加载模式能获得更多的内容，容易沉浸其中；错落有致的设计巧妙利用视觉层级缓解视觉疲劳。

缺点页面跳转后需要从头开始，加载量不固定，用户返回查找信息困难很大，这点没有分页更容易查找！

四、什么是推荐流？

推荐流很好理解，想必大家天天都是生活在推荐流里面。推荐流就是将你喜欢的、感兴趣的、同城的等等这些全部主动推荐给你。在大数据推荐引擎信息下所有人都是透明的，你的兴趣爱好可能你自己都忘记了，但是手机会给你记得清清楚楚。因为算法他会通过用户的阅读停留时间、点击率、点赞、评论、转发等这些给你打个标签。打个比方比如我喜欢军事，那么系统就会给我贴上军事迷标签，那些军事自媒体的作者上传作品后，系统会推荐给我这些相应匹配人群，这就是你发现你看到的都是你感兴趣的越看越爱看，有种错觉就是这APP就是天生给你定制一般。当然这些官方推荐不是谁想上就可以上的，要么质量很好很好，要么花钱买流量，比如抖音dou+等等。

优点推荐算法精确，推广效果比较好，内容质量高，为加强了用户粘性。

缺点图文形式的视觉冲击力小，展示不全面，被推荐难度大，部分推荐需要交钱买流量。