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

在后面的日子里我们会推出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+等等。

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

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


五、总结

今天我们通过四个方面谈了一下APP里面的“流”,每个信息流都有自己优缺点,我们要根据不同的产品和用户群体,选择适合的设计布局方式,以此提升产品的体验感。

(0)

相关推荐

  • Instagram的UX和UI的演变史

    介绍 用户体验(UX)和用户界面(UI)有着千丝万缕的联系. 这两个术语的意义常常被误解: UX设计师需要平衡业务目标和产品目标,同时对用户的需求也有深刻的理解. UI设计师确保产品的界面直观,响应迅 ...

  • 最懂李彦宏的,竟然不是百度自己

    作者:魏晓 来源:蓝媒汇 搜狗的王小川不想只做个看客.他在今天凌晨发了一个微头条,分享了一则从百度Feed业务沟通群中流出的图片. 图片内容显示,李彦宏从别人家的平台看到一条有关搜狗IPO路演PPT注 ...

  • 今日头条feed流推广怎么玩?

    想必大家近期经常聊到"Feed直播间"这个东西,本文讲解Feed流直播间广告以及feed直播间账户搭建有什么不同. 一.抖音feed直播间是什么?和信息流广告又有什么区别? 这里给 ...

  • 信息流的广告图片可以这样做

    话不多说,首先我们先来看张图: 你首先看到的是什么? 相信大部分人首先看到的都是左上角图1中的数字3000000;右上角图2中的小姐姐;左下角图3中的人和酒;以及右下角图4中的三个美女. 这就是信息流 ...

  • 二类电商|如何定义抖音feed流?

    好多朋友中了抖音的毒,一刷抖音就停不下来.观看抖音直播也已经成为⼈们的娱乐⽅式之⼀,相⽐刻板的视频,它增加了互动的优势,在形式上也更为⽴体.内容更⽣动. 这跟我们要说的Feed流有什么关系呢?别急,听 ...

  • UI系列干货 - 切图&命名

    我们都知道UI设计切图是最重要的设计输出物,切图输出的命名规范不规范也直接影响到工程师对设计效果的还原度.网上也有很多这样的教程,大多比较笼统,今天我们就从两个方面0基础教你学会切图和命名的方法. 切 ...

  • UI系列干货-如何解决UI设计中的视觉误差?

    俗话说眼见为实,但其实我们的眼睛经常欺骗我们.眼睛通过光的反射接收信息,然后经过一次「脑补」最终形成我们所谓「看见」的图像.脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产生偏差.这 ...

  • UI系列干货 - 详解UI设计规范,入门必读

    作者:JIN石为KAI 01.设计规范综述 1.1 定义 作为一个B端产品,为了应对公司快速迭代开拓市场和一部分购买者的定制化需求,与此同时还要保障产品间的用户体验一致性,近年来设计规范这一解决方案不 ...

  • UI系列干货 - UI到底是什么?要不要入行?

    一.UI到底是什么? 很多人初入这个行业不知道UI是什么,被培训班天天洗脑,以为画个ICON图标自己就是UI设计师了,从而导致很多人刚入行就开始大量画一堆图标,精致到丢过去都能砸死个人,很容易让一些新 ...

  • 品种系列之:“figo preto”无花果,外黑内流蜜?超级棒

    品种系列之:“figo preto”无花果,外黑内流蜜?超级棒

  • 干货分享:实体店如何用同城号引流获客!学会这十招,生意爆棚。

    干货分享:实体店如何用同城号引流获客!学会这十招,生意爆棚。

  • 文章系列三一 心易派鐵板神數流年流月斷法秘訣讲解 铁板宗师

                 鐵板神數流年流月斷法秘訣 本法应用到河洛命卦具体讲解于下 一.流年天干基數 二.流年條文秘數5300 三.求流年條文公式:歲數-1*10+流年天干基數+5300=流年條文 如 ...

  • 干货软文怎么写,操作起到引流效果

    大家好我是专注9年自媒体人沐小沐,我们来分享下.软文怎么写去引流. 软文:找好软文切入点软文的切入点就是写这篇文章是从什么方向来写,从什么角度写这篇文章,或者说你写的文章的主题是关于什么.写好软文那一 ...

  • 品牌系列干货——折页设计技巧(2)

    本次将给大家带来品牌干货里面的折页设计技巧最后一篇文章,因为折页类内容比较少也很简单.说白了就是一个排版问题.掌握版式就掌握了logo.海报.画册.界面等等.那我们就知道其实折页和单页在内容设计上的做 ...