作者 | 阿里巴巴文娱技术 叮东

头图 |  CSDN 下载自东方IC

背景

近年来，大屏手机、安卓Pad、iPad、折叠屏手机、车机大屏等大尺寸设备发展迅猛。尤其是2020年二季度中国平板市场出货量达到661万台，同比增长17.7%，其中苹果 iPad市场份额占比41.8%，华为平板市场份额占比37.1%。

安卓系统运行在越来越多尺寸的设备上，开发的手机App如何适配到不同尺寸上，是安卓开发者遇到的痛点。同时苹果也推荐开发适配手机和iPad的Universal版本，支持iPad的诸多新特性，例如侧拉、分屏使用等。基于以上背景，我们启动了优酷APP响应式，适配不同屏幕尺寸下的显示效果。

安卓Pad

折叠屏

iPad

什么是响应式

描述响应式最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样流淌”。

响应式就是基于同一套代码，开发一个APP能够兼容多尺寸、多终端设备的显示，能够动态调整页面的布局以及容器的布局，充分利用当前屏幕的尺寸，为用户显示更多的内容，提供更好的浏览体验，同时提升APP的开发效率，迭代速度更快，保障多终端业务同步发展。

响应式的优势

1、开发成本更低 —— 一套代码

想要在不同尺寸屏幕的终端上获取良好的显示效果，传统的应用适配方案是针对不同尺寸的终端设备开发多个APP，例如很多厂商都会针对Pad推出HD版本。而响应式的APP可以根据屏幕具体的物理尺寸自适应的显示，只需要开发一套代码，就可以兼容多种尺寸的终端，不需要开发单独的HD版本。

不同的终端的App，由不同的垂直团队开发，会带来不同的后台系统和客户端技术方案，前后端技术能力会走向分化。响应式是同一个APP运行在不同尺寸的设备上，使用统一的后台系统，一次开发，多端生效。

2、设计成本更低 —— 一套设计规则

响应式使用了一套界面自适应的布局方案，横向拉通页面以及容器布局的适配规则，提高了屏幕的显示效率，面对不同分辨率的设备适应性更强，最大化提升用户的操作体验。一套设计规则，适配不同的尺寸，做到以不变应万变，大大节约了设计的成本。

3、业务迭代更快 —— 多端业务同步发展，一次运营多端生效

响应式APP多端保持一致的版本发布节奏，业务方在迭代过程中，会考虑多端的不同使用场景，业务特性能快速在多端同步推进。

往往不同终端有不同的运营系统，可能存在多个垂直运营团队，一次运营动作需要操作多次。响应式基于同一个客户端、后台和运营系统，运营收敛到一个团队，一次运营多端同步生效。

响应式的设计思路

如何在不同尺寸不同分辨率的屏幕下，有效的利用屏幕的尺寸？最简单的理解就是在大屏幕上显示更多的内容。这就需要在设计侧通盘考虑所有尺寸的屏幕，拉通不同宽高比例的设计规则，动态调整可见元素的布局（元素的列数以及尺寸等），在不同尺寸的设备上都能达到最佳的显示效果。

1、基本原则

1)  内容自动伸缩，保证适配内容填满当前屏幕；

2)  坑位列数可灵活按照屏幕的宽高比例进行适当增加或减少进行排版布局；

3)  组件内的内容可根据页面的宽度自动隐藏或显示部分内容，进行整个屏幕的适配，减少留白；

4)  页面边距间距用物理尺寸dp表示。在不同的设备上保证左右边距、间距的物理尺寸不变，内容做自适应；

5)  在不同机型适配上，交互方式符合大部分用户的使用习惯，体验是连贯统一的；

6)  同一页面在不同大小和比例及分辨率下看起来都是舒适的、合理的；

7)  内容在多尺寸响应适配下如遇适配成本过高或适配不了的情况，设计&产品&开发需要基于体验、业务、实现成本考虑达成一致，以低成本无损体验方式来完成适配

