0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS折叠屏设计规范

HarmonyOS开发者 来源:HarmonyOS开发者 作者:HarmonyOS开发者 2022-05-20 09:53 次阅读

随着新一代折叠屏手机HUAWEI Mate Xs 2发布,HarmonyOS折叠屏设计规范(后文简称:设计规范)也马不停蹄地更新啦!这次更新的设计规范不仅新增了更多应用场景案例,帮助大家高效设计不同类型的业务应用,还通过清晰直观的案例对比图,帮助大家有效避坑。

HarmonyOS折叠屏设计规范:

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

一、基础要求

我们发现部分应用在手机上显示效果很好,但是到折叠屏上,图片、字体、卡片等元素过大,导致一屏看不了多少信息,完全没有利用到大屏幕的优势,反而比在普通手机上浏览效率更低。

因此,本次设计规范就在“基础要求”章节针对内容、图片、字体、弹出框、屏幕旋转等提供了适配设计指南。下面将挑选三个比较典型的案例对比图为大家介绍。1. 信息展示完整

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

caec92c4-d7da-11ec-bce3-dac502259ad0.png

图1 信息展示2. 字体/图标适配

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

cb16ab2c-d7da-11ec-bce3-dac502259ad0.png

图2 字体/图标适配3. 弹出框适配

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

cb259da8-d7da-11ec-bce3-dac502259ad0.png

图3 弹出框适配

cb619b3c-d7da-11ec-bce3-dac502259ad0.png

图4 弹出框不适配

了解完折叠屏设计的基础要求,各位开发者、设计师或者产品经理也许想说,上面这些都是小case啦,有没有不同场景的应用案例供我们参考呀?没问题,这就安排!

二、典型应用案例

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

由于篇幅有限,此处不再针对上述各个场景展开介绍,下面我们以较为普遍的影音娱乐为例为大家介绍在界面设计时,需要注意些什么。1. 首页广告

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

cba2051e-d7da-11ec-bce3-dac502259ad0.png

图5 首页广告推荐形式

cbc38b6c-d7da-11ec-bce3-dac502259ad0.png

图6 首页广告不推荐形式2. 视频列表

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

cbf199e4-d7da-11ec-bce3-dac502259ad0.png

图7 竖向视频列表 图8和图9是带横向视频的应用案例对比图,在折叠态单列显示,推荐展开态扩展为双列。不推荐展开态直接放大显示原来的视频列表,导致单张图片/视频高度超过1/2屏幕高度。

cc29d32c-d7da-11ec-bce3-dac502259ad0.png

图8 横向视频列表推荐形式

cc7bd9a6-d7da-11ec-bce3-dac502259ad0.png

图9 横向视频列表不推荐形式 特殊情况如展开态显示三列(图10所示),则单个图片/视频高度不超过1/2屏幕高度。

ccd74e4e-d7da-11ec-bce3-dac502259ad0.png

图10 三列视频列表

如果说典型应用案例可以帮助大家找到正确的努力方向,那么设计自检表则可以帮助大家提高审核通过率~

三、设计自检表

为了让大家的应用在折叠屏上有更好的使用体验,以及帮助大家能够顺利通过审核,我们提供了设计自检表供大家对照执行。本次更新的自检表对图片&视频、字体、弹出框等提供了量化的自检条目,便于大家用于应用的快速对比验证。

最后,除了以上内容,设计规范还在原有章节内容中新增了更多案例对比图,欢迎大家点击“阅读原文”,了解更多HarmonyOS折叠屏设计规范的详细内容。

END

审核编辑 :李倩

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 折叠屏
    +关注

    关注

    3

    文章

    472

    浏览量

    15140
  • HarmonyOS
    +关注

    关注

    79

    文章

    1686

    浏览量

    29150

原文标题:一文带你详细了解HarmonyOS折叠屏设计规范!

