首页 > 应用开发 > > 一文带你详细了解HarmonyOS折叠屏设计规范!

随着新一代折叠屏手机HUAWEI Mate Xs 2发布,HarmonyOS折叠屏设计规范(后文简称:设计规范)也马不停蹄地更新啦!这次更新的设计规范不仅新增了更多应用场景案例,帮助大家高效设计不同类型的业务应用,还通过清晰直观的案例对比图,帮助大家有效避坑。
HarmonyOS折叠屏设计规范:
https://developer.harmonyos.com/cn/docs/design/des-guides/basic-requirements-0000001193421226
1. 信息展示完整
图1是信息展示案例对比图,设计规范建议展开态不应出现页面内的内容元素数量减少,或图形化元素模糊、分辨率下降或视觉体量减小等损失,应确保展开态的内容元素不少于折叠态内容元素信息量的3/4。
2. 字体/图标适配
图2是字体适配案例对比图,设计规范建议展开态图标和字体大小不应发生明显变化,在保证可读性的基础上,建议保持跟折叠态一样的大小。若一定要发生大小变化,则最大不要超过1.2倍。为确保有较好的可读性,展开态单屏每行文本长度不超过40字,推荐36字左右。
3. 弹出框适配
图3和图4是弹出框适配案例对比图,设计规范建议展开态和折叠态弹出框保持相同的大小,或大小变化不超过1.2倍。

1. 首页广告
在视频应用中,首页顶部往往会有广告。图5和图6是首页广告案例对比图,设计规范建议从折叠态到展开态应用在广告图/视频的左右增加上一张、下一张。不建议从折叠态到展开态直接等比放大广告内容,导致一屏幕显示信息太少,降低浏览效率。

2. 视频列表
视频类内容往往有不同的长宽比例,因此视频列表常采用宫格结构或瀑布流布局。设计规范建议在展开态增加显示列数为原来的两倍。例如图7是视频应用的视频列表,在折叠态双列显示,展开态扩展为四列。



最后,除了以上内容,设计规范还在原有章节内容中新增了更多案例对比图,欢迎大家点击链接(https://developer.harmonyos.com/cn/docs/design/des-guides/basic-requirements-0000001193421226),了解更多HarmonyOS折叠屏设计规范的详细内容。
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/70047792/viewspace-3126197/ ,如需转载,请注明出处,否则将追究法律责任。