刷新 
类型 | 特点 | 外折 折叠屏 | 内折折叠屏(无悬停) | 内折(支持悬停) | 翻盖折叠屏 |
代表机型 | 华为Mate X | 小米Fold 2 | OPPO Find N2 | OPPO Find N2 Flip |
图示 |
|
|
|
|
优酷折叠屏适配上——整体思路与实现
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
点击蓝字 关注我们
一、背景
折叠屏作为整个手机行业中的一个重要组成部分及新型的设备形态，相较于传统的直板手机，其不仅实现了屏幕尺寸增加，同时还满足携带方便的需求，近几年各大手机厂商也在努力提高折叠设备的使用体验。
下图是综合了5家预测机构对全球手机出货量的预测，可以明显看到，直板机的增速在逐渐放缓，而折叠设备出货量的增速显著提高，这也反映了有越来越多消费者开始向折叠屏手机迁移。
优酷作为国内领先的在线视频内容平台，致力于将更好的内容和使用体验带给用户，在折叠屏手机用户不断增多的趋势下，我们也敏锐地开始关注折叠屏手机上的使用体验。
从目前的各大视频平台来看，基本上还没有一个很好的适配体验标准，各大App基本就是在原有效果的基础上，做了大屏的展示（如下图）。所以优酷对于折叠屏的适配也是在摸索前行，怎样可以给用户带来更好的大屏体验及沉浸式观影，同时可以在播放的过程中很方便地进行视频的控制操作？怎么样在折叠屏不同的形态上给用户更加直观的内容选择？基于对这些问题的讨论，我们展开了折叠屏适配工作。
之前优酷的效果
二、优化方向
基于调研，我们确定了折叠屏适配优化的三大方向:
1、充分利用折叠屏特性，基于优酷OnePlayer播放框架，优化播放体验；
2、在响应式布局上充分利用折叠屏的尺寸和折叠特性，提高分发效率；
3、与厂商更紧密地合作，结合系统新特性带来更极致的体验。
从现有技术来看，目前有3套适配方案:
通过多次技术调研、自身体验、以及现有开发能力和维护成本考虑，最终我们选择了拓展响应式SDK来支持折叠屏的方案。
三、方案设计
“ Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样流淌”。优酷响应式就是基于同一套代码，开发一个APP能够兼容多尺寸、多终端设备的显示，能够动态调整页面的布局以及容器的布局，充分利用当前屏幕的尺寸，为用户显示更多的内容，提供更好的浏览体验，同时提升APP的开发效率，迭代速度更快，保障多终端业务同步发展。
优酷前两年响应式布局方式横空出世，无论是从开发角度还是用户角度都带来了极大的便利性，提高了分发效率。但是随着折叠屏用户越来越多，技术越来越先进，折叠屏跟Pad与Phone的区别还是比较明显，怎么给这部分用户带来更好的体验，同时给开发同学带来更便利灵活的API，也提上了日程。
基于优酷响应式SDK拓展出来的折叠屏模块，针对折叠屏设备做了更进一步的挖掘。通过此SDK可以方便地获取设备的屏幕参数、折叠姿态、还有跟厂商合作的一些特性都包含在内。整体结构如下图:
SDK内部抽象了适配层、布局管理层。优先使用各大厂商的提供的折叠屏方案，其次使用谷歌提供的Jetpack方案。为了抹平底层能力的差异，做的适配层可以对上层业务提供统一的接口回调。
四、效果展示
1. 分发效率：首页效果
首页将折叠屏和pad设备统一进行了设计优化，在折叠屏设备展开后能够有同等于pad设备的“沉浸式大屏体验”，同时在折叠使用的时候又能够与手机端的产品体验基本保持一致，能够动态切换卡片列数，而且最明显的变化是在折叠屏展开态下采用了“大卡环绕小卡”的1+N交错网格布局，突出了“大卡”的分发效率，整体feed布局也更加整齐清晰、主次分明的结构。
2. 分发效率：播放分栏效果
通过播放页分栏效果可以看出，整个为你推荐展示在了右侧，为你推荐作为用户的内容喜好，在整个大屏下给用户更加直观以及更多的选择，不再需要滑动才能看到推荐内容。同时所有的半屏都展示在了右侧，让用户很方便地进行操作，在全屏下又能够感受沉浸式的大屏观影体验。
3. 播放体验：播放悬停态效果
悬停模式下，整个设备可以放在一个平面上，为了更好的视频播放的操控体验，将整个播控移动到了下屏，视频播放则在上屏。同时增加了新的操作形式（如声音调节，亮度调节），用户在该种形态下，可以像小电脑一样地进行视频的操作观影，不需要再将设备拿起来进行视频的播控操作。最后为了用户更多的内容体验，增加了一些创新的播放形式（比如平行酷看），这样，用户可以在观影的同时，有更多的推荐内容观看及选择。
一折即用
播放悬停态
平行酷看
4. 分发效率：搜索分栏效果
搜索页采用了分栏设计，将“相关搜索”和“热门搜索”两个重要模块在边栏常驻。用户在寻找自己想看内容的同时，可以随时使用侧边栏切换搜索关键词。利用了折叠屏大屏的特性，相比于手机端简化了用户的操作路径，也更加便于新热内容的分发。
五、技术实现
1. 悬停模式
折叠屏目前大概分为以下四大类：
随着这几年技术的提高，结合实际用户体验，厂商目前发力的都是内折模式(带悬停)，内折带悬停模式的设备可玩性更高，而且对于用户体验的提升也是很明显的。
优酷播放器，是基于插件来管理的播放架构，叫做OnePlayer。每一个功能组是一个插件。插件可以自己声明在折叠态下的显示形态，支持折叠态-上半屏显示、折叠态-下半屏显示、折叠态-全屏显示 三种模式。
折叠屏SDK识别到设备姿态变化，通知给OnePlayer。OnePlayer会对所有已经展示中的插件进行遍历，根据插件的配置信息和折叠屏sdk返回的屏幕信息，来进行布局的刷新。
整体结构如下图所示:
2. 分栏模式
基于最新的SDK可以非常方便地获取到设备的折叠状态和屏幕信息，来实现Phone和折叠屏的完美切换。如视频所示，折叠后设备展示的内容与Phone端一致。展开后充分利用了折叠屏的屏幕尺寸，分栏显示内容。
实现方式如下：
服务器对某个组件增加折叠屏标记。
客户端根据页面形态变化，对数据进行拆分过滤，渲染。具体可参照下图：
3. 定投
适配的时候，我们经常会遇到，部分组件在折叠屏下不管怎么适配都不理想；或者我们期望折叠屏下有不一样的卡片。针对这种场景，我们采用数据定投的方案。
针对埋点，拓展公参responsiveType字段。区分设备类型，phone/pad/folder，便于后续统计数据。
4. 运营投放策略
接口请求的公参里增加区分设备类型的字段。运营同学可以非常方便地勾选需要定投的设备。后台示例：
六、展望
目前各家厂商的直板手机已经到了瓶颈期，折叠屏在后面肯定会有大的发展，也会成为未来的一大趋势，而折叠屏的适配目前还处于初始期，目前我们做的大部分还是基础体验的适配，播放上的创新体验只做了平行酷看，未来可以将更多的功能加入到折叠屏中。
比如手势控制，可以将手机放在桌面，用户仅通过手势可以进行简单的上一集、下一集控制，或者进度控制。
比如可以将优酷目前的一些播放形态引入，比如自由视角（普通手机已实现，通过角度滑动可以观看不同角度视频的效果），可以在下屏进行角度滑动，上屏展示视频效果。
再比如文字发送/聊天（发弹幕，一起看），可以把折叠屏看成进入了电脑模式，键盘在下屏输入，上屏进行观看等。
以下内容你可能感兴趣
GaiaX开源解读 | 表达式作为逻辑动态化的基础，我们是如何设计的
