作者：Hongjun 華為平臺(tái)UX設(shè)計(jì)專家

自2019年發(fā)布了第一款折疊屏手機(jī)以來，華為不斷創(chuàng)新，接連推出多款折疊屏新品。折疊屏手機(jī)越來越受到廣大用戶的青睞，其市場占有率也隨之高速增長。而對應(yīng)用開發(fā)者來說，在折疊屏上“如何提供更優(yōu)秀的應(yīng)用體驗(yàn)”也已經(jīng)成為必須直面的問題。

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

本篇內(nèi)容主要針對大折疊屏手機(jī)，從基礎(chǔ)的體驗(yàn)連續(xù)和三個(gè)維度的體驗(yàn)增值為大家展開介紹如何打造優(yōu)秀的折疊屏應(yīng)用體驗(yàn)。首先說明折疊屏設(shè)計(jì)中的體驗(yàn)關(guān)鍵——體驗(yàn)連續(xù)。

體驗(yàn)連續(xù)：從折疊態(tài)到展開態(tài)的體驗(yàn)關(guān)鍵

顧名思義，折疊屏手機(jī)是可以折疊的，有折疊和展開這兩種狀態(tài)。

折疊屏兩個(gè)狀態(tài)（左圖為折疊態(tài)、右圖為展開態(tài)）

在應(yīng)用的實(shí)際使用場景下，用戶會(huì)進(jìn)行一定頻率“折疊到展開”、“展開到折疊”操作。應(yīng)用在此期間就需要為用戶提供“連續(xù)的體驗(yàn)”，以保證用戶使用該應(yīng)用體驗(yàn)不中斷。

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

1、拍攝時(shí)：展開后拍攝參數(shù)不改變

拍照取景的時(shí)候，用戶展開折疊屏希望看得更清晰。此時(shí)展開態(tài)取景范圍、照片比例等參數(shù)設(shè)置保持不變，讓用戶只需聚焦于取景框里面的人物或景物。

拍攝時(shí)體驗(yàn)連續(xù)（左圖為折疊、右圖為展開）

2、閱讀時(shí)：展開后焦點(diǎn)不偏移

閱讀文章的時(shí)候，用戶展開折疊屏希望獲得更佳的閱讀體驗(yàn)。此時(shí)展開態(tài)將內(nèi)容重排之后要定位到用戶正在看的位置，保證焦點(diǎn)不發(fā)生偏移，提升用戶的繼續(xù)閱讀體驗(yàn)。

閱讀時(shí)體驗(yàn)連續(xù)（左圖為折疊、右圖為展開）

同樣的，從展開到折疊時(shí)應(yīng)用也需要提供“連續(xù)的體驗(yàn)”，做到狀態(tài)不丟失、焦點(diǎn)不偏移。

體驗(yàn)增值：展開態(tài)下應(yīng)用的進(jìn)階體驗(yàn)

在折疊屏展開時(shí)，通過精心的設(shè)計(jì)可以為用戶提供三種令人愉悅的增值體驗(yàn)：顯示更多內(nèi)容、顯示更加沉浸、操作更加高效。

體驗(yàn)增值

下面為大家結(jié)合示例逐一說明。

1、顯示更多內(nèi)容：采用動(dòng)態(tài)布局

顯示更多內(nèi)容的關(guān)鍵是采用動(dòng)態(tài)布局，HarmonyOS 折疊屏設(shè)計(jì)規(guī)范中提供了六種動(dòng)態(tài)布局規(guī)則，通過這些布局規(guī)則的使用或組合，就可以做到在展開態(tài)下顯示更多的內(nèi)容。

動(dòng)態(tài)布局規(guī)則

（左圖為自適應(yīng)動(dòng)態(tài)布局、右圖為響應(yīng)式動(dòng)態(tài)布局）

通常一個(gè)頁面上有多種類型的內(nèi)容，我們需要根據(jù)每種內(nèi)容的特點(diǎn)來采用合適的動(dòng)態(tài)布局規(guī)則。

首先以一個(gè)內(nèi)容類應(yīng)用的首頁為例，說明如何讓這個(gè)頁面顯示更多的內(nèi)容。示例中的這個(gè)頁面包含了組合控件、Banner卡片、入口圖標(biāo)、宮格卡片這四個(gè)版塊，我們分別看看每一個(gè)版塊應(yīng)該采用哪種布局規(guī)則。

應(yīng)用首頁

組合控件：這個(gè)控件由頂部頁簽和下方的搜索框組合而成，可通過挪移布局、相對拉伸、延伸布局進(jìn)行寬屏適配，占用更少的界面空間或顯示更多的頁簽數(shù)量。不建議直接放大導(dǎo)致顯示過大。

組合控件設(shè)計(jì)參考

（左圖為可參考范式、右圖為不建議）

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

Banner卡片設(shè)計(jì)參考

（左圖為可參考范式、右圖為不建議）

入口圖標(biāo)：可通過延伸布局、相對拉伸、挪移布局做到均衡地顯示合適的圖標(biāo)數(shù)量，需要避免在展開態(tài)左右留白過大、一排顯示的入口圖標(biāo)太多、以及直接放大等效果很差的做法。

