华为发布鸿蒙 HarmonyOS 折叠屏最新设计规范,对信息展示、字体 / 图标、弹出框等提供适配设计指南

大千世界 68 0

  IT之家 5 月 21 日消息,随着新一代折叠屏手机华为 Mate Xs 2 发布,鸿蒙 HarmonyOS 折叠屏设计规范也进行了更新。

  昨日,HarmonyOS 官方公布了规范的更新内容,这次更新的设计规范不仅新增了更多应用场景案例,帮助大家高效设计不同类型的业务应用,还通过清晰直观的案例对比图,帮助大家有效避坑。

  

华为发布鸿蒙 HarmonyOS 折叠屏最新设计规范,对信息展示、字体 / 图标、弹出框等提供适配设计指南-第1张图片-大千世界


  首先,本次设计规范在“基础要求”章节针对内容、图片、字体、弹出框、屏幕旋转等提供了适配设计指南。

  1. 信息展示完整

  图 1 是信息展示案例对比图,设计规范建议展开态不应出现页面内的内容元素数量减少,或图形化元素模糊、分辨率下降或视觉体量减小等损失,应确保展开态的内容元素不少于折叠态内容元素信息量的 3/4。

  

华为发布鸿蒙 HarmonyOS 折叠屏最新设计规范,对信息展示、字体 / 图标、弹出框等提供适配设计指南-第2张图片-大千世界


  ▲ 图 1 信息展示

  2. 字体 / 图标适配

  图 2 是字体适配案例对比图,设计规范建议展开态图标和字体大小不应发生明显变化,在保证可读性的基础上,建议保持跟折叠态一样的大小。若一定要发生大小变化,则最大不要超过 1.2 倍。为确保有较好的可读性,展开态单屏每行文本长度不超过 40 字,推荐 36 字左右。

  

华为发布鸿蒙 HarmonyOS 折叠屏最新设计规范,对信息展示、字体 / 图标、弹出框等提供适配设计指南-第3张图片-大千世界


  ▲ 图 2 字体 / 图标适配

  3. 弹出框适配

  图 3 和图 4 是弹出框适配案例对比图,设计规范建议展开态和折叠态弹出框保持相同的大小,或大小变化不超过 1.2 倍。

  

华为发布鸿蒙 HarmonyOS 折叠屏最新设计规范,对信息展示、字体 / 图标、弹出框等提供适配设计指南-第4张图片-大千世界


  ▲ 图 3 弹出框适配

  

华为发布鸿蒙 HarmonyOS 折叠屏最新设计规范,对信息展示、字体 / 图标、弹出框等提供适配设计指南-第5张图片-大千世界


  ▲ 图 4 弹出框不适配

  此外,本次设计规范在“典型应用案例”章节提供了影音娱乐、新闻资讯、生活服务、社交通讯、H5、金融和游戏类等 7 大场景的应用案例,大家可以参考这些案例,并结合自己应用的业务类型及业务场景,进行折叠屏上的最佳界面适配和创新设计。

  IT之家了解到,本次更新的自检表对图片 & 视频、字体、弹出框等提供了量化的自检条目,便于大家用于应用的快速对比验证。

  HarmonyOS 折叠屏设计规范:点此查看


标签: HarmonyOS 华为 折叠

抱歉,评论功能暂时关闭!