悬浮照片

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

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

国内市场上的直播软件或者视频软件，⼤多都有悬浮窗功能（也可以叫画中画）。

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

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

本⽂针对竞品该功能进⾏研究，并且在后⽂附上相较于竞品功能的优化在后⽂附上相较于竞品功能的优化。

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

竞品现状

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

悬浮窗功能开启悬浮窗功能开启：当⽤户点击打开这个开关的时候，会弹出是否授予APP悬浮窗权限。如果授予了，就可以在系统桌⾯显⽰直播画⾯；如果没有

授予，仅仅可以在APP内使⽤这个权限（但是可以暂时不授予这个权限，以后再授予）。

悬浮窗功能使⽤悬浮窗功能使⽤：当⽤户离开直播间的时候，就会展⽰直播画⾯在⼀个悬浮窗内。

悬浮窗交互悬浮窗交互：

缩放：悬浮窗可以通过双击画⾯进⾏缩放，仅可以缩放3个⼤⼩仅可以缩放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_杜⼩菜秃头⼩哥哥Androider_杜⼩菜秃头⼩哥哥在开发过程中把某些极端场景帮忙定义。

⼗分感谢EvelynChaw⼩姐姐EvelynChaw⼩姐姐⾦牌测试，测试过程中不断对我进⾏投诉。