文章出处:【微信号:HarmonyOS_Dev,微信公众号:HarmonyOS开发者】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    PCB layout在布线上的设计规范有哪些?

    一站式PCBA智造厂家今天为大家讲讲pcb layout设计需要注意哪些细节?pcb layout设计规范。Printed Circuit Board (PCB)是一种电子零件,它是连接
    的头像 发表于 02-23 09:19 164次阅读

    华为印制电路板(PCB)设计规范

    电子发烧友网站提供《华为印制电路板(PCB)设计规范.pdf》资料免费下载
    发表于 01-02 10:44 11次下载

    印制电路板设计规范

    电子发烧友网站提供《印制电路板设计规范.pdf》资料免费下载
    发表于 01-02 10:37 0次下载

    单通道双输出LED灯光控制触摸芯片DL103W应用之PCB设计规范

    单通道双输出LED灯光控制触摸芯片DL103W应用之PCB设计规范,详细介绍了相关的设计注意事项
    的头像 发表于 12-27 09:12 306次阅读
    单通道双输出LED灯光控制触摸芯片DL103W应用之PCB<b class='flag-5'>设计规范</b>

    鸿蒙原生应用开发-折叠、平板设备服务卡片适配

    一、多设备卡片适配原则 为不同尺寸的卡片提供不同的功能 在卡片开发过程中请考虑适配不同尺寸的设备,特别是在折叠和平板设备上,设备屏幕尺寸的变化直接影响了卡片内容的展示。请发挥想象力设计具有自适应
    发表于 11-16 10:10

    HarmonyOS鸿蒙原生应用开发设计- HarmonyOS Sans 字体

    HarmonyOS设计文档中,为大家提供了独特的字体,开发者可以根据需要直接引用。 开发者直接使用官方提供的字体内容,既可以符合HarmonyOS原生应用的开发上架运营规范,又可以防止使用别人的字体
    发表于 10-23 16:12

    非常详细的PCB设计规范

    非常详细的PCB设计规范
    发表于 10-11 18:06 27次下载

    OpenHarmony应用开发涉及的主要因素与UX设计规范

    一、OpenHarmony应用开发涉及的主要因素 二、OpenHarmony应用开发UX设计规范 UX设计规范的主要内容与部分图标示例 2.OpenHarmony应用设计原则 设计原则,当为
    发表于 09-25 15:03

    FPGA芯片外围电路设计规范和配置过程

    小编在本节介绍FPGA芯片外围电路设计规范和配置过程,篇幅比较大,时钟的设计原则就有17条,伙伴们耐心读一读。
    的头像 发表于 08-15 16:18 3449次阅读
    FPGA芯片外围电路<b class='flag-5'>设计规范</b>和配置过程

    详解FPGA的设计规范与应用

    点击上方 蓝字 关注我们 FPGA设计规范        1.设计必须文档化。要将设计思路,详细实现等写入文档,然后经过严格评审通过后才能进行下一步的工作。这样做乍看起来很花时间,但是从整个项目过程
    的头像 发表于 06-19 09:35 975次阅读

    SMT-PCB拼版设计规范

    SMT-PCB拼版设计规范
    的头像 发表于 06-15 10:59 889次阅读
    SMT-PCB拼版<b class='flag-5'>设计规范</b>

    硬件电路设计规范

    01 硬件电路设计规范 1、 详细理解设计需求,从需求中整理出电路功能模块和性能指标要求; 2、 根据功能和性能需求制定总体设计方案,对 CPU 进行选型, CPU 选型有以下几点要求
    的头像 发表于 05-31 09:23 852次阅读
    硬件电路<b class='flag-5'>设计规范</b>

    干货分享:PCB工艺设计规范(一)

    设备 PCB 安规设计规范》》  XXXOE0199001 《《电子设备的强迫风冷热设计规范》》  XXXE0199002 《《电子设备的自然冷却热设计规范》》  IEC60194 《《印制板设计、制造
    发表于 04-20 10:39

    微电网设计规范及注意事项

    微电网设计规范需要综合考虑空气质量、安全、可靠性、可持续性、节能、供需平衡等多个方面的要素,以下是微电网设计规范的主要内容:   1. 负载和能源管理: 能量和负载应该合理匹配,并对负载进行
    发表于 04-09 10:30 1096次阅读

    变电站的接线方式和设计规范的基本要求

      变电站设计规范是根据国家相关法律法规和标准制定的,旨在保障变电站的安全运行,最大限度地减少电力设备事故和电力设备损害。下面是变电站设计规范的基本要求和细节:
    发表于 04-03 16:07 1477次阅读