隨著新一代摺疊屏手機HUAWEI Mate Xs 2釋出，HarmonyOS摺疊屏設計規範（後文簡稱：設計規範）也馬不停蹄地更新啦！這次更新的設計規範不僅新增了更多應用場景案例，幫助大家高效設計不同型別的業務應用，還通過清晰直觀的案例對比圖，幫助大家有效避坑。

HarmonyOS摺疊屏設計規範：

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

一、基礎要求

我們發現部分應用在手機上顯示效果很好，但是到摺疊屏上，圖片、字型、卡片等元素過大，導致一屏看不了多少資訊，完全沒有利用到大螢幕的優勢，反而比在普通手機上瀏覽效率更低。

因此，本次設計規範就在“基礎要求”章節針對內容、圖片、字型、彈出框、螢幕旋轉等提供了適配設計指南。下面將挑選三個比較典型的案例對比圖為大家介紹。

1. 資訊展示完整

圖1是資訊展示案例對比圖，設計規範建議展開態不應出現頁面內的內容元素數量減少，或圖形化元素模糊、解析度下降或視覺體量減小等損失，應確保展開態的內容元素不少於摺疊態內容元素資訊量的3/4。

圖1 資訊展示

2. 字型/圖示適配

圖2是字型適配案例對比圖，設計規範建議展開態圖示和字型大小不應發生明顯變化，在保證可讀性的基礎上，建議保持跟摺疊態一樣的大小。若一定要發生大小變化，則最大不要超過1.2倍。為確保有較好的可讀性，展開態單屏每行文字長度不超過40字，推薦36字左右。

圖2 字型/圖示適配

3. 彈出框適配

圖3和圖4是彈出框適配案例對比圖，設計規範建議展開態和摺疊態彈出框保持相同的大小，或大小變化不超過1.2倍。

圖3 彈出框適配

圖4 彈出框不適配

瞭解完摺疊屏設計的基礎要求，各位開發者、設計師或者產品經理也許想說，上面這些都是小case啦，有沒有不同場景的應用案例供我們參考呀？沒問題，這就安排！

二、典型應用案例

你們期待已久的不同場景的應用案例來啦！本次設計規範在“典型應用案例”章節提供了影音娛樂、新聞資訊、生活服務、社交通訊、H5、金融和遊戲類等7大場景的應用案例，大家可以參考這些案例，並結合自己應用的業務型別及業務場景，進行摺疊屏上的最佳介面適配和創新設計。 

由於篇幅有限，此處不再針對上述各個場景展開介紹，下面我們以較為普遍的影音娛樂為例為大家介紹在介面設計時，需要注意些什麼。

1. 首頁廣告

在視訊應用中，首頁頂部往往會有廣告。圖5和圖6是首頁廣告案例對比圖，設計規範建議從摺疊態到展開態應用在廣告圖/視訊的左右增加上一張、下一張。不建議從摺疊態到展開態直接等比放大廣告內容，導致一螢幕顯示資訊太少，降低瀏覽效率。

圖5 首頁廣告推薦形式

圖6 首頁廣告不推薦形式

2. 視訊列表

視訊類內容往往有不同的長寬比例，因此視訊列表常採用宮格結構或瀑布流佈局。設計規範建議在展開態增加顯示列數為原來的兩倍。例如圖7是視訊應用的視訊列表，在摺疊態雙列顯示，展開態擴充套件為四列。

圖7 豎向視訊列表

圖8和圖9是帶橫向視訊的應用案例對比圖，在摺疊態單列顯示，推薦展開態擴充套件為雙列。不推薦展開態直接放大顯示原來的視訊列表，導致單張圖片/視訊高度超過1/2螢幕高度。

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

圖9 橫向視訊列表不推薦形式

特殊情況如展開態顯示三列（圖10所示），則單個圖片/視訊高度不超過1/2螢幕高度。

圖10 三列視訊列表

如果說典型應用案例可以幫助大家找到正確的努力方向，那麼設計自檢表則可以幫助大家提高稽核通過率~

三、設計自檢表

為了讓大家的應用在摺疊屏上有更好的使用體驗，以及幫助大家能夠順利通過稽核，我們提供了設計自檢表供大家對照執行。本次更新的自檢表對圖片&視訊、字型、彈出框等提供了量化的自檢條目，便於大家用於應用的快速對比驗證。

最後，除了以上內容，設計規範還在原有章節內容中新增了更多案例對比圖，歡迎大家點選連結（https://developer.harmonyos.com/cn/docs/design/des-guides/basic-requirements-0000001193421226），瞭解更多HarmonyOS摺疊屏設計規範的詳細內容。

搜尋

複製