不止於大，如何打造優秀的摺疊屏應用體驗

自2019年釋出了第一款摺疊屏手機以來，華為不斷創新，接連推出多款摺疊屏新品。摺疊屏手機越來越受到廣大使用者的青睞，其市場佔有率也隨之高速增長。而對應用開發者來說，在摺疊屏上“如何提供更優秀的應用體驗”也已經成為必須直面的問題。

目前市場上的摺疊屏手機主要分為兩大類：一類是大摺疊屏手機，展開之後近似正方形，螢幕很大；另一類是小摺疊屏手機，展開時跟普通手機一樣大，摺疊的時候非常小巧。

本篇內容主要針對大摺疊屏手機，從基礎的體驗連續和三個維度的體驗增值為大家展開介紹如何打造優秀的摺疊屏應用體驗。首先說明摺疊屏設計中的體驗關鍵——體驗連續。

體驗連續：從摺疊態到展開態的體驗關鍵

顧名思義，摺疊屏手機是可以摺疊的，有摺疊和展開這兩種狀態。

摺疊屏兩個狀態（左圖為摺疊態、右圖為展開態）

在應用的實際使用場景下，使用者會進行一定頻率“摺疊到展開”、“展開到摺疊”操作。應用在此期間就需要為使用者提供“連續的體驗”，以保證使用者使用該應用體驗不中斷。

下面舉兩個具體的場景為大家介紹。

1、拍攝時：展開後拍攝引數不改變

拍照取景的時候，使用者展開摺疊屏希望看得更清晰。此時展開態取景範圍、照片比例等引數設定保持不變，讓使用者只需聚焦於取景框裡面的人物或景物。

拍攝時體驗連續（左圖為摺疊、右圖為展開）

2、閱讀時：展開後焦點不偏移

閱讀文章的時候，使用者展開摺疊屏希望獲得更佳的閱讀體驗。此時展開態將內容重排之後要定位到使用者正在看的位置，保證焦點不發生偏移，提升使用者的繼續閱讀體驗。

閱讀時體驗連續（左圖為摺疊、右圖為展開）

同樣的，從展開到摺疊時應用也需要提供“連續的體驗”，做到狀態不丟失、焦點不偏移。

體驗增值：展開態下應用的進階體驗

在摺疊屏展開時，透過精心的設計可以為使用者提供三種令人愉悅的增值體驗：顯示更多內容、顯示更加沉浸、操作更加高效。

體驗增值

下面為大家結合示例逐一說明。

1、顯示更多內容：採用動態佈局

顯示更多內容的關鍵是採用動態佈局，HarmonyOS 摺疊屏設計規範中提供了六種動態佈局規則，透過這些佈局規則的使用或組合，就可以做到在展開態下顯示更多的內容。

動態佈局規則

（左圖為自適應動態佈局、右圖為響應式動態佈局）

通常一個頁面上有多種型別的內容，我們需要根據每種內容的特點來採用合適的動態佈局規則。

首先以一個內容類應用的首頁為例，說明如何讓這個頁面顯示更多的內容。示例中的這個頁面包含了組合控制元件、Banner卡片、入口圖示、宮格卡片這四個版塊，我們分別看看每一個版塊應該採用哪種佈局規則。

應用首頁

組合控制元件：這個控制元件由頂部頁籤和下方的搜尋框組合而成，可透過挪移佈局、相對拉伸、延伸佈局進行寬屏適配，佔用更少的介面空間或顯示更多的頁籤數量。不建議直接放大導致顯示過大。

組合控制元件設計參考

（左圖為可參考正規化、右圖為不建議）

Banner卡片：可透過延伸佈局、創新樣式在一行顯示更多的Banner卡片，要避免單張Banner卡片直接放大顯示過高的問題。

Banner卡片設計參考

（左圖為可參考正規化、右圖為不建議）