入口圖標(biāo)設(shè)計(jì)參考

（左圖為可參考范式、右圖為不建議）

宮格卡片：可通過顯示更多列數(shù)來達(dá)到在寬屏下保持圖片大小和數(shù)量的平衡，橫向的卡片可以相對縮放，但需要避免豎向卡片的相對縮放導(dǎo)致單張卡片過高，也需要避免增加的列數(shù)太多導(dǎo)致卡片信息過密。

宮格卡片設(shè)計(jì)參考???????

宮格卡片不建議設(shè)計(jì)（顯示過大、信息過密）??

再舉一個(gè)新聞?lì)悜?yīng)用開發(fā)示例，我們可以基于文本列表、左右圖文、上下圖文這三種情況調(diào)整。

新聞?lì)悜?yīng)用首頁

文本列表：在展開態(tài)下右邊加上一列，這樣可以有效利用屏幕空間，也能多展示一些內(nèi)容。

文本列表設(shè)計(jì)參考（文本列表：單列變雙列）

左右圖文：通過相對拉伸來適配寬屏顯示，也可以在相對拉伸的同時(shí)利用寬屏優(yōu)勢顯示更多內(nèi)容。

左右圖文列表設(shè)計(jì)參考（文本/左右圖文列表：相對拉伸）

上下圖文：在保持圖片高度不變的情況下延伸布局進(jìn)而顯示更多圖片，或是將圖片和文本通過挪移布局調(diào)整為左右布局顯示。

上下圖文列表設(shè)計(jì)參考

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

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

在折疊屏展開態(tài)，屏幕變大的同時(shí)，屏幕上可利用的區(qū)域也變得更多。下面通過視聽體驗(yàn)中的視頻頁面、瀏覽頁面、通話頁面、游戲頁面示例，為大家說明如何打造更為“沉浸式”的展開體驗(yàn)。

視頻頁面：視頻相關(guān)的按鈕、彈幕等輔助信息在視頻核心內(nèi)容之外的空白區(qū)域顯示，提供更沉浸、無遮擋的大尺寸視頻播放體驗(yàn)。

視頻頁面（更沉浸不遮擋的大尺寸視頻）

瀏覽頁面：在信息流瀏覽頁面，顯示范圍更大，提供更沉浸的大圖片或大視頻的瀏覽體驗(yàn)，同時(shí)也確保了不低于折疊態(tài)或普通手機(jī)的瀏覽效率。

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

通話頁面：通過雙窗口創(chuàng)新，把對方和自己的視頻并列顯示，實(shí)現(xiàn)更沉浸的視頻通話體驗(yàn)。

游戲頁面：展開態(tài)相比折疊態(tài)，有了更大的視野范圍，我們可以顯示更多的游戲畫面內(nèi)容，以實(shí)現(xiàn)更沉浸的體驗(yàn)。但要避免為了追求沉浸感導(dǎo)致游戲畫面被裁剪。

3、操作更加高效：減少全屏跳轉(zhuǎn)

在展開態(tài)下，還可以通過分欄、懸浮面板、側(cè)邊欄、臨時(shí)雙窗口等方法為用戶帶來更加高效的操作體驗(yàn)。

分欄：實(shí)現(xiàn)更高效的頁面切換，避免全屏頁面跳轉(zhuǎn)。

懸浮面板、側(cè)邊欄：通過懸浮面板快速篩選、側(cè)邊欄快速預(yù)覽，減少全屏頁面的跳轉(zhuǎn)和頁面的來回切換。

臨時(shí)雙窗口：通過臨時(shí)雙窗口，可以實(shí)現(xiàn)雙任務(wù)的并行。

例如在直播場景下，可以通過雙窗口實(shí)現(xiàn)“一邊看直播、一邊購物”，完成從篩選商品到下單支付的購物全流程。

總結(jié)

本篇內(nèi)容結(jié)合示例為大家介紹了體驗(yàn)連續(xù)、顯示更多內(nèi)容、顯示更加沉浸、操作更加高效等折疊屏應(yīng)用體驗(yàn)的關(guān)鍵設(shè)計(jì)方法，希望能夠?yàn)殚_發(fā)者提供有效的設(shè)計(jì)參考，幫助開發(fā)者打造更為優(yōu)秀的應(yīng)用體驗(yàn)。

本篇內(nèi)容的所有方法和案例在HarmonyOS折疊屏設(shè)計(jì)規(guī)范中都有詳細(xì)的介紹，同時(shí)因?yàn)槠邢?，部分折疊屏設(shè)計(jì)規(guī)范中的內(nèi)容并未在本篇文章中提及，包括電商類和H5廣告長圖的寬屏適配案例，以及針對影音娛樂、社交通訊、新聞閱讀、生活服務(wù)等場景的設(shè)計(jì)范式等。歡迎大家點(diǎn)擊文末閱讀原文一鍵跳轉(zhuǎn)查看~

END

想了解更多HarmonyOS技術(shù)？

后臺(tái)留言給我們

立刻安排！