绝大部分app都有自己的视频播放模块,但相比图片展示模块,视频播放模块有其特殊性,在不同场景下,用户对视频播放会有不同的需求。
视频播放模块需求
先看下正常用户浏览视频所需要的操作:
视频播放画面
暂停
画面暂停状态、继续播放
播放进度/时长
调节播放进度
静音全屏退出/…
但是用户观看/浏览视频时,过多的页面功能元素会对视频画面进行干扰,因此设计视频播放模块时,需要针对使用场景,采用不同的设计模式。
大部分视频播放模块一般分为下图3情况:
情况1 页面中视频预览
这种情况下视频播放区域为页面元素一部分,可能页面中还存在其他视频模块,在wifi情况下,当用户浏览至视频区域视频自动播放,而不管视频是否自动播放,点击视频均跳转至视频播放页面。这里视频模块主要目的是快速传递视频内容信息、吸引用户点击进入视频播放页。
提示视频形式:自动播放/播放按钮
传达视频内容:自动播放
提示视频信息:视频时长/播放进度
情况2 非全屏视频播放
这是最常用的视频播放形式,用户点击进入页面,视频播放模块占据屏幕视觉焦点位置,wifi情况下视频自动播放。但由于产品场景和需求的差异性,视频播放需要采用不同的模式。
进度条常驻
进度条常驻是满足视频播放需求最高效的设计模块,所有功能元素直接展示,用户可以快速进行相应操作。
优点:
可以实时看到播放进度
方便调整播放进度
暂停按钮直接展示,快速切换暂停/播放状态
缺点:
操作元素直接展示,干扰视频观看
暂停播放按钮触发区域较小
分析进度条常驻模式的播放模块,可知这种模块并不适合普通情况下的视频观看场景,因为用户正常观看时,对实时调节进度、了解进度、快速切换暂停播放的需求并不强,反而这些元素对视频画面内容有干扰作用。
但在视频编辑处理场景下,用户需要频繁快速调整播放进度、了解当前视频进度、频繁暂停/播放视频,因此进度条常驻模式常用于视频编辑场景,而视频编辑页面一般会有更多操作功能元素,但常驻进度条几乎都是页面必备元素。
常规的常驻进度条模式下,暂停播放按钮常驻于进度条左侧,用户必须点击左下角区域才能进行暂停播放操作,热区范围较小。因此部分app在暂停后,在画面中心增加播放按钮,用户点击画面区域触发播放功能,方便用户点击播放。但这种方式下播放按钮对视频画面有遮挡,如果是视频编辑的场景,会影响用户对视频画面的浏览。
部分app采用了不展示暂停按钮的视频播放模式,用户点击视频画面区域直接暂停,再次点击继续播放,这种模式下相比前一种模式用户更方便进行暂停和播放的切换,但缺点是可能会让用户误以为缺少视频暂停功能,并且暂停操作需要用户学习成本。
为了让用户感知点击视频画面暂停视频,部分app在用户刚进入页面时先展示视频暂停状态,1-2s后自动进入播放状态,播放按钮隐藏,让用户自然了解到视频具有暂停功能。如有必要,可以在用户首次进入页面时增加暂停操作提示。
进度条隐藏
默认播放状态不展示进度条和暂停按钮,用户点击视频画面后,操作元素显示。
优点:
页面干扰元素少,专注视频观看
缺点:
暂停、调整播放进度需要多次点击
操作元素被隐藏,可能会造成用户认知困扰
进度条隐藏的视频播放模式是目前内容类产品普遍采用的模式,这种模式将用户观看和操作行为分离,将进度条隐藏,增加用户切换进度成本,可能有助于提高用户观看时长。
部分产品为了让用户能实时了解视频进度,会在视频下方增加进度条指示。为了便于用户暂停操作,将暂停按钮置于画面中心,这样进一步提升了视频播放的易用性,因为暂停是用户观看视频内容的重要需求。
当视频长度较短,或视频属性较轻时,切换视频进度的需求较弱,部分产品采用了将进度条简化为进度指示条,用户点击视频画面触发暂停。
情况3 全屏视频播放
全屏视频播放模式一般用于相册工具类或视频内容较轻的情况,用户点击视频入口后激活视频播放器,进行视频观看。这种情况用户目的就是观看视频,因此通常采用的设计模式和上文所说的进度条隐藏模式类似,将用户观看和操作行为分离。
最后
这里只是对常见的视频播放模块设计模式进行简单整理和分析,随着视频内容在手机端越来越重要,视频播放的产品需求会越来越多样化,未来肯定也会出现更多更有效的设计模式。不足之处希望指出。