現(xiàn)在安卓平臺不少廠家都有自己的折疊屏手機(jī)，各家的折疊方式也不盡相同，這種情況下，如何做好APP適配工作？這篇文章，作者通過案例和分析，告訴我們具體如何設(shè)計。

近年來各類折疊屏產(chǎn)品層出不窮，隨著技術(shù)的不斷發(fā)展和消費(fèi)者接受度的提高，折疊屏市場份額自 2018 年逐年攀升，折疊屏手機(jī)已經(jīng)成為手機(jī)領(lǐng)域的一個重要分支。市場調(diào)查機(jī)構(gòu) Counterpoint Research 最新報告顯示，2024 年一季度，盡管全球智能手機(jī)市場依然低迷，但折疊屏手機(jī)細(xì)分領(lǐng)域呈現(xiàn)快速增長態(tài)勢，其銷量同比增長 49%，增幅創(chuàng) 6 個季度以來新高。用戶基數(shù)占比越來越高，用戶需求也不斷變化著。

1. 更多場景化需求

展開時更大的屏幕也使得視覺沖擊力與感染力有了更好提升，給用戶帶來更高效的信息展示和更加沉浸的瀏覽體驗(yàn)。

2. 特殊場景下的任務(wù)效率提升

折疊展開后的第二屏可以讓用戶不離開當(dāng)前場景就可以便捷處理子任務(wù)，提升多任務(wù)的處理效率。

一、折疊屏適配市場現(xiàn)狀

目前市面上部分產(chǎn)品的適配并不完美，多少會有些問題，但是不影響用戶正常使用，也能較好展示頁面信息內(nèi)容。此外，安卓適配布局樣式也與鴻蒙適配布局一致。下面我們看幾個例子：

某品牌手機(jī)折疊屏適配情況

三大頭部新勢力車企 APP 適配情況較好，符合折疊屏適配設(shè)計規(guī)范中的原則，部分 APP 存在組件適配、折疊-開啟轉(zhuǎn)換不流暢等問題。

IPad App 適配情況

IPad 比例與折疊屏異曲同工，視覺布局具有一定的參考價值。

二、折疊屏設(shè)計探討

1. 遵循的原則

體驗(yàn)連續(xù)

屏幕可隨時折疊展開，在體驗(yàn)上要保證用戶體驗(yàn)的連續(xù)性，應(yīng)用需要遵從屏幕顯示的兼容和應(yīng)用狀態(tài)的連續(xù)。

• 屏幕兼容：由于屏幕尺寸發(fā)生變化，應(yīng)用應(yīng)采用適當(dāng)?shù)氖侄螌ζ聊簧蟽?nèi)容布局進(jìn)行優(yōu)化調(diào)整。
• 應(yīng)用連續(xù)：應(yīng)用在折疊與展開狀態(tài)切換的過程中保持正常運(yùn)行。

體驗(yàn)增值

屏幕變大后，用戶體驗(yàn)在某些方面有增值。

• 更多內(nèi)容：大尺寸屏幕可顯示更多內(nèi)容，提高顯示和操作的效率。
• 更加沉浸：大尺寸屏幕可顯示更清晰的細(xì)節(jié)，適合圖片瀏覽、視頻欣賞、游戲等應(yīng)用和場景。
• 多任務(wù)并行：多個窗口可同時在大尺寸屏幕內(nèi)展示，為用戶多任務(wù)并行提供了直觀高效的方式。

操作便捷

尊重用戶心智模型，在不同的場景下合理安排重要內(nèi)容和操作選項。

改進(jìn)用戶界面設(shè)計，提升體驗(yàn)。

2. 用戶手指熱區(qū)變化

在屏幕展開的適配中，應(yīng)該盡量考慮雙手操作時的便捷性，避免把需要頻繁操作的功能放置在雙手難以觸達(dá)的區(qū)域，從而造成不好的用戶體驗(yàn)。

3. 設(shè)計要點(diǎn)

基礎(chǔ)體驗(yàn)

• 信息展示完整，避免出現(xiàn)元素變形，以及展開態(tài)內(nèi)容不能少于折疊態(tài)內(nèi)容的 3/4；
• 旋轉(zhuǎn)適配，展開態(tài)橫豎屏布局一致；
• 交互不中斷，折疊展開應(yīng)用流暢適配，展開態(tài)避免用戶操作步驟增加。

關(guān)鍵元素

• 在保證可讀性的基礎(chǔ)上，建議元素跟折疊屏保持一樣的大??；
• 圖片和視頻羅列展示的，展開后建議列數(shù)增加為原來的 2 倍；
• 內(nèi)容不可過大，主要整體內(nèi)容符合用戶的閱讀習(xí)慣，以提高用戶閱讀效率為主。