入口圖示：可透過延伸佈局、相對拉伸、挪移佈局做到均衡地顯示合適的圖示數量，需要避免在展開態左右留白過大、一排顯示的入口圖示太多、以及直接放大等效果很差的做法。

入口圖示設計參考

（左圖為可參考正規化、右圖為不建議）

宮格卡片：可透過顯示更多列數來達到在寬屏下保持圖片大小和數量的平衡，橫向的卡片可以相對縮放，但需要避免豎向卡片的相對縮放導致單張卡片過高，也需要避免增加的列數太多導致卡片資訊過密。

宮格卡片設計參考

宮格卡片不建議設計（顯示過大、資訊過密）

再舉一個新聞類應用開發示例，我們可以基於文字列表、左右圖文、上下圖文這三種情況調整。

新聞類應用首頁

文字列表：在展開態下右邊加上一列，這樣可以有效利用螢幕空間，也能多展示一些內容。

文字列表設計參考（文字列表：單列變雙列）

左右圖文：透過相對拉伸來適配寬屏顯示，也可以在相對拉伸的同時利用寬屏優勢顯示更多內容。

左右圖文列表設計參考（文字/左右圖文列表：相對拉伸）

上下圖文：在保持圖片高度不變的情況下延伸佈局進而顯示更多圖片，或是將圖片和文字透過挪移佈局調整為左右佈局顯示。

上下圖文列表設計參考

（左圖為圖片延伸佈局、右圖為挪移佈局）

2、顯示更加沉浸：更大尺寸適配

在摺疊屏展開態，螢幕變大的同時，螢幕上可利用的區域也變得更多。下面透過視聽體驗中的影片頁面、瀏覽頁面、通話頁面、遊戲頁面示例，為大家說明如何打造更為“沉浸式”的展開體驗。

影片頁面：影片相關的按鈕、彈幕等輔助資訊在影片核心內容之外的空白區域顯示，提供更沉浸、無遮擋的大尺寸影片播放體驗。

影片頁面（更沉浸不遮擋的大尺寸影片）

瀏覽頁面：在資訊流瀏覽頁面，顯示範圍更大，提供更沉浸的大圖片或大影片的瀏覽體驗，同時也確保了不低於摺疊態或普通手機的瀏覽效率。

瀏覽頁面（更沉浸的圖片/影片瀏覽）

通話頁面：透過雙視窗創新，把對方和自己的影片並列顯示，實現更沉浸的視訊通話體驗。

通話頁面（更沉浸的雙視窗視訊通話）

遊戲頁面：展開態相比摺疊態，有了更大的視野範圍，我們可以顯示更多的遊戲畫面內容，以實現更沉浸的體驗。但要避免為了追求沉浸感導致遊戲畫面被裁剪。

3、操作更加高效：減少全屏跳轉

在展開態下，還可以透過分欄、懸浮皮膚、側邊欄、臨時雙視窗等方法為使用者帶來更加高效的操作體驗。

分欄：實現更高效的頁面切換，避免全屏頁面跳轉。

懸浮皮膚、側邊欄：透過懸浮皮膚快速篩選、側邊欄快速預覽，減少全屏頁面的跳轉和頁面的來回切換。

臨時雙視窗：透過臨時雙視窗，可以實現雙任務的並行。

例如在直播場景下，可以透過雙視窗實現“一邊看直播、一邊購物”，完成從篩選商品到下單支付的購物全流程。

總結

本篇內容結合示例為大家介紹了體驗連續、顯示更多內容、顯示更加沉浸、操作更加高效等摺疊屏應用體驗的關鍵設計方法，希望能夠為開發者提供有效的設計參考，幫助開發者打造更為優秀的應用體驗。

本篇內容的所有方法和案例在HarmonyOS摺疊屏設計規範中都有詳細的介紹，同時因為篇幅有限，部分摺疊屏設計規範中的內容並未在本篇文章中提及，包括電商類和H5廣告長圖的寬屏適配案例，以及針對影音娛樂、社交通訊、新聞閱讀、生活服務等場景的設計正規化等。