原文:https://mp.weixin.qq.com/s/7_mdRom7sCA3Z65ih6W3xw,点击链接查看更多技术内容。

这几年折叠屏手机很火,我们针对使用HarmonyOS的折叠屏手机提供了应用设计指导——HarmonyOS折叠屏设计规范。此规范属于UX设计规范范畴,旨在提升用户体验。通过HarmonyOS折叠屏设计规范,对齐设计语言,拉通体验设计的方向,帮助设计师统一设计品质,最终为用户提供清晰一致、简单易用的使用体验。

随着华为新一代折叠屏Mate X2、P50 Pocket的发布,华为最新的HarmonyOS折叠屏设计规范也来啦!

下面跟随我们一起来了解一下HarmonyOS折叠屏设计规范的新增亮点内容吧~

一、新增外屏设计规范

针对2021年新款折叠屏特有的外屏,HarmonyOS折叠屏设计规范新增了“外屏”章节来介绍外屏的适配设计,帮助设计师充分利用折叠屏的外屏,给用户带来额外的惊喜体验。

折叠屏在折叠态时,有一块可显示、可交互的屏幕,称为外屏。根据外屏尺寸的不同,外屏分为大外屏和小外屏两种规格。大外屏尺寸接近一个普通的手机,可直接按照手机或折叠屏折叠态的布局及交互设计。小外屏尺寸较小,仅能显示少量关键信息或快捷操作,需要进行相应的适配设计。

图1 外屏的两种规格

由于小外屏需要专门的适配设计,“外屏”章节对小外屏做了详细了适配设计说明,包括适用场景、视觉显示模板、界面用语等。如图2所示,“外屏”章节提供了小外屏的视觉显示模板和案例。

图2 小外屏的模板和案例

另外,该章节针对内外屏的体验接续规则和适用场景也进行了详细的说明。大外屏和内屏建议无缝的体验接续;小外屏和内屏则需要区分场景和状态来考虑是否体验接续。

二、新增多窗口交互规范

折叠屏展开态的宽屏特征让其天然适合多任务并行,因此在HarmonyOS折叠屏设计规范特地增加了“多窗口交互”这一章节,帮助设计师充分利用宽屏实现多任务并行、便捷的临时任务处理,给用户提供更佳的使用体验。

该部分主要介绍了折叠屏上的悬浮窗、分屏及平行视界三种多窗口交互的定位、区别、适用场景、适配要求及交互规则。

图3和图4分别为这三种多窗口的界面呈现和介绍。

图3 三种多窗口的界面呈现

图4 三种多窗口的介绍

除了以上新增内容外,HarmonyOS折叠屏设计规范还在原有章节内容中新增了更多的视频案例,帮助开发者、设计师和产品经理更快速地理解典型场景及设计规则。欢迎大家点击“阅读原文”,了解更多HarmonyOS折叠屏设计规范的详细内容。

希望本期内容能给各位开发者带来一定帮助。同时,我们十分重视开发者的意见,欢迎各位开发者在HarmonyOS应用开发官网或者华为开发者论坛积极反馈,我们也将继续提升文档体验,感谢各位的支持及信赖,让我们一起携手,创造无限可能。

外屏和宽屏浪费了?HarmonyOS折叠屏设计规范教你用起来的更多相关文章

  1. 粮草先行——Android折叠屏开发技术点(二)

    继该系列的第一篇和番外篇之后,今天我们来聊一聊多窗口开发的注意事项.实际上,与其说"多窗口开发",不如说让我们的APP适应多窗口模式. 可能有朋友会问,为什么要提到多窗口模式呢? ...

  2. 三星首款折叠屏手机Galaxy Fold上架中国官网

    2 月 28 日,在三星 Galaxy S10 系列新品发布会上,备受期待的三星首款可折叠屏手机 Galaxy Fold 也在中国正式亮相.目前,Galaxy Fold 已正式上架三星中国官网,可以预 ...

  3. [COCOS2DX-LUA]0-005.cocos2dx中关于全面屏和折叠屏的适配的一些见解

    1.随着科技的发展,我们可以看到从iphoneX的刘海屏开始,引发了各种全面屏和异形屏的出现.这是科技的进步,但是对于各大的应用厂商来说,苦不堪言. 2.当然 ,吐槽归吐槽,我们还是要理智的去对待这个 ...

  4. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  5. 粮草先行——Android折叠屏开发技术点(一)

    最近有关折叠屏产品的新闻层出不穷,各家手机厂商也分别慢慢地亮出了自家的产品.然而市场上的一些APP仍然没有很好地适配这样的设备,显示不正常和应用重启的状况时有发生.因此,我会用接下来的几篇文章来点出有 ...

  6. iOS中的截屏(屏幕截屏及scrollView或tableView的全部截屏)

    iOS中的截屏(屏幕截屏及scrollView或tableView的全部截屏) 2017.03.16 12:18* 字数 52 阅读 563评论 4喜欢 2 1. 截取屏幕尺寸大小的图片并保存至相册 ...

  7. OBS录制全屏游戏的方法(超好录屏)

    新版Windows设置 详见 https://github.com/obsproject/obs-studio/wiki/Laptop-Troubleshooting 新版的Windows 10: l ...

  8. 粮草先行——Android折叠屏开发技术点番外篇之运行时变更处理原则

    上一篇文章中,我们有提到Activity在屏幕尺寸发生变更时的处理方式,总共有两种: 重启APP以适应屏幕改变: 手动处理数据,避免APP重启. 同样,这两种方式也同时适用于改变屏幕方向.更改系统语言 ...

  9. jquery 100%全屏自适应宽可点击左右和焦点的自动切换幻灯片特效

    http://www.divcss5.com/css-texiao/texiao717.shtml http://d.divcss5.com/divcss5/down/2014062201.zip

  10. 蓝屏代码详解(更新WIN7蓝屏代码)

    6位代码含意 0 0x0000 作业完成.  1 0x0001 不正确的函数.  2 0x0002 系统找不到指定的档案.  3 0x0003 系统找不到指定的路径.  4 0x0004 系统无法开启 ...

