HarmonyOS折疊屏設(shè)計(jì)規(guī)范

隨著新一代折疊屏手機(jī)HUAWEI Mate Xs 2發(fā)布，HarmonyOS折疊屏設(shè)計(jì)規(guī)范（后文簡(jiǎn)稱：設(shè)計(jì)規(guī)范）也馬不停蹄地更新啦！這次更新的設(shè)計(jì)規(guī)范不僅新增了更多應(yīng)用場(chǎng)景案例，幫助大家高效設(shè)計(jì)不同類型的業(yè)務(wù)應(yīng)用，還通過清晰直觀的案例對(duì)比圖，幫助大家有效避坑。

HarmonyOS折疊屏設(shè)計(jì)規(guī)范：

https://developer.harmonyos.com/cn/docs/design/des-guides/basic-requirements-0000001193421226

一、基礎(chǔ)要求

我們發(fā)現(xiàn)部分應(yīng)用在手機(jī)上顯示效果很好，但是到折疊屏上，圖片、字體、卡片等元素過大，導(dǎo)致一屏看不了多少信息，完全沒有利用到大屏幕的優(yōu)勢(shì)，反而比在普通手機(jī)上瀏覽效率更低。

因此，本次設(shè)計(jì)規(guī)范就在“基礎(chǔ)要求”章節(jié)針對(duì)內(nèi)容、圖片、字體、彈出框、屏幕旋轉(zhuǎn)等提供了適配設(shè)計(jì)指南。下面將挑選三個(gè)比較典型的案例對(duì)比圖為大家介紹。1. 信息展示完整

圖1是信息展示案例對(duì)比圖，設(shè)計(jì)規(guī)范建議展開態(tài)不應(yīng)出現(xiàn)頁面內(nèi)的內(nèi)容元素?cái)?shù)量減少，或圖形化元素模糊、分辨率下降或視覺體量減小等損失，應(yīng)確保展開態(tài)的內(nèi)容元素不少于折疊態(tài)內(nèi)容元素信息量的3/4。

圖1 信息展示2. 字體/圖標(biāo)適配

圖2是字體適配案例對(duì)比圖，設(shè)計(jì)規(guī)范建議展開態(tài)圖標(biāo)和字體大小不應(yīng)發(fā)生明顯變化，在保證可讀性的基礎(chǔ)上，建議保持跟折疊態(tài)一樣的大小。若一定要發(fā)生大小變化，則最大不要超過1.2倍。為確保有較好的可讀性，展開態(tài)單屏每行文本長(zhǎng)度不超過40字，推薦36字左右。

圖2 字體/圖標(biāo)適配3. 彈出框適配

圖3和圖4是彈出框適配案例對(duì)比圖，設(shè)計(jì)規(guī)范建議展開態(tài)和折疊態(tài)彈出框保持相同的大小，或大小變化不超過1.2倍。

圖3 彈出框適配

圖4 彈出框不適配

了解完折疊屏設(shè)計(jì)的基礎(chǔ)要求，各位開發(fā)者、設(shè)計(jì)師或者產(chǎn)品經(jīng)理也許想說，上面這些都是小case啦，有沒有不同場(chǎng)景的應(yīng)用案例供我們參考呀？沒問題，這就安排！

二、典型應(yīng)用案例

你們期待已久的不同場(chǎng)景的應(yīng)用案例來啦！本次設(shè)計(jì)規(guī)范在“典型應(yīng)用案例”章節(jié)提供了影音娛樂、新聞資訊、生活服務(wù)、社交通訊、H5、金融和游戲類等7大場(chǎng)景的應(yīng)用案例，大家可以參考這些案例，并結(jié)合自己應(yīng)用的業(yè)務(wù)類型及業(yè)務(wù)場(chǎng)景，進(jìn)行折疊屏上的最佳界面適配和創(chuàng)新設(shè)計(jì)。

由于篇幅有限，此處不再針對(duì)上述各個(gè)場(chǎng)景展開介紹，下面我們以較為普遍的影音娛樂為例為大家介紹在界面設(shè)計(jì)時(shí)，需要注意些什么。1. 首頁廣告

在視頻應(yīng)用中，首頁頂部往往會(huì)有廣告。圖5和圖6是首頁廣告案例對(duì)比圖，設(shè)計(jì)規(guī)范建議從折疊態(tài)到展開態(tài)應(yīng)用在廣告圖/視頻的左右增加上一張、下一張。不建議從折疊態(tài)到展開態(tài)直接等比放大廣告內(nèi)容，導(dǎo)致一屏幕顯示信息太少，降低瀏覽效率。

圖5 首頁廣告推薦形式

圖6 首頁廣告不推薦形式2. 視頻列表

視頻類內(nèi)容往往有不同的長(zhǎng)寬比例，因此視頻列表常采用宮格結(jié)構(gòu)或瀑布流布局。設(shè)計(jì)規(guī)范建議在展開態(tài)增加顯示列數(shù)為原來的兩倍。例如圖7是視頻應(yīng)用的視頻列表，在折疊態(tài)雙列顯示，展開態(tài)擴(kuò)展為四列。

圖7 豎向視頻列表 圖8和圖9是帶橫向視頻的應(yīng)用案例對(duì)比圖，在折疊態(tài)單列顯示，推薦展開態(tài)擴(kuò)展為雙列。不推薦展開態(tài)直接放大顯示原來的視頻列表，導(dǎo)致單張圖片/視頻高度超過1/2屏幕高度。

圖8 橫向視頻列表推薦形式

圖9 橫向視頻列表不推薦形式 特殊情況如展開態(tài)顯示三列（圖10所示），則單個(gè)圖片/視頻高度不超過1/2屏幕高度。

圖10 三列視頻列表

如果說典型應(yīng)用案例可以幫助大家找到正確的努力方向，那么設(shè)計(jì)自檢表則可以幫助大家提高審核通過率~

三、設(shè)計(jì)自檢表

為了讓大家的應(yīng)用在折疊屏上有更好的使用體驗(yàn)，以及幫助大家能夠順利通過審核，我們提供了設(shè)計(jì)自檢表供大家對(duì)照?qǐng)?zhí)行。本次更新的自檢表對(duì)圖片&視頻、字體、彈出框等提供了量化的自檢條目，便于大家用于應(yīng)用的快速對(duì)比驗(yàn)證。

最后，除了以上內(nèi)容，設(shè)計(jì)規(guī)范還在原有章節(jié)內(nèi)容中新增了更多案例對(duì)比圖，歡迎大家點(diǎn)擊“閱讀原文”，了解更多HarmonyOS折疊屏設(shè)計(jì)規(guī)范的詳細(xì)內(nèi)容。

END

審核編輯 ：李倩