除此之外,腾讯视频多了一个投屏按钮;爱奇艺多了一个投屏和VR按钮。界面元素1,2,3协助用户在非全屏时也能轻松完成观看体验,这3个控件对应的需求是观看体验中的刚需;全屏、投屏和VR是切换至另一种观看模式的入口。
剧集阵列:
剧集按钮上没有记录该集是否观看过的状态及观看了多少时长,海淘科技小编认为原因有三点:首先,应用默认大部分用户都是顺次观看的,每次打开视频时应用都会接着上一次结束观看的位置继续播放,用户不用去思考哪集看过、该从哪集开始看;其次,剧集阵列上的按钮尺寸也不允许显示如此多的信息;最后,和娱乐型内容相比,深度学习型内容更适合显示完成百分比,例如得到app里的音频文件和网易公开课里的视频,就会显示完成的百分比或时长。
点击竖屏模式右下角的屏幕切换按钮,播放器进入横屏模式。横屏的导航栏和工具栏包含的控件更丰富,除此之外,左右两侧也放置了按钮控件。在横屏模式下更容易辨别出各家的栏设计对观看体验的影响。美观与可用性之间在这个巴掌大的空间里不是很好平衡。爱奇艺的滑块设计使它必须使用边界清晰的工具栏,边界清晰的栏本可以增强栏上的按钮的辨识度,但爱奇艺并没有做到,因为icon的线条都太细了;搜狐视频没有填充栏的背景色,而是在视频内容上盖上一整屏的半透明深色遮罩来凸显栏;芒果TV和腾讯视频使用渐变来填充栏背景色,看起来更通透。4种做法的交互方式都没问题,只是视觉的不同,但具体哪一个更好地通过大量数据统计得出,所以这里就不妄下结论了。
横屏模式里有全屏状态,全屏状态时导航栏、工具栏和状态栏都临时隐藏了起来,给用户营造了心无旁骛的观看环境。轻击一下可以再次唤起这3个栏。各家app的栏功能不完全相同,本篇和下一篇将按照共有功能和特色功能的顺序对导航栏和工具栏进行叙述。
2.1返回按钮
4家app在横屏模式时都去掉了切换横竖屏按钮,因为点击返回就是退出横屏。除此之外,我猜测是因为全屏时的按钮实在太多,自然不会放置两个有同样功能的按钮。虽然返回按钮和切换横竖屏按钮在视觉上没有一个很好的关联度,但是页面层级关系比较容易让用户理解。有趣的是,优酷在全屏时保留了右下角的退出全屏按钮。
2.2页面标题
横屏模式所有的导航栏上都显示了页面标题,也就是当前播放的剧集名称和剧集数,但位置是在返回按钮的右侧。ios用户界面手册里提到过,要将前一层级的标题显示在返回按钮右侧(如果可以放下的话),这样返回按钮才更有意义。很显然,这些视频app都没有遵循这一准则,这也是我在第一篇里说过的,称上侧栏为导航栏不那么恰当的原因。尽管如此,现在的布局更好看,用户根据剧集数也知道返回按钮右侧的文字就是本页标题。
2.3暂停/播放按钮
暂停和播放是同一个按钮的两种切换显示状态,位置在左下角。设计理论是不赞成在一个页面内1个控件上切换2个功能的,但是数字设备上的暂停和播放却可以很好违背这种观点。原因一是数字设备可以在同一个区域显示不同的状态,表达逻辑上是不会出错的,这是物理设备做不到的(例如收音机);原因二,用户可以很轻松地辨别多媒体内容的播放和暂停状,要切换状态时只知道就按那个按钮就对了。如果放置2个按钮在界面上,用户要结合视频的状态去在两个按钮之间辨别该按哪一个(即使让一个按钮为禁用状态,另一个为可用状态,用户也还是要费脑力去辨别,拟物设计还能好点)。
搜狐视频和优酷除滑块能拖拽之外,还在滑轨上放置了剧情的关键节点,用户点击滑轨上的小亮点便能呼出一个浮出层,点击浮出层可以实现跳转,如图2.3所示。在使用体验上,搜狐的小亮点真的非常难点,也很难看清点击出来的浮层对应的是哪个小亮点;浮层与滑轨之间的距离太小,点击其它小亮点时很容易就点到了浮层;浮层的尺寸太小,不易点击。优酷的小亮点很好点击,浮层尺寸也够大,但浮层与滑轨的距离也是太小,很容易误操作。我想这两个app在后续更新中应该会优化这个功能。
2.5左右滑动手势
2.5音量调节和亮度调节
调节音量的方式有2种:一种是按手机上的音量物理按键,另一种是在播放器上使用上下方向的滑动手势。两种方式适应不同的需求,物理按键可以准确调节音量到满意的位置;滑动手势可以快速地让音量调节到最大或最小。调节亮度的方式有3种:手机屏幕适应环境光来自动调节亮度;唤起手机的控制中心调节亮度滑块;在播放器上使用上下方向的滑动手势。自动调节的方式是隐形的设计,对用户是0负担,因此大部分用户会听由屏幕亮度的自动调节;当亮度自动调节的结果满足不了用户时,肯定就要启动后两种交互方式了,控制中心的唤起会打断视频观看,而且在横屏模式下唤起的操作比较难(而且可能会误启动上下滑动手势),相比之下,滑动手势就比较好操作了。音量和亮度调节都需要上下滑动手势,为了让一个手势在一个情景里实现2种功能,在播放器右侧上下滑动来调节音量,在左侧调节亮度,已经成了通用的解决方案。很显然,这是默认用户全部为右手用户,将高频的音量调节交互区域放在右手操作的舒适区;将低频的亮度调节放在右手的偏僻区,或由左手完成。
小编很喜欢像每日开眼设计的音量调节视觉反馈控件,它显示在播放器的左侧边上,既提供了反馈又没有挡住播放器的中间位置。但很遗憾,开眼在播放器里没有提供亮度调节,上下滑动手势只能调节亮度,这种显示在播放器侧边的视觉反馈只适用于上下滑动手势拥有单一定义时。当有2种定义时,这种布局方式的问题也非常多。小编没有更好的主意,不知道各位同仁对于这个问题有什么更好的想法。或许我提出的需求是吹毛求疵,也可能这就是设计很难两全齐美的例子。
很多应用尝试在横屏模式里唤起一个类似系统控制中心但又不会打断视频的浮层,以此来解决小编的问题,会在后面的2.10节里详细阐述。
2.6下一集这是唯一一个让小编不知道该说点什么的按钮,嗯,真的很尴尬呢。统一被放在了暂停/播放按钮的右侧。当视频类型是电影时也会有这个按钮,真不知道它的下一个是什么呢。
2.7清晰度清晰度能决定观看体验的好坏,因此也是一个付费点。蓝光级别都是会员专属,腾讯视频将每个等级的分辨率数值都标注了出来,进一步刺激用户去购买会员。
2.8选集点击选集按钮会呼出一个浮层显示所有的剧集按钮,有时一屏可能放不下,因此在用户打开浮层时,应该让当前播放的剧集按钮显示在屏幕内。腾讯和搜狐视频做到了这一点,尽管实现方式不一样,搜狐视频降低了难度将剧集按钮做了分页处理。爱奇艺的这个功能有些bug,要滑动一下才会出现当前剧集按钮。芒果TV的这个功能做得也很好,只不过选集浮层比较像综艺节目,剧集按钮很大,而且是图片按钮带着长文字,虽然增加了用户选集时的滑动幅度,但也提供了更多的信息,让用户比较确定究竟要看哪一集。
2.9锁屏芒果TV、爱奇艺和搜狐视频都在播放器的左侧放置了锁屏按钮。锁屏之后,无法点击其它功能按钮,和手机锁屏一样。但是在什么情景下使用这个功能呢播放器上所有的按钮及功能设计让打断或影响视频播放的操作都是有行为成本的,产生视频中断或退出的误操作可能性比较小。除非在很拥挤很拥挤的地铁里,或者在很颠很晃的公交车上。小编还假设了一个场景,是不是有可能我在擦地的时候还想听着视频,因此要把手机放在衣服口袋里,这时也能用到锁屏吧
2.10更多功能腾讯视频、爱奇艺、搜狐视频都有更多功能的按钮,点击会呼出一个包含多个功能的浮出层,不影响视频正常播放。腾讯视频在面板里放置了音量和亮度的调节,可以弥补2.5节里说的现有的设计缺陷,很有代替手机的控制中心的味道,适合用户深度探索。但是这个更多按钮的样式太低调了,我觉得可以参考最新MacbookPro的TouchBar上对于各种多媒体调节按钮的管理方式,当然这样一来,这个面板里就不适合放其它功能比如缓存。爱奇艺的这个面板里没有音量调节,看来是不认同2.5节里提到的设计缺陷。在腾讯视频的更多功能浮层里拖拽音量滑块时,系统标准视觉反馈控件被唤起;拖拽爱奇艺的亮度滑块时,也调用了系统视觉反馈控件。这都是没有必要的二次显示,这个细节两家都没有处理好呢。
2.12弹幕除了芒果TV外,其它几家视频app都有弹幕功能,且都改良了显示方式,弹幕只会占据屏幕的一部分,或者分批显示,不会像B站那样占据整个屏幕。打开弹幕才可以输入弹幕,图2.10可以看出,输入弹幕时的键盘模式,爱奇艺和搜狐视频都处理地很好。搜狐视频在输入弹幕页面算是下了功夫,但是弹幕开启和关闭的交互做得很不好,在这里不截图显示了,大家体验一下就知道了。