寫在前面

近年來，三星、華為等手機廠商陸續發布 Galaxy Fold、Mate X 等折疊屏手機。其普及速度似乎超過了人們的想象。2021 年 12 月 2 日，根據屏幕機構 DSCC 公布的一份最新研究報告指出：2022年第三季度，折疊屏手機的總出貨量環比增加了 215%、同比更是暴漲 480%。

折疊屏手機從折疊的方式和角度可以分為：內折疊、外折疊、X 軸折疊、Y 軸折疊等，目前這四個方向均已落地在各大產品中。其中最常見的使用狀態有折疊狀態和展開狀態。折疊屏展開下屏幕變寬，給用戶帶來了更高效的信息展示和更加沉浸的瀏覽體驗。

從曲面到大屏再到折疊屏，這一概念的想法已經成為現實，屏幕寬窄的變化給體驗設計也帶來新的挑戰，為了保證不同寬度下的使用品質，我們采用了響應式布局的設計策略來解決適配問題。本次筆者將從最常見的 X 軸折疊的方式（以華為手機 Mate X 為例），對響應式布局技術進行探索。

折疊屏設計指南：

二、什么是響應式布局

形容響應式布局最貼切的一句話為“Content is like water”，即:“如果將屏幕看作容器，那么內容就像水一樣。”

通俗來說，「響應式布局」就是一套代碼、一種設計語言同時兼容所有尺寸及終端，由一個網站轉變成多個網站。在以前，響應式布局更多用在 PC Web 上，隨著平板、大屏手機等等移動設備的普及，響應式布局越來越多地運用在移動互聯網來解決多端瀏覽體驗。

二、響應式布局策略

簡單地說，頁面設計可拆解為“基礎元素(文字、圖標等等)”、“頁面布局(元素的組織形式)”、“信息架構 (頁面之間的跳轉關系)”3 個環節。在適配時，頁面各元素粗暴地等比放大并不能保證不同屏幕尺寸下的瀏覽體驗。為了建立科學可復用的適配體系，我們將從這三個環節分別解決適配問題。

1. 基礎元素

基礎元素包括文字、圖標、按鈕、圖片素材等。我們通過觀察發現，在展開態和折疊態下用戶的瀏覽距離沒有明顯的變化，因此要避免展開時元素太大影響體驗，在適配時用相同的大小比例即可。在特殊場景比如大段文本類頁面時可以適當放大 1.2 倍比例。

2. 頁面布局

常用的適配方式有拉伸布局、相對縮放、擴展布局、挪移布局等：

拉伸布局

各元素的顯示寬度不是固定值，而是通過相對參照物的方式來確定其位置，當布局的顯示大小發生變化時，元素的顯示寬度隨之發生改變。

相對縮放

布局內元素的顯示大小不是固定值（比例鎖定），而是通過相對參照物的方式來確定其寬或者高的參數，當布局的顯示大小發生變化時，元素的大小隨之發生改變。

擴展布局

當組件內元素橫向布局，元素間的距離固定時，布局可顯示元素的數量可隨著顯示寬度的改變而發生變化。利用屏幕的寬度優勢，將相同屬性的布局組件橫向并列同時排布。

挪移布局

布局內的元素根據屏幕的寬度來選擇是上下排布還是左右排布。

3. 信息架構

前面提到的 2 點是對于單個頁面的適配策略，在展開時，屏幕尺寸的增加也為信息架構的調整帶來更多可能。例如社交軟件主頁，在折疊態時需點擊某個聊天列表跳轉進入對話詳情，但是在展開態時會適配成“好友列表+對話詳情”的形式來體現層級關系

三、項目實戰

了解完通用的適配策略后，我們以平安集團個金業務線 “任意門”產品為案例，和大家分享是如何把這些理論知識運用到實際項目，并且推動項目落地上線的。

1. 團隊內部宣講與價值說明

由于本次項目會用到大量資源，我們在推動前，首先與業務方，主管，開發等內部成員組織了一次宣講會，會上闡述本次項目要解決的問題和價值說明，得到大家認可后，一起決定去做本次項目。這一步是最關鍵也是起初就要做的，設計師往往自己先埋頭做完設計然后再推動，但結果經常會很難推或者推不動，殊不知達成團隊意識的統一是在執行前更重要。

2. 適配體系建設

在內部獲得認可后接下來就是設計師進行具體方案設計了。由于任意門業務復雜，為了便于團隊協作、保證體驗一致性以及后期維護，我們結合前文提到的理論知識，建立了關于任意門的響應式適配體系：

制定全局刪格系統

為了頁面設計在不同屏幕寬度時的一致性和規整性，我們先制定了一套同時適用于寬屏和窄屏的刪格系統。在制定刪格系統時，需要考慮列數和水槽間隔以及安全邊距。我們在本案例中利用等分列數，在折疊態使用 4 列，在展開態使用 8 列等分，另外水槽間隔為 8pt、安全邊距 20pt。

統一基礎元素適配規則

前文提到通過測試發現用戶在展開態和折疊態下瀏覽距離沒有明顯的變化；另外也從實際考慮任意門業務復雜，二三級頁眾多，點對點修改成本高，為了團隊提效，我們在適配時采用「文字、按鈕等基礎元素大小沒有變化」這一策略進行標準化適配。

建立模版組件庫

對于經常用到的組件，我們針對展開態建立了標準的組件庫，以便于開發和后續設計同學延展。以金融行業經常用的產品卡片為例，我們發現在不同鏈路中都會有此類卡片的展示，通過對使用場景的梳理和分析，制定了統一的組件，團隊內部直接挪用即可。

再以常見的資源位為例，我們分別對 1 張、2 張、3 張的情況都制定了對應適配規則，在其他業務場景上直接復用即可

拆分排期和保障機制

輸出完設計稿。最后就是開發落地了。由于版本迭代周期短，我們決定對項目進行拆分排期。本次項目是由設計師發起的，因此也承擔了項目管理的角色。我們制作了項目周期表方便后續管理。同時，建立了「方案評審-開發-設計驗收」保障機制，保證最后落地效果。

通過以上策略，我們既可以快速地批量進行輸出，又能保證體驗一致性。

五、寫在最后

在實際項目迭代中開發資源相當緊張，我們通過響應式適配策略既解決了折疊屏不同狀態下的用戶體驗，又相對節約了人力成本。作為本次項目的發起者，設計師也獲得了團隊內部認可和好評。也在此感謝產整個團隊的全力支持，在追求體驗的路上沒有盡頭。

參考文獻

《華為折疊屏應用開發指導》https://developer.huawei.com/consumer/cn/doc/90101