2.5 音量调节和亮度调节

       调节音量的方式有2种：一种是按手机上的音量物理按键，另一种是在播放器上使用上下方向的滑动手势。两种方式适应不同的需求，物理按键可以准确调节音量到满意的位置；滑动手势可以快速地让音量调节到最大或最小。

       调节亮度的方式有3种：手机屏幕适应环境光来自动调节亮度；唤起手机的控制中心调节亮度滑块；在播放器上使用上下方向的滑动手势。自动调节的方式是隐形的设计，对用户是0负担，因此大部分用户会听由屏幕亮度的自动调节；当亮度自动调节的结果满足不了用户时，肯定就要启动后两种交互方式了，控制中心的唤起会打断视频观看，而且在横屏模式下唤起的操作比较难（而且可能会误启动上下滑动手势），相比之下，滑动手势就比较好操作了。

       音量和亮度调节都需要上下滑动手势，为了让一个手势在一个情景里实现2种功能，在播放器右侧上下滑动来调节音量，在左侧调节亮度，已经成了通用的解决方案。很显然，这是默认用户全部为右手用户，将高频的音量调节交互区域放在右手操作的舒适区；将低频的亮度调节放在右手的偏僻区，或由左手完成。在用户第一次打开播放器的时候，会看到写着这个交互说明的浮层，但说实话，要不是为了写这篇文章，我早就忘了原来在播放器里面也可以调节亮度呢。

       无论从人体工程学还是从用户使用频率数据上来看，左右分区的上下滑动手势都是没有问题的，但是小编认为这种方式对应的视觉反馈有待完善。调节音量和亮度时，除了声音和亮度本身反馈，很多应用会调用系统自带的UI反馈控件。这种控件很大而且显示在屏幕的正中间，真的挡住很多空间呢。除此之外，这种反馈控件上的刻度调节是左右方向的，和用户的手势方向不匹配。搜狐视频则是使用了两组自定义的视觉反馈控件，但摆放位置和显示逻辑与系统标准控件一样，只是挡住播放器的区域变得比较小，也与应用的整体形成了设计上的统一。小编很喜欢像每日开眼设计的音量调节视觉反馈控件，它显示在播放器的左侧边上，既提供了反馈又没有挡住播放器的中间位置。但很遗憾，开眼在播放器里没有提供亮度调节，上下滑动手势只能调节亮度，这种显示在播放器侧边的视觉反馈只适用于上下滑动手势拥有单一定义时。当有2种定义时，这种布局方式的问题也非常多。小编没有更好的主意，不知道各位同仁对于这个问题有什么更好的想法。或许我提出的需求是吹毛求疵，也可能这就是设计很难两全齐美的例子。

         很多应用尝试在横屏模式里唤起一个类似系统控制中心但又不会打断视频的浮层，以此来解决小编的问题，会在后面的2.10节里详细阐述。

2.6 下一集

       这是唯一一个让小编不知道该说点什么的按钮，嗯，真的很尴尬呢。统一被放在了暂停／播放按钮的右侧。当视频类型是电影时也会有这个按钮，真不知道它的下一个是什么呢。

2.7 清晰度

       清晰度能决定观看体验的好坏，因此也是一个付费点。蓝光级别都是会员专属，腾讯视频将每个等级的分辨率数值都标注了出来，进一步刺激用户去购买会员。

2.8 选集

        点击选集按钮会呼出一个浮层显示所有的剧集按钮，有时一屏可能放不下，因此在用户打开浮层时，应该让当前播放的剧集按钮显示在屏幕内。腾讯和搜狐视频做到了这一点，尽管实现方式不一样，搜狐视频降低了难度将剧集按钮做了分页处理。爱奇艺的这个功能有些bug，要滑动一下才会出现当前剧集按钮。芒果TV的这个功能做得也很好，只不过选集浮层比较像综艺节目，剧集按钮很大，而且是图片按钮带着长文字，虽然增加了用户选集时的滑动幅度，但也提供了更多的信息，让用户比较确定究竟要看哪一集。

2.9 锁屏

      芒果TV、爱奇艺和搜狐视频都在播放器的左侧放置了锁屏按钮。锁屏之后，无法点击其它功能按钮，和手机锁屏一样。但是在什么情景下使用这个功能呢？播放器上所有的按钮及功能设计让打断或影响视频播放的操作都是有行为成本的，产生视频中断或退出的误操作可能性比较小。除非在很拥挤很拥挤的地铁里，或者在很颠很晃的公交车上。小编还假设了一个场景，是不是有可能我在擦地的时候还想听着视频，因此要把手机放在衣服口袋里，这时也能用到锁屏吧？

2.10 更多功能

        腾讯视频、爱奇艺、搜狐视频都有更多功能的按钮，点击会呼出一个包含多个功能的浮出层，不影响视频正常播放。腾讯视频在面板里放置了音量和亮度的调节，可以弥补2.5节里说的现有的设计缺陷，很有代替手机的控制中心的味道，适合用户深度探索。但是这个更多按钮的样式太低调了，我觉得可以参考最新MacbookPro的TouchBar上对于各种多媒体调节按钮的管理方式，当然这样一来，这个面板里就不适合放其它功能比如缓存。爱奇艺的这个面板里没有音量调节，看来是不认同2.5节里提到的设计缺陷。

       在腾讯视频的更多功能浮层里拖拽音量滑块时，系统标准视觉反馈控件被唤起；拖拽爱奇艺的亮度滑块时，也调用了系统视觉反馈控件。这都是没有必要的二次显示，这个细节两家都没有处理好呢。

