寫在前面

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

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

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

二、什么是響應(yīng)式布局

形容響應(yīng)式布局最貼切的一句話為"Content is like water"，即:"如果將屏幕看作容器，那么內(nèi)容就像水一樣。"

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

二、響應(yīng)式布局策略

簡單地說，頁面設(shè)計可拆解為"基礎(chǔ)元素(文字、圖標(biāo)等等)"、"頁面布局(元素的組織形式)"、"信息架構(gòu) (頁面之間的跳轉(zhuǎn)關(guān)系)"3 個環(huán)節(jié)。在適配時，頁面各元素粗暴地等比放大并不能保證不同屏幕尺寸下的瀏覽體驗。為了建立科學(xué)可復(fù)用的適配體系，我們將從這三個環(huán)節(jié)分別解決適配問題。

1. 基礎(chǔ)元素

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

2. 頁面布局

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

拉伸布局

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

相對縮放

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

擴展布局

當(dāng)組件內(nèi)元素橫向布局，元素間的距離固定時，布局可顯示元素的數(shù)量可隨著顯示寬度的改變而發(fā)生變化。利用屏幕的寬度優(yōu)勢，將相同屬性的布局組件橫向并列同時排布。

挪移布局

布局內(nèi)的元素根據(jù)屏幕的寬度來選擇是上下排布還是左右排布。

3. 信息架構(gòu)

前面提到的 2 點是對于單個頁面的適配策略，在展開時，屏幕尺寸的增加也為信息架構(gòu)的調(diào)整帶來更多可能。例如社交軟件主頁，在折疊態(tài)時需點擊某個聊天列表跳轉(zhuǎn)進(jìn)入對話詳情，但是在展開態(tài)時會適配成"好友列表+對話詳情"的形式來體現(xiàn)層級關(guān)系

三、項目實戰(zhàn)

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

1. 團隊內(nèi)部宣講與價值說明

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

2. 適配體系建設(shè)

在內(nèi)部獲得認(rèn)可后接下來就是設(shè)計師進(jìn)行具體方案設(shè)計了。由于任意門業(yè)務(wù)復(fù)雜，為了便于團隊協(xié)作、保證體驗一致性以及后期維護(hù)，我們結(jié)合前文提到的理論知識，建立了關(guān)于任意門的響應(yīng)式適配體系：

制定全局刪格系統(tǒng)

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

統(tǒng)一基礎(chǔ)元素適配規(guī)則

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

建立模版組件庫

對于經(jīng)常用到的組件，我們針對展開態(tài)建立了標(biāo)準(zhǔn)的組件庫，以便于開發(fā)和后續(xù)設(shè)計同學(xué)延展。以金融行業(yè)經(jīng)常用的產(chǎn)品卡片為例，我們發(fā)現(xiàn)在不同鏈路中都會有此類卡片的展示，通過對使用場景的梳理和分析，制定了統(tǒng)一的組件，團隊內(nèi)部直接挪用即可。

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

拆分排期和保障機制

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

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

五、寫在最后

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

參考文獻(xiàn)

《華為折疊屏應(yīng)用開發(fā)指導(dǎo)》https://developer.huawei.com/consumer/cn/doc/90101

作者：土撥鼠