4 款视频 app 交互设计总结（2）

2016-12-27 11:42:00

2.0 横屏模式

点击竖屏模式右下角的屏幕切换按钮，播放器进入横屏模式。横屏的导航栏和工具栏包含的控件更丰富，除此之外，左右两侧也放置了按钮控件。在横屏模式下更容易辨别出各家的栏设计对观看体验的影响。美观与可用性之间在这个巴掌大的空间里不是很好平衡。爱奇艺的滑块设计使它必须使用边界清晰的工具栏，边界清晰的栏本可以增强栏上的按钮的辨识度，但爱奇艺并没有做到，因为icon的线条都太细了；搜狐视频没有填充栏的背景色，而是在视频内容上盖上一整屏的半透明深色遮罩来凸显栏；芒果TV和腾讯视频使用渐变来填充栏背景色，看起来更通透。4种做法的交互方式都没问题，只是视觉的不同，但具体哪一个更好地通过大量数据统计得出，所以这里就不妄下结论了。

横屏模式里有全屏状态，全屏状态时导航栏、工具栏和状态栏都临时隐藏了起来，给用户营造了心无旁骛的观看环境。轻击一下可以再次唤起这3个栏。

各家app的栏功能不完全相同，本篇和下一篇将按照共有功能和特色功能的顺序对导航栏和工具栏进行叙述。

2.1返回按钮

4家app在横屏模式时都去掉了切换横竖屏按钮，因为点击返回就是退出横屏。除此之外，我猜测是因为全屏时的按钮实在太多，自然不会放置两个有同样功能的按钮。虽然返回按钮和切换横竖屏按钮在视觉上没有一个很好的关联度，但是页面层级关系比较容易让用户理解。有趣的是，优酷在全屏时保留了右下角的退出全屏按钮。

2.2页面标题

横屏模式所有的导航栏上都显示了页面标题，也就是当前播放的剧集名称和剧集数，但位置是在返回按钮的右侧。ios用户界面手册里提到过，要将前一层级的标题显示在返回按钮右侧（如果可以放下的话），这样返回按钮才更有意义。很显然，这些视频app都没有遵循这一准则，这也是我在第一篇里说过的，称上侧栏为导航栏不那么恰当的原因。尽管如此，现在的布局更好看，用户根据剧集数也知道返回按钮右侧的文字就是本页标题。

2.3 暂停／播放按钮

暂停和播放是同一个按钮的两种切换显示状态，位置在左下角。

设计理论是不赞成在一个页面内1个控件上切换2个功能的，但是数字设备上的暂停和播放却可以很好违背这种观点。原因一是数字设备可以在同一个区域显示不同的状态，表达逻辑上是不会出错的，这是物理设备做不到的（例如收音机）；原因二，用户可以很轻松地辨别多媒体内容的播放和暂停状，要切换状态时只知道就按那个按钮就对了。如果放置2个按钮在界面上，用户要结合视频的状态去在两个按钮之间辨别该按哪一个（即使让一个按钮为禁用状态，另一个为可用状态，用户也还是要费脑力去辨别，拟物设计还能好点）。

视频的暂停状态很好辨别：视频不再播放，导航栏和工具栏都为显示状态，而且会有广告弹窗（广告弹窗在这时竟然起到了积极的作用）；视频为播放状态时，可能会是全屏状态，当视频因速度或数据问题不再继续播放时，一定要有反馈，例如显示带宽速度或告知可能出现的问题，没有反馈的话，用户会将这种情况和暂停状态混淆。

2.4 滑块和2个时间

滑轨和滑块应该是观看视频时十分重要的控件，它清晰地传达了视频的观看进度，配合时间的显示让用户十分明确该如果安排自己的活动。用户也可以通过拖拽滑块来使视频快进或快退。

从图2.1可以看出爱奇艺的滑轨是最长的，与横屏等宽，增强了拖拽滑块时的操作精度，但这样做也使播放器在视觉上被切割地太明显，视频也被遮挡的更多；已播放时长和总时长也因此不能被放在滑轨的首尾两侧，弱化了这两个时间与滑轨的相关性。对比图1.2、图2.1不难发现，爱奇艺在竖屏模式时并没有让滑轨与竖屏同宽，竖屏模式下，播放器的区域非常小，如果不这样做的话，爱奇艺的两个栏会挡住更多可观看区域。

拖拽滑块是一个高难度动作，因为滑块尺寸非常小，而且为了保证观看体验，拖拽滑块时视频正常播放，拖拽滑块的手指松开后，视频才会快跳到对应的位置。这时适当提供视觉反馈能降低操作难度。视觉反馈可分为3种，一是让滑块在视觉上看起来更好点击和按压；二是让用户感知拖拽的精度，以便评估自己的拖拽幅度；三是要让用户知道他是否将视频调整到了他想要的位置。如图2.2所示，用户在腾讯视频里按压滑块时，滑块外侧叠加了一个直径112px的半透明同心圆，模拟按钮被按压的效果，实现了上文说的第1种反馈；拖拽滑块时，滑轨左边的时间和界面中央显示的时间让用户感知拖拽精度，是第2种反馈；播放器上还有个小窗显示了拖拽位置的关键帧画面，是第3种反馈，滑块在滑轨上的位置也属于第3种反馈。除此之外，因为导航栏与拖拽动作没有关系，因此拖拽滑块时，腾讯视频隐藏了导航栏和状态栏；并在播放器上蒙了一个半透明深色遮罩，让用户将注意力更集中在小窗口上和滑轨滑块上。

从图2.2可以看出，其它应用都只做到了1-2种反馈。有些app还会显示左右的箭头，很明显是映射以前收音机上的快进和快退。用户的拖拽滑块动作比在收音机上点击快进或快退按键更有沉浸感，用户也不会混淆也不会特意去分辨他当前是在快进还是快退，用户的目标是他要到达的地方，因此显示快进快退的icon变的不再是必要。

无论视频是暂停还是播放，用户在完成拖拽后，视频都要是播放状态，这体现了一个应用是体贴的。

搜狐视频和优酷除滑块能拖拽之外，还在滑轨上放置了剧情的关键节点，用户点击滑轨上的小亮点便能呼出一个浮出层，点击浮出层可以实现跳转，如图2.3所示。在使用体验上，搜狐的小亮点真的非常难点，也很难看清点击出来的浮层对应的是哪个小亮点；浮层与滑轨之间的距离太小，点击其它小亮点时很容易就点到了浮层；浮层的尺寸太小，不易点击。优酷的小亮点很好点击，浮层尺寸也够大，但浮层与滑轨的距离也是太小，很容易误操作。我想这两个app在后续更新中应该会优化这个功能。

2.5 左右滑动手势

所有app都做了可以替代拖拽滑块操作手势，那就是手指的左右滑动，滑动方向与拖拽滑块的方向一致，保持了很一致的映射关系。在腾讯视频里左右滑动时的视觉反馈和拖拽滑块时完全一样，工具栏也还是会显示。在爱奇艺和搜狐视频里操作左右滑动手势时的视觉反馈不影响上下栏的显示状态，因此在全屏状态时左右滑动，栏是不会显示的，看不到滑轨也就不太能评估究竟滑动到哪儿了，虽然有时间的显示，但没有滑轨好理解。爱奇艺和搜狐视频的解决方案是乳图2.4所示，在界面上显示一个简化样式的进度条来替代滑轨，用户可以通过这个简化的进度条评估自己的动作幅度。