2.11 投屏

        投屏功能真的是小编的挚爱，可以在更大屏幕上观看视频，关键还没广告！！！爱奇艺、腾讯视频和优酷都有投屏功能，但前提是被投屏设备开启时才会显示此功能，要不然你永远都会看不到这个按钮哦～在竖屏模式里也提到了，爱奇艺在广告播放时就可以投屏，其它应用是必须观看完广告后才能投屏呢。

2.12 弹幕

       除了芒果TV外，其它几家视频app都有弹幕功能，且都改良了显示方式，弹幕只会占据屏幕的一部分，或者分批显示，不会像B站那样占据整个屏幕。

       打开弹幕才可以输入弹幕，图2.10可以看出，输入弹幕时的键盘模式，爱奇艺和搜狐视频都处理地很好。搜狐视频在输入弹幕页面算是下了功夫，但是弹幕开启和关闭的交互做得很不好，在这里不截图显示了，大家体验一下就知道了。

2.13 截屏和录屏

        腾讯视频和优酷有截屏和录屏的功能，UI布局和交互流程有比较明显的差异。腾讯视频将截屏和录屏按钮并列显示在播放器右侧；优酷的右侧只有一个剪刀样式的icon，点击能显示两个二级按钮，截屏和录屏。这么做增加了点击成本，操作路径太长。

       点击腾讯视频的截屏按钮，播放器会有闪烁效果，如图2.11原型图所示，截下的图片会以一个浮层的形式显示在截屏按钮左侧，如果应用自动切换到全屏模式之前，用户都没有点击浮层，那么浮层消失，截图丢失；如果点击浮层会呼出若干分享按钮。整个过程不会打断视频观看，但存在一些问题。腾讯视频并没有将截图保存在手机本地相册，那么想要使用或看到这张图片只能通过分享的方式，也就是说从产品角度假设的场景是，用户截图就是为了分享。但截屏之后并没有强制将用户带到分享界面，而是让用户有所选择，这就弱化了截图和分享操作之间的关系。除此之外，这个流程也导致用户在截图后无法再次查看截图，当然我想这只是这个流程的结果，不是设计这个流程的目的。

       相比之下，优酷选择了比较稳的做法，如图2.12所示。点击截屏后视频被暂停，应用被一个模态视图占据，视图上显示截取图片和分享平台按钮，建立了截屏和分享的强关系。但是，优酷将截屏图片保存到了本地相册，小编认为有点画蛇添足了。如果说截图就是为了分享，那么如果用户没有分享截图，那这张截图自然没有保留的意义；如果用户将这张截图分享出去，那这张截图的使命也就完成了，把它保存在手机相册就没有意义了。按照这个立场去分析，不保存截图的做法可能合适一些。小编认为这个细节的处理没有绝对的对错，只是产品思路不同而已，小伙伴们也可以谈谈不同的看法。

       再来看看录屏流程。腾讯视频的录屏至少录3秒，最多录9秒。因此点击录屏按钮后，前3秒时只有取消操作；录满3秒之后，用户既能取消，又能点击完成，也可以等待自动录制完毕。录屏完成后，播放器会被暂停，播放器上会显示一个模态视图，视图上有一个小窗口循环播放着刚刚录屏的内容以及分享按钮，同时应用在后台进行视频截取和压缩操作，截取完成后也会告知用户，用户这时才可以分享。这个时间很短，并且用户在这个时间段会先看看录的内容，不太可能立刻去分享，所以这个截取过程还是可以接受的。分享完成后返回腾讯视频app，播放器恢复播放，并且会从刚刚录屏的起始时间点播放。腾讯视频的录屏功能虽然不是刚需，但我觉得因开发的十分流畅，反馈效果做的也很好，搞不好会成为高频操作。

      优酷的录屏操作需要长按录屏按钮，流程如图2.14所示。小编来说说用长按来录屏的缺点。长按手势是个难度系数较高的动作，通常将这一手势用于用户可能会因不小心的点击而产生不可逆转的误操作的时候，例如ios里使用长按应用图标来卸载或移动应用。应用肯定是鼓励用户多多使用录屏功能，但长按手势会增大交互难度，反而起到反作用。例如，优酷也设置了录制最小时长，但如果用户按压时间不足时肯定是无法完成录制的，用户此时可以继续长按录屏按钮，但在刚刚的过程中，视频一直是正常播放的，第二次录制肯定不能接着第一次录的那一段继续录制，而是重新录制，如果还想从第一次按压时的那个时间点开始录的话，必须退出录制模式，将视频后退到满意的位置再重新录制。为了尽可能避免这种情况出现，优酷将可录制的最小时长设置为1秒，但小编认为这弥补不了长按操作的难度。长按录屏按钮时，按钮样式没有任何状态的变化，再次降低了可用性。

2.14 腾讯视频的只看TA

        腾讯视频做了一个按演员来筛选内容的功能，叫“只看TA”。可以只看本集的男主、只看女主或者男女主对手戏。但只有几个热播剧或自制剧有这个功能，挺好玩的，可以试一下，但是呢人物太多的段落可能就分不出来了。这个需求是否有必要，小编认为有待时间的检验。流程见图2.15所示。

其它相关文章地址：

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

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

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