美文网首页产品经理@IT·互联网@产品
流量引导的页面设计:视频列表页和视频详情页实例

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

作者: 红二 | 来源:发表于2017-11-08 12:35 被阅读365次


    手机视频

    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内容。

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

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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/ltmemxtx.html