寫在前面

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

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

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

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

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

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

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

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

1. 基礎(chǔ)元素

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

2. 頁面布局

常用的適配方式有拉伸布局、相對(duì)縮放、擴(kuò)展布局、挪移布局等：

拉伸布局

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

相對(duì)縮放

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

擴(kuò)展布局

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

挪移布局

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

3. 信息架構(gòu)

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

三、項(xiàng)目實(shí)戰(zhàn)

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

1. 團(tuán)隊(duì)內(nèi)部宣講與價(jià)值說明

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

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

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

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

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

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

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

建立模版組件庫

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

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

拆分排期和保障機(jī)制

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

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

五、寫在最后

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

參考文獻(xiàn)

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

作者：土撥鼠