這次更新的設計規範不僅新增了更多應用場景案例，幫助大家高效設計不同類型的業務應用，還通過清晰直觀的案例對比圖，幫助大家有效避坑。 ...
隨著新一代摺疊屏手機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摺疊屏設計規範的詳細內容。
搜索
複製