随机推荐

  1. 使用beyond compare或kompare作为git的对比、合并工具

    两种方法 方法1: 直接使用命令 # 执行下面命令,参看支持对比合并工具名称,比如bc就是指beyond compare(收费软件,推荐使用开源的kompare) $ git difftool --t ...

  2. [Linux] Linux 自动挂载mount --bind 实现类似目录硬链的效果 (包含ZFS方案)

    说明 这个命令用以将一个目录挂载到另一个目录,以实现类似于硬链的操作 但是这个命令只是在内存中建立了一个映射,重启系统之后挂载就消失了 而linux是不支持目录硬链的,具体原因见linux为什么不能硬 ...

  3. 借助 Terraform 功能协调部署 CI/CD 流水线-Part 2

    在第一部分的文章中,我们介绍了3个步骤,完成了教程的基础配置: 使用 Terraform 创建 AWS EKS Infra 在 EKS 集群上部署 ArgoCD 及其依赖项 设置 Bitbucket ...

  4. 最小生成树(二)Prim算法

    一.思想 1.1 基本概念 加权无向图的生成树:一棵含有其所有顶点的无环连通子图. 最小生成树(MST):一棵权值最小(树中所有边的权值之和)的生成树. 1.2 算法原理 1.2.1 切分定理 切分定 ...

  5. 摆脱鼠标操作 vscode-vim-use-readme.md

    vscode-vim 学习笔记 梳理下自己定义的快捷键 Normal模式返回 ESC capsLock 双击shift ctrl+[ jj ctrl+c (这个键比较特殊 用习惯y的话,考虑这个) 一 ...

  6. powershell 输入命令 不执行 保留输入内容 Ctrl + C

    为什么 powershell 输入命令 不执行 保留输入内容 Ctrl + C 为了解释某些命令,但是不执行 比如 我说 dc命令就是 xxxxxxx 我就先输入 xxxxxxxx然后ctrl + c ...

  7. ulimit.conf中soft和hard区别及常用配置

    在Linux中,ulimit命令用于限制用户对shell资源的访问,包括进程数.文件打开数等.这些限制可以分为软限制(soft limit)和硬限制(hard limit). 软限制(soft lim ...

  8. 基于DSP的设备振动信号的采集和处理模块研发总结

    前记  在能源领域,由于很多地方都是无人值守,设备故障检测是一个必须面对的问题.笔者通过最近几个行业案例了解到,由于很多设备发生故障时候会产生特定频谱的声音,所以该行业对振动监测的需求特别强烈,由于涉 ...

  9. 基于TLSR8359的2.4G私有协议多发一收方案解析

    一 简析 1.简介 泰凌微的2.4G私有协议芯片在市场应用十分广泛. 2.特性 无线传输距离远 功耗低,接口丰富 自带mcu功能,可实现mcu+2.4G的私有功能 二 源码解析 1.原理图 框图如下所 ...

  10. 【Django】如何在类视图、普通视图单独不做CSRF校验

    一.背景 在某些特定场合下,需要局部禁用CSRF校验,比如,期望整个项目都启用CSRF,但是中途遇到某一两个视图要去掉这个校验 二.方案 1.如果你写Django的路由用的类视图,那么需要这样写 在 ...