APP中的视频播放设计模式分析


绝大部分app都有自己的视频播放模块,但相比图片展示模块,视频播放模块有其特殊性,在不同场景下,用户对视频播放会有不同的需求。

视频播放模块需求

先看下正常用户浏览视频所需要的操作:

视频播放画面

暂停

画面暂停状态、继续播放

播放进度/时长

调节播放进度

静音全屏退出/…

但是用户观看/浏览视频时,过多的页面功能元素会对视频画面进行干扰,因此设计视频播放模块时,需要针对使用场景,采用不同的设计模式。

大部分视频播放模块一般分为下图3情况:


情况1 页面中视频预览


这种情况下视频播放区域为页面元素一部分,可能页面中还存在其他视频模块,在wifi情况下,当用户浏览至视频区域视频自动播放,而不管视频是否自动播放,点击视频均跳转至视频播放页面。这里视频模块主要目的是快速传递视频内容信息、吸引用户点击进入视频播放页。

提示视频形式:自动播放/播放按钮

传达视频内容:自动播放

提示视频信息:视频时长/播放进度

情况2 非全屏视频播放


这是最常用的视频播放形式,用户点击进入页面,视频播放模块占据屏幕视觉焦点位置,wifi情况下视频自动播放。但由于产品场景和需求的差异性,视频播放需要采用不同的模式。

进度条常驻

进度条常驻是满足视频播放需求最高效的设计模块,所有功能元素直接展示,用户可以快速进行相应操作。


优点:

可以实时看到播放进度

方便调整播放进度

暂停按钮直接展示,快速切换暂停/播放状态

缺点:

操作元素直接展示,干扰视频观看

暂停播放按钮触发区域较小

分析进度条常驻模式的播放模块,可知这种模块并不适合普通情况下的视频观看场景,因为用户正常观看时,对实时调节进度、了解进度、快速切换暂停播放的需求并不强,反而这些元素对视频画面内容有干扰作用。

但在视频编辑处理场景下,用户需要频繁快速调整播放进度、了解当前视频进度、频繁暂停/播放视频,因此进度条常驻模式常用于视频编辑场景,而视频编辑页面一般会有更多操作功能元素,但常驻进度条几乎都是页面必备元素。


常规的常驻进度条模式下,暂停播放按钮常驻于进度条左侧,用户必须点击左下角区域才能进行暂停播放操作,热区范围较小。因此部分app在暂停后,在画面中心增加播放按钮,用户点击画面区域触发播放功能,方便用户点击播放。但这种方式下播放按钮对视频画面有遮挡,如果是视频编辑的场景,会影响用户对视频画面的浏览。


部分app采用了不展示暂停按钮的视频播放模式,用户点击视频画面区域直接暂停,再次点击继续播放,这种模式下相比前一种模式用户更方便进行暂停和播放的切换,但缺点是可能会让用户误以为缺少视频暂停功能,并且暂停操作需要用户学习成本。


为了让用户感知点击视频画面暂停视频,部分app在用户刚进入页面时先展示视频暂停状态,1-2s后自动进入播放状态,播放按钮隐藏,让用户自然了解到视频具有暂停功能。如有必要,可以在用户首次进入页面时增加暂停操作提示。

进度条隐藏


默认播放状态不展示进度条和暂停按钮,用户点击视频画面后,操作元素显示。


优点:

页面干扰元素少,专注视频观看

缺点:

暂停、调整播放进度需要多次点击

操作元素被隐藏,可能会造成用户认知困扰

进度条隐藏的视频播放模式是目前内容类产品普遍采用的模式,这种模式将用户观看和操作行为分离,将进度条隐藏,增加用户切换进度成本,可能有助于提高用户观看时长。


部分产品为了让用户能实时了解视频进度,会在视频下方增加进度条指示。为了便于用户暂停操作,将暂停按钮置于画面中心,这样进一步提升了视频播放的易用性,因为暂停是用户观看视频内容的重要需求。


当视频长度较短,或视频属性较轻时,切换视频进度的需求较弱,部分产品采用了将进度条简化为进度指示条,用户点击视频画面触发暂停。

情况3 全屏视频播放


全屏视频播放模式一般用于相册工具类或视频内容较轻的情况,用户点击视频入口后激活视频播放器,进行视频观看。这种情况用户目的就是观看视频,因此通常采用的设计模式和上文所说的进度条隐藏模式类似,将用户观看和操作行为分离。


最后

这里只是对常见的视频播放模块设计模式进行简单整理和分析,随着视频内容在手机端越来越重要,视频播放的产品需求会越来越多样化,未来肯定也会出现更多更有效的设计模式。不足之处希望指出。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,277评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,777评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,946评论 0 245
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,271评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,636评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,767评论 1 221
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,989评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,733评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,457评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,674评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,155评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,518评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,160评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,114评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,898评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,822评论 2 280
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,705评论 2 273

推荐阅读更多精彩内容

  • 夜宵摊上,一位混沌大哥跟我聊开了,说我们是同乡,但现在都不怎么回老家了,在城里买了房子,过上小康生活。小摊...
    落雨坡阅读 210评论 0 0
  • 晚上9点泡脚 11点入眠 入眠前念诵三十五佛忏悔文,回向家人及众生 早起做15分钟瑜伽 10分钟打座冥想 5分钟持...
    Humoror阅读 219评论 0 1
  • 某校正在进行教学大练兵,教师人人上阵,开展启发式教学研究。 这天,该某低段语文女老师上识字课了。 老师:同...
    8b7535d983e2阅读 324评论 0 0