西瓜视频怎么小窗 西瓜视频怎么设置浮窗
最近基本负责爱奇艺短视频产品的设计。这种产品的基本形式是进料流,这也是目前广泛使用的产品形式。今天总结了一些设计中应该注意的问题,分享给大家。
# #一、进料流量。
Feed的概念最早出现在网页时代,指的是“在RSS中用来接收信息源更新的接口”,最早应用于RSS阅读器。
什么是RSS阅读器?
这个工具太旧了。我在网上查过了。简单来说,就是一个可以收集你关心的网站更新内容的应用。比如你很关注韩寒的博客,也喜欢某科技网站的新闻。你可以将这两个网站的网址添加到RSS阅读器中。当它们更新时,你可以在RSS阅读器中看到这两个网站的更新内容,而不是分别打开两个网页。
在这个阶段,提要呈现为像邮件一样的列表,它还没有完全流动。
真正让feed流动起来的是脸书:它提供了一种新的思维方式,把朋友或者关注的对象作为信息源,此时的Feed就是朋友的动态,比如朋友发布的内容以及他们在脸书的社交行为。用户只需要轻松上下滑动,一眼就能看到朋友的遭遇,这是很多人无法自拔的。
在提要流的这个阶段,用户必须关注他们的朋友,然后才能看到他们发布的内容和社交行为。后来随着feed stream的逐渐普及和创新,feed stream中的内容已经不局限于用户在看到之前必须关注的内容。相反,它变成了“不断更新并呈现给用户的内容称为提要流”。最典型的例子就是今日头条,它会根据用户的兴趣不断推送各种新闻。
这类产品有一个显著的特点:内容从上到下排列。随着屏幕小得多的手机的普及,一个问题凸显出来:Feed太多,但屏幕尺寸有限。如何有效地展示这些动态?
进料流程示意图
为了解决这个问题,原料流产品的设计产生了两个核心问题:
1.应该向用户展示什么?
2.这些内容应该如何排序?
关于第一点,产品展示的内容主要由产品的定位决定。
关于第二点,整理内容的方法主要有三种:
1.时间排序法;
2.重力分选法;
3.智能算法排序方法。
下面依次介绍。
1\. 时间排序法
这种排序方式最简单粗暴,就是按照内容发布的时间排序。最典型的案例就是微信朋友圈。
对于朋友圈来说,feed flow的两个核心问题如下:
1.应该向用户展示什么:用户好友发的内容;.
2.这些内容应该如何排序:按照发布时间先后顺序。.
时间排序有一个致命的缺点:内容呈现效率最低。使用这种排序要求内容提供者非常克制,也要求用户对这些内容足够重视。
朋友圈正好符合这两点:
1.内容由微信好友发布,注定不会大批量更新(微信业务除外);
2.微信好友多为熟人,可以吸引用户足够的关注。
2\. 重力排序法
什么是重力分选?
重力和张力决定了进料流中的内容物被分类在一起。所谓的“重力”是保持进料流中的内容物下落的力,即时间;而拉力就是让内容向前排序的力量。这种张力是由应用根据自己关心的参数决定的,比如豆瓣集团的回应,贴吧的回复。
也就是说,在知乎上点赞多的帖子或者在贴吧回复多的帖子会更高。可以看出,重力排序法实际上是在时间排序法中加入了张力的因素。
对于进料流产品的两个核心问题,采用重力分选法的产品有以下规则:
1.应该向用户展示什么:一群用户表现出喜好的内容.
推给某个用户;
2. 这些内容应该如何排序: 按时间衰减和内容受欢迎程度综合排序。
一个典型的运用重力排序的例子,是豆瓣中“我的小组”里小组的排序:这里的拉力,是帖子的回复。有最新回复的小组,会被放在feed流的顶端展示。
值得注意的是,在重力排序法中,由于知乎的赞、帖子的回复,都是别的用户的行为,所以用户本人看到的feed流,实际上会受到大家的影响,其中包含许多热度较高的内容。
### 3\. 智能算法排序法
相信大家对这种排序法不陌生,现在各大应用都在竞相使用,比如今日头条、知乎、微博,当然,也有我们爱奇艺;
Facebook是最早开始使用这种算法,而且使用后据称效果拔群,于是越来越多的社交网络放弃使用时间排序法,转而投入智能推荐排序的怀抱。
以Facebook早期的EdgeRank算法为例,影响feed流排序,主要有三个因素:
1. 亲密度 (Affinity Score):考虑该信息的来源者和你之间交流是否频繁密切。例如你女朋友发的一条状态肯定比某个不太熟的同学发的要重要。
2. 生产成本 (Edge Weight):成本越高权重越大,例如好友发布了9张图片的成本比起发了9个字成本高,前者就会被优先推荐;又例如发布的成本远高于点赞,所以原创内容的优先级高于因为好友点赞而被你获知的消息。
3. 新鲜程度 (Time Decay):越近发生的事越容易被推荐,一般都是用一个指数衰减函数来量化动态的新旧程度。
这三种因素通过一个公式,计算出每一条feed对用户的价值分数,然后排序后呈现在用户面前。后续Facebook又引入机器学习,通过图像识别、语义分析等去预估新鲜事的质量,同时引入更多判断维度,例如:阅读时长、视频内容、用户反馈等,去综合判断一条消息的价值分数,使得算法更加聪明,更懂用户。
可以看出,智能推荐排序法,将用户关心的内容进行了更加细化的测量,从而将用户本人更感兴趣的内容推送出来,而不是重力排序法中,那些热门的内容。
然而,智能推荐也并不是十全十美。这种排序法,对算法的质量要求较高。如果一些技术比较差的公司,冒然使用智能排序法,反倒会起到反作用。另一方面,由于智能排序的不透明性和扩展性,过度的商业化容易成为用户体验的头号凶手。
总结一下,对于以上3种排序法,使用时需要注意以下的问题:
1. 如果选择时间排序法,那么就需要考虑用户关注的内容是否足够有吸引力。
2. 如果选择重力排序法,那么就需要考虑该如何选择参数保证最后的展示效果。
3. 如果选择智能推荐排序法,那么就需要考虑是否有足够的技术实力和产品自制力。
以上介绍了feed流这种产品的特点,下面介绍在为这种产品做设计时的一些心得。
## 二、一些心得
### 1\. 对于feed流类产品,卡片高度很重要
首先说一个简单粗暴的事实:减小卡片高度能立竿见影得提高feed流数据!
上面也介绍过,对于feed流类的产品,屏幕有限,内容又很多,因此效率就变得尤为重要。上面介绍的3种排序法,也是在解决内容展示的效率问题。
而对于feed流这种产品中,每个feed的卡片高度,就决定了一屏中能展示几个feed内容。下面展示的是通过精简内容、改变排版等方法,将卡片高度缩小了30%后得到的新方案:
该方案上线后,各项关键指标均有明显上涨,其中播放次数和播放时长均上涨20%以上。
### 2\. 根据场景优化feed流的卡片
卡片优化了之后,很开心得把推荐和关注两个tab都变成了新的卡片,但是很快,关注tab出现一个问题:由于这个tab里都是用户关注的爱奇艺号发出的内容,因此会出现所有卡片都有个“已关注”按钮,用户点击这个按钮,就会取消关注。但是,我们并不想用户这么轻易的取关啊。
怎么办?再改。
考虑到关注tab是用户主动关注的爱奇艺号发布的内容,对用户吸引力更大,因此希望用户能在这个tab里有更多的互动(点赞、评论、分享)。同时,为了突出爱奇艺号作者的信息,将之放在顶部,于是得到下面的优化方案。
可以看到这个卡片跟最之前的卡片很相似,但这个卡片的确更适合关注tab,而不适合推荐tab。所以,要针对不同产品的特点来设计适合的卡片。
### 3\. 主动出击,体现交互的价值
做一款产品,要尽可能多地使用自己的产品,这样才有可能更理解产品,同时也能发现一些优化点。例如:以下是在一次使用全屏模式观看短视频时,发现视频结束后会自动回到feed流。由于使用全屏模式后,手机横置,而回到feed流模式,需要把手机竖过来,体验上比较打断,因此跟产品提出优化,在全屏模式中加入选集功能,方便用户在手机横置时可以使用横屏一直观看视频。
全屏模式观看视频结束时返回feed流
另一个例子,是在做视频播放页时,与产品讨论播放页中评论和视频列表到底应该采取何种样式进行设计。笔者在研究了竞品,分析了两种页面形式之后,发现这两种页面,有着不同的产品目标。
在腾讯视频的第二个底部标签“热点”中,用户点击某个视频卡片中交互栏的空白处,则会从右向左出现一个新页面,即播放页。
如下图中第二张图所示:
腾讯视频app中短视频播放页示意
在该播放页中,点击标题下方的评论按钮,会从下向上出现一个浮层,其中展示“全部热评”;浮层的顶部有评论的输入框,点击可以输入评论;“为你推荐”部分展示的是一张张宽度和屏幕相同的、与热点标签feed流中完全一样的视频卡片。点击某个视频,则视频在当前位置直接播放。
在西瓜视频的“首页”标签中,同样点击某个视频卡片中交互栏的空白处,则视频封面移动到页面顶部,同时从上向下展开播放页的其它内容。在这个页面中,标题下方那些推荐的视频,以列表的形式展现,点击某个视频,则顶部的播放器开始播放新视频的内容,同时页面其它信息也更新为新视频内容。
而评论部分,是接在推荐的视频的下方:即用户不断向上滑动,就可以看到。在页面底部,有常驻的评论输入框,点击后即可输入评论。
西瓜视频app中短视频播放页示意
将这两个播放页抽象出来,得到如图所示的信息结构示意图:
腾讯视频和西瓜视频播放页对比
从上图可以看出,腾讯视频在播放页强调的是推荐的视频内容,推测其产品目标是提升视频播放量;西瓜视频在播放页强调的是评论互动,推测其产品目标是提升播荐率、评论率等互动指标。
从上面的分析对比中可以看出,不同的方案,会将产品引向不同的数据结果。有了这样的对比,和产品讨论方案也变得有理有据了许多。
以上跟大家分享了自己在支持短视频类产品的一些心得,总结一下有以下几点:
1. Feed流类的产品,需要考虑两个核心问题:应该展示给用户什么内容、这些内容应该如何排序。
2. Feed流的排序有3种方法:时间排序、重力排序、智能算法排序
3. Feed流里,卡片的高度很重要。要尽可能减小卡片的高度。
4. 不能盲目套用卡片到不同的产品中,要跟进产品的特点和场景来使用不同的卡片。
5. 作为交互设计师,要多体验自己支持的产品,跟产品提出优化点,赢得更多主动。
6. 分析不同交互方案对产品,尤其是对产品数据的影响。
欢迎留言讨论,共同进步。
### #专栏作家#
沐风,微信公众号:“沐风与体验设计”。人人都是产品经理专栏作家,2017年度作家评选最佳人气奖。爱奇艺Phone和PC端交互团队负责人。留德海龟,曾任职腾讯微生活、网易、宜信。6年交互设计经验,专注设计领域,欢迎关注。
本文原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自Unsplash,基于CC0协议