作者|阿里文娱科技丁咚
头部| CSDN下载自东方IC
背景
近年来，大屏手机、Android Pad、iPad、折叠屏手机、大屏汽车等大尺寸设备发展迅速。特别是2020年第二季度，中国平板市场出货量达到661万台，同比增长17.7%，其中苹果iPad市场份额占41.8%，华为平板市场份额占37.1%。
Android系统运行在越来越多不同大小的设备上。如何让开发的手机App适应不同的大小，是安卓开发者遇到的痛点。同时，苹果还推荐开发手机和ipad通用版，支持ipad的很多新功能，比如侧拉、分屏使用等。基于以上背景，我们启动了优酷APP Responsive，以适应不同屏幕尺寸下的显示效果。
安卓平板电脑
折叠式屏风
苹果平板电脑
什么是有求必应？
形容响应性最著名的一句话是“内容如水”，翻译成中文就是“如果把屏幕看成一个容器，那么内容就像水一样流动”。
响应式是指基于同一套代码，开发一个APP可以兼容多尺寸多终端设备的显示，动态调整页面和容器的布局，充分利用当前的屏幕尺寸，为用户展示更多的内容，提供更好的浏览体验。同时可以提高APP的开发效率，让迭代速度更快，保证多终端服务同步开发。
响应的优势
1.降低开发成本——一套代码
为了在不同屏幕的终端上获得良好的显示效果，传统的应用适配方案是针对不同尺寸的终端开发多个app。比如很多厂商会针对Pad推出高清版本。响应式APP可以根据屏幕的具体物理尺寸自适应显示。它只需要开发一套代码就可以兼容各种尺寸的终端，不需要开发单独的高清版本。
不同终端的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、Flutter、Weex、H5等技术栈的适配方案，并以首页、频道页、播出页为切入点，完成了初步的响应式适配并展示了效果。在验证适配方案可行性后，决定在优酷所有核心业务场景落地。为了推动项目的顺利进行，召集了相关核心业务场景的技术、产品、设计、测试同学为项目开球，介绍了项目的背景和价值，明确了相关业务团队的具体工作和节奏。经过全体同学一个月的努力，核心业务场景全部成功上线。
转型涉及的具体核心业务场景包括:首页、频道页、播出页、搜索、会员、会员交易、动态、个人中心、二级页面、互动、评论等。一些情景的适应效果如下:
响应式业务转换涉及许多业务场景和技术堆栈。如何在实际适配过程中保证所有业务场景和技术栈都能低成本高效率适配，是响应式落地的关键。那么业务方在适配过程中做了什么呢？如何解决技术栈的响应式转化？响应式适配后如何保证用户体验？因为优酷有很多业务场景，分发场景和消费场景是最典型最重要的。
响应测试和在线
优酷的响应式匹配测试面临很大挑战，不仅要保证不同大小的匹配效果，还要保证业务的完整性。这就需要在测试过程中进行功能测试、稳定性测试、性能测试和兼容性测试。
更多精彩推荐
1024程序员节重要议程曝光，开源技术英雄将畅谈开源“真相”
“我们的目标是在物联网领域取代Android”| Characters
对话阿里云:开源和自研如何共存？
服装！让AI兵马俑“活”起来，价值惊人！
AI还原康乾盛世三代皇帝的模样，简直太好玩了！
查看|回顾以太坊近中期扩张路线图，展望以rollup为中心的以太坊路线图。
点粉香
点赞
指向观看
