流量引导的页面设计:视频列表页和视频详情页实例


手机视频


1.背景

最近在考虑一个问题,如何从主app里合理地引导流量到自己的子功能,主要是两种手段:

(1)设置合理的功能入口

(2)在用户正常的使用路径上增加引导功能

在考虑过程中,参考了大量app的页面设计,发现不同视频app的设计各有千秋,遂总结如下。


2.微博视频


微博视频


微博视频是微博app中的视频功能,仅对核心功能进行分析。

2.1 微博列表的视频消息


动态列表的视频消息

视频消息的格式和其它微博消息的格式相同,描述区、常规操作区的交互与其它消息类型保持一致,因此针对视频类型的个性化功能,仅有视频区是可发挥空间

猜想,视频类型有以下特点:

(1)视频类型需要全屏播放

(2)同一个上传用户的视频类型不会太多

(3)视频有分发诉求:用户看文字、看图片,往往有强烈的人格诉求,即只看某些博主发布的,但是看视频更高的为内容诉求,有在不同博主的作品间浏览的诉求

针对视频类型的以上特点,微博设计了一个巧妙的视频详情页。


2.2 微博的视频详情页


微博的视频详情页

视频详情页暂且分为沉浸状态和高亮状态。

首次进入某个视频详情页时,均为高亮状态。

进入视频页的方法有:从微博动态列表进入,从另一个视频详情页滑动切入,从全屏视频页退出。

高亮和沉浸状态下,可以上下滑动切换视频。

高亮状态下,可以使用评论、点赞、分享功能。

这个页面设计得很巧妙:


视频分发能力对比

和传统的视频详情页对比,传统的视频详情页往往在页面下部设计视频列表承载分发功能。

传统视频详情页的推荐列表的展示效率有限,要展示全部信息,展示3条已经占用大量空间。推荐视频列表和该页面的其他功能争抢空间,导致页面越做越长,用户不容易发现推荐区域,功能之间互相抢流量。无论展示几条推荐,用户只能点击一次视频,播放视频数:展示视频数远小于1。

可滑动的列表用户滑动只需要滑动即转到另外一个视频,跳转到新视频的成本比较小,比较符合用户连续浏览的习惯。用户的发现新视频--浏览行为合二为一,播放视频数:展示视频数=1。虽然没有具体数据支持,这种滑动的分发方式分发效率一定更高。

但是这种页面也有缺点,由于沉浸模式的存在,以及滑动的过程中尽可能不要被其他操作打断,这种设计中评论等操作的使用频度一定会低于常规的设计。

但是微博这个页面并非视频类型消息的唯一入口,很多用户会从微博动态列表浏览视频,在微博动态列表进行转评赞等操作明显容易的多。

动态列表承载将用户关注的内容推送给用户,用户对该内容进行转评赞等操作,增加微博的互动度。

视频列表承载将更多用户可能感兴趣的视频推送给用户,用户浏览更多视频,进而关注新的博主,增加微博内容的扩散度。


2.3 全屏视频页


全屏视频页

全屏页的设计是为了承载视频播放的全屏诉求,视频列表的设计上,很多交互会与用户习惯的全屏观看视频时的交互冲突,所以视频全屏的功能不能由视频列表页承担。

有一些产品会在全屏播放页面增加滑动切换视频的功能,结果就是屏幕左侧滑动调节亮度,屏幕右侧滑动调节音量,屏幕底部滑动调节进度,屏幕中间滑动切换视频,甚至还有长按屏幕、双击屏幕弹出视频列表等复杂的交互,使用起来颇为不便。

设计上比较中规中矩,故不进行详细分析。



3.抖音

抖音类产品的设计均与微博视频列表的思路类似,滑动即切换,自动播放视频。


抖音视频列表

抖音能采用这种设计是与抖音的视频类型分不开的。

(1)抖音几乎全是手机录制视频,绝大多数为竖屏,分辨率基本全为手机分辨率,直接使用手机全屏为播放框即可

(2)抖音是短视频,没有调整视频进度和屏幕亮度等需求

但是这种设计带来的弊端也是显而易见,这种设计会导致评论数较低,比如截图,34w的赞数只有几千评论。如果将评论内容外放,在视频页设置直接可评论的功能入口,评赞比应该会更高。抖音这种设计自有他们取舍的原因。


4.秒拍和快手


秒拍和快手对比

将秒拍和快手对比是因为二者的设计思路相仿,视频列表页均采用图片展示,罗列展示feed流。

但是二者还是有差别,也与本身的视频特点相关:

快手双列展示,期望同一页尽量展示相对多的视频。快手的视频尺寸不一致,单列同屏展示的数量非常少。没有视频描述,截图即内容。适合UGC内容。

秒拍单列展示,期望展示尽可能多的视频相关内容。秒拍的视频尺寸相对一致,横屏视频在单列同屏展示的数量比较多,如果双屏展示的话,横屏视频的缩略图太小,容易看不清。秒拍有视频描述,且去掉视频描述时很难从截图推断视频内容。适合PGC内容。

但是秒拍这种展示方式也带来了弊端,视频截图列表模糊不清,浏览的体验很差。


暂时列举了以上四种视频列表的设计方式,不对好坏优劣进行评价,每个产品都有自己的取舍道理。但是通过分析不同设计的侧重点、推测设计动机,能对自己进行功能设计时有所裨益。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容