其他控件

• 彈窗注意避免出現(xiàn)在折疊鉸鏈處；
• 其他控件按照柵格體系進(jìn)行適配展示。

三、設(shè)計適配思路

視覺設(shè)計從以下三個方面入手解決，由原子理論出發(fā)，由小及大實(shí)現(xiàn)適配；具體頁面適配樣式需要進(jìn)一步視覺探討后確認(rèn)。

四、項目案例解析

以某車企 APP 適配折疊屏設(shè)計為例。

1. 制定全局柵格體系

保證頁面的舒適和諧，規(guī)范延續(xù)，實(shí)現(xiàn)頁面信息最大化呈現(xiàn)。

• 基于該車企 APP 頁面適配折疊屏，基礎(chǔ)的 12 柵格已經(jīng)滿足當(dāng)前的信息收納，我們使用創(chuàng)建布局。
• 基于此柵格布局，初步得出：橫向內(nèi)容劃分（藍(lán)色區(qū)塊）最多 4 個，最少 1 個的結(jié)論，具體可見下圖，設(shè)計基于此單位進(jìn)行定制排版。

2. 梳理確定關(guān)鍵因素

關(guān)鍵元素等大，更符合設(shè)計原則，頁面信息的展示效率高，同時也能節(jié)省開發(fā)應(yīng)用時間。

適配測試：

3. 動態(tài)布局：通過對使用場景的梳理分析，制定專屬組件和布局適配

保證應(yīng)用不同尺寸下適配的合理性、風(fēng)格一致性、界面清晰性、閱讀舒適性；有利于更高效的信息展示或更沉浸的內(nèi)容瀏覽。

3.1 自適應(yīng)布局

信息量增加，但是信息架構(gòu)不變。

相對拉伸

頁面內(nèi)元素的顯示寬度不是固定值，而是通過相對參照物的方式來確定其開始和結(jié)束的位置。當(dāng)布局的顯示大小發(fā)生變化時，元素的顯示寬度隨之發(fā)生改變。

相對縮放

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

延伸布局

布局特點(diǎn)：組件內(nèi)元素橫向布局，元素間的距離固定，可顯示元素的數(shù)量可隨著顯示寬度的改變而變化。

適配規(guī)則：保持頁面元素尺寸或間距不變，隨著屏幕寬度的增加，在橫向顯示更多元素。

3.2 響應(yīng)式布局

布局特點(diǎn)：布局內(nèi)的元素根據(jù)布局的寬度來選擇是上下排布還是左右排布。適用頁面內(nèi)信息架構(gòu)層級少的，例如門戶網(wǎng)站首頁面、內(nèi)容詳情頁面等。

適配規(guī)則：首先判斷布局區(qū)域是否有明顯的“寬高特征”，即橫縱比是否大于 4:3；其次判斷橫向?qū)挾?，是否能容得下若干個元素，如果容得下就左右排布，容不下就上下排布。

挪移布局

重復(fù)布局

布局特點(diǎn)：利用屏幕的寬度優(yōu)勢，將相同屬性的布局組件橫向并列同時排布。

適配規(guī)則：可以定義單個元素的寬度規(guī)則，隨著屏幕寬度的變化，?動計算可以重復(fù)的元素個數(shù)，滿足寬度條件時橫向重復(fù)排列。

重復(fù)布局

瀑布布局

適用場景：適合用卡片呈現(xiàn)內(nèi)容的場景，通過卡片的橫縱擴(kuò)展在?屏上展示更多內(nèi)容。

適配規(guī)則：可以定義單個組件的寬度規(guī)則，隨著頁面寬度的變化，?動計算可以重復(fù)的卡片個數(shù)，滿足條件時橫向排列更多卡片。

瀑布布局

4. 其他控件

彈窗、懸浮窗、toast。

調(diào)用系統(tǒng)控件：

原因：避免在寬屏設(shè)備彈窗過寬或過高的問題；避免彈窗卡在鉸鏈處，出現(xiàn)識別問題。

解決：建議調(diào)用系統(tǒng)的彈出框控件；寬屏下用戶手指的使用，建議放在左側(cè)，或者右側(cè)屏中。

5. 后續(xù)關(guān)注點(diǎn)

后續(xù)設(shè)計圖執(zhí)行過程中需要針對頁面布局進(jìn)行細(xì)節(jié)探討。

原文作者：張帆、李智君，ISAR資深用戶體驗(yàn)視覺設(shè)計師。