2、适配规则

1)  拉伸布局，内容元素在相对宽度内通过结合内容的展示隐藏来进行进行相应的拉伸适配，比如顶导航底导航；

2)  等比缩放，界面中元素在相对位置内按照一定比例进行缩放；

3)  扩展布局，通过内容元素的增加或减少，扩展为多行或者多列重复排列；

4)  组合布局，模块与模块进行组合，去适配宽度；

5)  内容固定居左，横屏&竖屏下固定布局，大小尺寸不变居左展示；

6)  内容固定居中，在横屏竖屏下比例不变 保证内容居中展示；

7)  分栏布局，页面的结构发生变化，按照屏幕宽度左60%，右40%占比进行分两栏展示。在优酷视频中，分栏布局主要用于播放页的展示，左60%宽度提供良好的播放体验，右40%宽度方便用户操作，推荐相关视频内容和评论；

响应式的架构设计

响应式的核心是拉通多终端的适配规则，开发一套界面，一个APP兼容多尺寸终端设备的显示，能够根据用户的行为以及设备的环境(屏幕尺寸、屏幕方向、是否分屏等)进行相应的页面布局以及容器尺寸的调整。为此响应式SDK提供了响应式状态管理、横竖屏切换、容器列数换算规则、容器尺寸适配规则、页面宽高获取方法、响应式基础控件等基础能力。业务方只需要接入响应式SDK，就能够方便快捷的解决在不同尺寸下的适配问题。

从结构上看，响应式由响应式SDK、响应式页面布局、响应式容器布局三部分相互配合完成，在这些的基础上支撑了首页、频道页、播放页、会员页、搜索、个人中心等众多的业务场景。

在Android和iOS上，如何进行响应式状态的管理？如何解决分屏下页面宽高的获取？如何解决多尺寸多终端下的页面布局以及组件容器的布局？具体细节请看以下两篇文章：

《响应式技术架构(Android)》

《响应式技术架构(iOS)》

响应式的业务改造

经过前期的技术调研，确定了Android、iOS、Flutter、Weex、H5等技术栈的适配方案，并以首页、频道页、播放页三大业务场景为切入点，完成初期响应式适配，进行效果演示。验证适配方案可行性后，决定在优酷所有核心业务场景落地。为了推进项目的顺利进行，召集了相关核心业务场景的技术、产品、设计、测试同学，进行项目kick off，介绍项目背景以及价值，明确相关业务团队具体的工作和节奏，经过1个月所有同学的努力，顺利在所有核心场景上线。

具体参与改造的核心业务场景有：首页、频道页、播放页、搜索、会员、会员交易、动态、个人中心、二级页、互动、评论等，部分场景适配效果如下所示：

响应式业务改造涉及众多的业务场景以及技术栈，如何在实际的适配过程中，确保所有的业务场景和技术栈都能低成本高效的适配，是响应式落地的关键。那么业务方在适配过程中具体做了哪些工作？如何解决多技术栈的响应式改造？如何保障响应式适配后的用户体验？由于优酷的业务场景非常多，分发场景和消费场景是其中最典型也最重要的。

响应式的测试与上线

优酷响应式适配对测试来说面临着很大的挑战，既要保证不同尺寸上的适配效果，又要保证业务的完整。这就要求在测试过程中需要进行功能测试、稳定性测试、性能测试以及兼容性测试。

更多精彩推荐
☞1024程序员节重要议程曝光，开源技术英雄会聊开源“真心话”☞“我们的目标是取代物联网中的安卓” | 人物志
☞对话阿里云：开源与自研如何共处？
☞服！AI 让兵马俑“活”起来，颜值惊艳！
☞AI 还原康乾盛世三代皇帝的样貌，简直太太太好玩了！☞观点 | 回顾以太坊近期及中期扩容路线图，展望 rollup 作为中心的以太坊路线图

点分享点点赞点在看