直播视频画中画(悬浮窗)的新交互及注意

仅以本文纪念状态最多最难定义的功能。

国内市场上的直播软件或者视频软件,大多都有悬浮窗功能(也可以叫画中画)。

国外的直播APP几乎没有对应的功能,除非是国内公司做的APP,因此当时在产品设计的时候着重以某鱼进行研究。

画中画功能让用户在看直播的时候被打断了,还能边处理事情边看直播(例如IM),同时能在处理完事情之后,快速的回到直播间。

本文针对竞品该功能进行研究,并且在后文附上相较于竞品功能的优化

(系统层级的画中画当前仅在安卓端实现)

竞品现状

例如某鱼直播平台,在安卓端的设置里面就有如下图的悬浮播放功能。

悬浮窗功能开启:当用户点击打开这个开关的时候,会弹出是否授予APP悬浮窗权限。如果授予了,就可以在系统桌面显示直播画面;如果没有授予,仅仅可以在APP内使用这个权限(但是可以暂时不授予这个权限,以后再授予)。

悬浮窗功能使用:当用户离开直播间的时候,就会展示直播画面在一个悬浮窗内。

悬浮窗交互

缩放:悬浮窗可以通过双击画面进行缩放,仅可以缩放3个大小,X1,X2,X3;也可以通过单击画面X1处进行缩放。

静音:单击画面中的声音按钮,实现禁音和播放声音。但是不能调整声音。

回到直播间:单击画面中除了X1和静音按钮外的任意一个地方,即可回到直播。

如下图(注意右上角的关闭按钮,后文会讲到)

新功能引导:在首次出现悬浮窗的时候,画面中会有一个引导层教用户怎么进行操作。引导层点击则消失。


海外用户的不适应

当时我们在按照某鱼的做法来做产品功能的时候,在第一版发现了一些海外用户用不舒服的地方。

一、某鱼的悬浮播放开关,只有一个按钮。

对于没有受到悬浮窗功能教育的用户来说,他们不明白为什么需要授予系统级的悬浮窗权限,明明就已经打开了开关,为什么还需要额外授予什么权限,如果不授予那么会怎么样?开关关闭?正常使用?

这个权限的授予会造成用户的困扰,特别是海外用户

并且如果当时没有授予权限,以后也不知道需要授予权限才能在APP外也能打开悬浮窗。

二、某鱼的悬浮窗仅仅能缩放3个大小的画面。

3个倍数大小的缩放,在我们看来似乎不太满足用户的多种场景的个性化需求。

三、用户比较容易忽略某鱼缩放交互

某鱼缩放交互的出现,是第一次展示悬浮窗的时候,悬浮窗上面有一层引导层。

而用户在第一次使用悬浮窗的时候,只想赶快知道这个东西是什么,引导层把用户的思维打断了,用户不会注意到引导就直接取消。

并且海外较常使用的twitch,youtube直播平台,他们们的画中画是没有缩放功能。更别提使用双击进行缩放功能了。

针对性优化

因此,针对以上的三种情况,我们分别进行了优化迭代。

一、我们分别设计了两个按钮开关,两个都是独立的开关。

1是APP内的悬浮窗(不需要权限),2是系统级的悬浮窗(需要系统给予悬浮窗权限)。

第2个悬浮窗打开的时候会检测APP是否有权限。如果没有给予系统层级的权限,会出现一个弹窗引导用户去给予权限。如果在之前已经授予了悬浮窗权限,则直接打开。

这样做的优点是能满足到用户多场景的个性化的需求。如用户仅仅想在APP内使用悬浮窗而不想在APP外使用悬浮窗;用户只想在APP外使用而不想在APP内使用;还有就是海外用户对于权限的给予比较敏感

缺点是按钮太多而不够简洁。

悬浮窗开关

二、优化悬浮窗的缩放倍数和交互

参考照片的缩放:两个手指放大放小,这也是第一代智能机就有的缩放交互。

参考PC的缩放:鼠标拉动边缘的位置进行缩放。

因此参考的交互是直接拖动缩放的icon的位置,即可将视频缩放。使用拖拽的效果,让用户在可展示的视频最大值和最小值之间近乎平滑的进行缩放。这样可以满足一些用户的强迫症

值得注意的是:开发的过程中发现在APP外使用画中画的时候,拖动会有一些抖动。

悬浮窗缩放

三,画中画调起直播间

在实际测试中发现,有些安卓机型点击画中画,不能直接调起APP回到直播间,并且画中画消失了,但是直播的声音仍然存在。

发现小米手机在权限管理中有个“允许后台弹出消息”的权限,勾选之后就可以调起APP。

猜想应该是国产系统做了某种限制,这种系统层级的限制,我们往往是没有办法的

当前解决的办法是当画中画在APP外打开的时候,在系统状态栏给予一个状态提示(如下图),点击状态提示,直接打开APP并且回到直播间。

此方案的优点是能解决了某些机型不能调起APP的“BUG”。

缺点是增加了用户的操作步骤,不够简洁。


状态栏提示


实际开发中的一些产品问题

当然,以上的产品功能是比较粗略的,实际的需求开发过程中,遇到了很多问题。

1,手机息屏的时候怎么处理

手机息屏的时候,直接关闭画中画模式,并且没有声音,再点亮屏幕,不回复画中画。

2,点击画中画(包括状态栏)和点击APP图标有什么不同

点击画中画的时候回到对应的直播间,点击图标回到离开APP时候的位置。满足用户的操作预期。

3,返回直播间的聊天室优化体验

处于画中画的时候,大多数竞品的表现都是直接销毁了直播间,意味着用户处于画中画时,不能接收到聊天室的消息,从画中画返回直播间,也需要重新加载聊天室。

因此更进一步的优化则是画中画状态继续保持聊天消息。此时则需要考虑内存的问题,还有各种异常状态的定义。

4,画中画增加静音按钮

画中画可以添加静音按钮,锦上添花。

4、某鱼功能深度体验后的针对性优化(不知道为何某鱼这么久都没有改进这个)

在使用小米手机全面屏手势的时候,手势从底部往上滑,是回到系统桌面。

因此若是在某鱼打开了画中画,则使用该手势之后,预期的结果应该是展示画中画。

实际在使用某鱼过程中,是没有展示画中画,但是仍然有声音。

当时我们做出的产品发现也有这个问题,问题的根源是监听不到这个手势,因此用户只能从直播间退出,再回到系统桌面。这样十分麻烦!!!!

所以研发小哥换了一种思路,写逻辑监控前后台的变化。




十分感谢Androider_杜小菜秃头小哥哥在开发过程中把某些极端场景帮忙定义。

十分感谢EvelynChaw小姐姐金牌测试,测试过程中不断对我进行投诉。

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

推荐阅读更多精彩内容