下一章： 優酷APP響應式布局技術之Android篇 | 《優酷響應式布局技術全解析》第二章>>> 作者| 阿裡巴巴文娛技術 叮東
一、背景
近年來，大屏手機、安卓Pad、iPad、折疊屏手機、車機大屏等大尺寸裝置發展迅猛。尤其是2020年二季度中國平闆市場出貨量達到661萬台，同比增長17.7%，其中蘋果 iPad市場佔有率占比41.8%，華為平闆市場佔有率占比37.1%。
安卓系統運作在越來越多尺寸的裝置上，開發的手機App如何适配到不同尺寸上，是安卓開發者遇到的痛點。同時蘋果也推薦開發适配手機和iPad的Universal版本，支援iPad的諸多新特性，例如側拉、分屏使用等。基于以上背景，我們啟動了優酷APP響應式，适配不同螢幕尺寸下的顯示效果。
二、什麼是響應式
描述響應式最著名的一句話就是“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個月所有同學的努力，順利在所有核心場景上線。
具體參與改造的核心業務場景有：首頁、頻道頁、播放頁、搜尋、會員、會員交易、動态、個人中心、二級頁、互動、評論等，部分場景适配效果如下所示：
響應式業務改造涉及衆多的業務場景以及技術棧，如何在實際的适配過程中，確定所有的業務場景和技術棧都能低成本高效的适配，是響應式落地的關鍵。那麼業務方在适配過程中具體做了哪些工作？如何解決多技術棧的響應式改造？如何保障響應式适配後的使用者體驗？由于優酷的業務場景非常多，分發場景和消費場景是其中最典型也最重要的，推薦檢視以下這兩個場景的落地文章：
《優酷響應式在消費場景的落地 Android》
《優酷響應式在消費場景的落地 iOS》
七、響應式的測試與上線
優酷響應式适配對測試來說面臨着很大的挑戰，既要保證不同尺寸上的适配效果，又要保證業務的完整。這就要求在測試過程中需要進行功能測試、穩定性測試、性能測試以及相容性測試，具體細節請看以下文章：
《優酷響應式測試方案》