视频app应该是每个手机上的必装应用，而且一装就是一打。虽然它不是什么新鲜产品形态，准确的说还很老，但是这几年行业的改变思路还是很清晰的，比如付费会员制的推行和自制内容的崛起。小编近几个月每天辗转在各个视频app之间：打开搜狐看秦明，打开腾讯看蜗牛，打开爱奇艺看余罪，打开芒果TV看很多。。。于是便想和大家聊几款主流视频app在交互和产品方面的使用体验。由于视频平台继各大电商之后也成长为了超级app，功能繁复又强大，小编将以4个篇幅对6款app的视频播放功能进行阐述，而且是非会员的情况下（主要是这样可以吐槽一下广告）。本文选择腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面整体的对比，在一些局部功能上会聊到优酷和每日开眼。使用设备为iphone6，各软件的版本号如图0所示，虽然不全是最新版本，但在大版本层面也是比较新的了。本系列文章的叙述顺序会从播放器的竖屏模式聊到横屏，以及其它一些重要功能如缓存、耳机与视频播放的交互等。

        很巧的是，就在小编筹备本篇文章期间参加了一个行业峰会，峰会上移动研究院以6个维度对7款视频app进行了评测，评测结果我会在文末展示给大家。

        想提前声明的是，由于每款应用的产品定位服务用户都不相同，因此在对比相似功能时，小编不会用绝对的对错去评判设计的好坏，而是选择“更合理”、“好一点”等词汇去表达。各位同行如果有不同见解，欢迎提出，大家互相交流，不胜感激。

1. 竖屏模式

        点击信息流里的图片按钮会进入视频播放页面，默认布局都是非全屏模式，界面上半部分是播放器，播放器下面是辅助功能。播放器为播放状态，声音也是扬声状态（无论手机是否为静音）。如果用户本次观看和上一次的观看为同一个视频，那么播放器不会播放广告且直接跳到上一次结束观看的位置继续播放（但也不是每次都奏效，我猜测和数据记录有关，如果上一次播放的数据因网络问题没有存储成功，那么再次点击还是会播广告的）。如果用户本次观看不是上一次观看的视频且不是会员，播放器会放广告。

 1.1 广告

       广告的时长与视频长度相关，如果是预告片或者短新闻则广告时间是15秒，如果是电视剧则可能是45、60、75、90、105或120秒不等。除此之外，观看过程中间会插入15或30秒广告，有时观看结束后也会进入一小段广告，然后才是下一集的片头广告（真是很逆天呢，也不知道谁起的头，现在各平台都这么做）。

      从图1.1可以看出，竖屏模式下4个app的播放器高度的差异非常小，但每个app处理系统状态栏的方式很不一样：芒果TV、腾讯和搜狐的播放器直接顶在屏幕顶部，芒果TV将状态栏隐藏，腾讯和搜狐的播放器和状态栏共享一个区域；爱奇艺的播放器则是让出了状态栏，从屏幕顶部下方20点处放置播放器。

       播放广告时，播放器上有若干交互按钮，图1.1中共有的6个界面元素是：

• 返回按钮 广告剩余时长

    通常显示在开通会员按钮上，有很强的相关性，告诉用户开通会员可以免广告。

• 开通会员按钮

    点击进入会员购买页面，购买完成后会回到视频播放页面且免掉广告。

• 广告链接

    点击播放器上除所有按钮外的任意位置也可以跳转到广告产品购买页面。

• 广告静音按钮

    点击会使广告静音，但只影响广告的声音，不影响进入正片后的音量。

• 全屏按钮

    切换到全屏显示。

       从图中可以看出，只有芒果TV的广告剩余时长没有和开通会员按钮形成视觉相关性；爱奇艺除了上述的6个功能点之外还多了2个按钮：一个是暂停按钮，点击此按钮广告被暂停，个人认为这个按钮没有存在的必要；另一个是投屏按钮，在可被投影的设备为开启状态时就会显示此按钮，点击可投射到大屏幕且不会播放广告。其实腾讯视频也有投屏的功能，只不过要在广告播完才会显示，真的很有心机呢。

1.2 竖屏播放器

       图1.2是播放视频正片时播放器的布局，和播放广告时一样，播放器的上下两侧各有一栏，上侧栏上有回到上一层级的返回按钮和当前播放视频的名称和剧集数，因此称上侧栏为导航栏；下侧栏上的若干按钮用来操作和管理当前页面内容，因此称下侧栏为工具栏。由于这两个栏和ios标准的导航栏和工具栏定义不是完全吻合，因此如果各位小伙伴有其它更恰当的命名方法可以告诉我。图1.2中可看出，两个栏上共有的4个界面元素是：

