作者 | 阿里巴巴文娛技術 叮東
頭圖 | 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個月所有同學的努力，順利在所有核心場景上線。
具體參與改造的核心業務場景有：首頁、頻道頁、播放頁、搜索、會員、會員交易、動態、個人中心、二級頁、互動、評論等，部分場景適配效果如下所示：
響應式業務改造涉及眾多的業務場景以及技術棧，如何在實際的適配過程中，確保所有的業務場景和技術棧都能低成本高效的適配，是響應式落地的關鍵。那麼業務方在適配過程中具體做了哪些工作？如何解決多技術棧的響應式改造？如何保障響應式適配後的用戶體驗？由於優酷的業務場景非常多，分發場景和消費場景是其中最典型也最重要的。
響應式的測試與上線
優酷響應式適配對測試來說面臨著很大的挑戰，既要保證不同尺寸上的適配效果，又要保證業務的完整。這就要求在測試過程中需要進行功能測試、穩定性測試、性能測試以及兼容性測試。