▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，助力全球 1 億設(shè)計師成長

轉(zhuǎn)自：OnepinganDesign

編輯：張夢如

共 2817 字 18 圖  預(yù)計閱讀 8 分鐘

Background

寫在前面

近年來，三星、華為等手機廠商陸續(xù)發(fā)布 Galaxy Fold 、 Mate X 等折疊屏手機。其普及速度似乎超過了人們的想象。2021 年 12 月 2 日，根據(jù)屏幕機構(gòu) DSCC 公布的一份最新研究報告指出： 今年第三季度，折疊屏手機的總出貨量環(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ù)進行探索。

Part 1

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

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

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

Part 2

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

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

2.1 基礎(chǔ)元素

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

2.2 頁面布局

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

2.2.1 拉伸布局

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

2.2.2 相對縮放

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

2.2.3 擴展布局

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

2.2.4 挪移布局

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

2.3 信息架構(gòu)

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

Part 3

項目實戰(zhàn)

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

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

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

3.2 適配體系建設(shè)

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

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

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

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

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

3.2.3 建立模版組件庫

對于經(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ù)用即可

3.2.3 拆分排期和保障機制

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

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

The End

寫在最后

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

—  The end  —

以下三分設(shè)文章，你可能也感興趣

▽ 

?? 原創(chuàng)文章精選??

告別加班！使用設(shè)計系統(tǒng)方法更快地構(gòu)建產(chǎn)品

如何評估設(shè)計質(zhì)量，提升設(shè)計技能

你常常忽略的 7 個具有破壞性的體驗鴻溝

一篇文章告訴你服務(wù)設(shè)計到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗

一起看看《對馬島之魂》如何打造初次對抗體驗

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計 —— Lightship

?? 我們一起聊設(shè)計 ???♂?

高質(zhì)量，學(xué)設(shè)計行交流微信群

期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲） 

點亮『在看』，百萬年薪↓↓