• 返回按钮
• 暂停／播放按钮
• 滑轨、滑块和两个时间字段
• 全屏按钮

       除此之外，腾讯视频多了一个投屏按钮；爱奇艺多了一个投屏和VR按钮。

       界面元素1，2，3协助用户在非全屏时也能轻松完成观看体验，这3个控件对应的需求是观看体验中的刚需；全屏、投屏和VR是切换至另一种观看模式的入口。

       导航栏和工具栏都有两种状态：显示状态、临时地全部或部分隐藏状态，轻击操作可在两个状态间切换。4个app处理栏隐藏的方法都不太一样：芒果TV把两个栏全部隐藏，包括系统状态栏；而其它3个应用都一致保留了返回按钮和状态栏；搜狐视频还显示了播放进度。

       腾讯视频、爱奇艺和搜狐视频将返回按钮和栏上其它几个交互控件做了很明显的区分对待：如果用户想离开，只需1次点击；如果用户想进行与观看视频有关的交互，需先将栏呼出，再进行操作，需2次点击。这样做使用户不感兴趣时不用付出更多的边际成本，因此小编觉得在上下栏隐藏时显示返回按钮会好一些。

       竖屏和全屏是截然不同的观看决策，全屏使人心无旁骛；竖屏模式下用户可以获取其它更多的信息，用户可以浏览书写评论、查看演员信息等。因此状态栏和播放进度条的显示增加了用户可感知的信息，和竖屏的使用场景不违和。

        广告播放结束后，导航栏和工具栏的显示状态也是个很重要的细节：腾讯视频和搜狐视频会显示这两个栏，停留数秒后进入临时半隐藏状态；而爱奇艺和芒果TV则是在广告播完后直接进入半（全）隐藏状态，更多的功能没有机会告知用户。尤其是在芒果TV里，如果用户想有所行动，但界面上也没有任何提示让用户知道可以轻击一下播放器来重新唤出导航栏和工具栏，这会让用户不知所措。   

1.3 辅助功能

       竖屏模式时，播放器的下面是一些辅助功能，从图1.1可以看出芒果TV、腾讯和搜狐的布局逻辑清晰，并且在一屏内（iphone6）就可以看到全部的主要功能；爱奇艺的贴片广告占用了十分关键的空间，而且参演明星显示在剧集的上面，导致在第一屏内无法选集。其实搜狐视频在这个页面也放了广告位，但是是隐藏在播放器下面，滑动可以拉出。4个app共有的6个界面元素是：

• 内容介绍，包括文案和数据
• 收藏
• 缓存
• 分享
• 评论
• 剧集阵列：

       视频内容是一个线性集合时才会有剧集阵列，单个视频不会有。它用来显示当前播放的是第几集，用户也可以点击切换到其它集。

       电视剧和综艺节目的剧集按钮的视觉表达很不一样，电视剧按钮的尺寸只要满足44点就可以了，上面带有数字和相关状态；而综艺节目的按钮会比较大，描述性文字比较多，可能还会显示图片。综艺节目的做法让用户很容易就能评估想看哪一集或者哪一集已经看过了，因此剧集阵列是十分重要的控件。

       电视剧和综艺节目的剧集阵列显示方式也很不一样，本篇只说电视剧的剧集阵列：

       爱奇艺的电视剧将所有剧集按钮分布在若干个标签页里，每个标签页放15个按钮，比较占用空间但也让用户对还剩多少集没有看等相关的情况比较有感知。这也是技术成本很小的做法。

       其余3个应用都是只用一行来显示所有剧集，并提供了查看全部剧集的按钮，点击是全部剧集按钮的平铺样式。剧集阵列只在一行显示时，用户可交互的动作为点击和滑动。在芒果TV，点击剧集时，剧集阵列不会自动向左滑动，因此当点击当前最右侧的剧集时，需要手动将阵列向左滑动平移才能查看更多剧集。腾讯视频和搜狐视频在用户点击中间偏右的剧集时，阵列就会向左平移，将更多的剧集显示出来，因此，当前点击的剧集总是在屏幕垂直居中的位置（但前几集和后几集无法这样显示）。平移过程要有被点击按钮的状态刷新和平移动画，这一点腾讯视频做的很巧妙，用刷新来代替实时地平移，虽然不是实时平移，但是使用过程很流畅；而搜狐视频做的是实时平移，但切换剧集时要处理的数据比较多，因此实现效果非常卡。此处明显看出腾讯的产品经理是如何用产品来规避技术难点的，值得我们大家学习。

       剧集阵列上的按钮有很多状态：当前播放，更新状态，预告片，已缓存到本地，VIP才能观看等。剧集按钮上没有记录该集是否观看过的状态及观看了多少时长，小编认为原因有三点：首先，应用默认大部分用户都是顺次观看的，每次打开视频时应用都会接着上一次结束观看的位置继续播放，用户不用去思考哪集看过、该从哪集开始看；其次，剧集阵列上的按钮尺寸也不允许显示如此多的信息；最后，和娱乐型内容相比，深度学习型内容更适合显示完成百分比，例如得到app里的音频文件和网易公开课里的视频，就会显示完成的百分比或时长。

       关于视频app的交互设计分析第一篇就先讲到这，下一篇会聊横屏的功能点，会详细叙述播放按钮、暂停按钮、进度滑块的设计思路，敬请期待。

其它相关文章地址：

4款视频app交互设计浅析（2）：http://www.ui.cn/detail/199454.html

4款视频app交互设计浅析（3）：http://www.ui.cn/detail/201816.html

4款视频app交互设计浅析（4）：http://www.ui.cn/detail/202666.html