草庐IT

外屏和宽屏浪费了?HarmonyOS折叠屏设计规范教你用起来

HarmonyOS开发者社区 2023-03-28 原文

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

 

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


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

 

一、新增外屏设计规范


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


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

 

图1 外屏的两种规格

 

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

 

图2 小外屏的模板和案例

 

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

 

二、新增多窗口交互规范


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


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

 

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

 

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

图4 三种多窗口的介绍

 

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

 

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

 

 

扫码添加开发者小助手微信

获取更多HarmonyOS开发资源和开发者活动资讯

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

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  3. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中,我没有任何确认。在我的用户模型中,我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  6. ruby - gem 规范失败 - 2

    我正在为毕业设计开发GEM,TravisCI构建不断失败。这是我在Travis上的链接:https://travis-ci.org/ricardobond/perpetuus/builds/8709218构建错误是:$bundleexecrakerakeaborted!Don'tknowhowtobuildtask'default'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_wrapper:14:in`eval'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_

  7. ruby-on-rails - 设计通过 reset_password_token 获取用户 - 2

    我正在尝试创建密码规则来设计可恢复的密码更改。我通过passwords_controller.rb做了一个父类(superclass),但我需要在应用规则之前检查用户角色,但我所拥有的只是reset_password_token。 最佳答案 假设您的模型是用户:User.with_reset_password_token(your_token_here)Source 关于ruby-on-rails-设计通过reset_password_token获取用户,我们在StackOverflow

  8. ruby - Sublime Text 3 多行法折叠 - 2

    所以...SublimeText具有折叠方法的内置功能,但是一旦方法声明跨越多行,它就会失去这种能力。有谁知道插件或使它工作的方法吗?具体来说,我在使用ruby​​时遇到了这个问题(我的团队遵守关于行长度的严格风格指南),但语言应该无关紧要。 最佳答案 无需单击出现在函数定义第一行旁边的装订线中的向下箭头,您需要做的就是将光标放在函数的一个缩进行上(不是缩进的函数参数,而是在函数定义本身)并使用CtrlShift[键绑定(bind)(在OSX上使用⌘Alt[)折叠函数及其参数。使用CtrlShift](⌘Alt]在OSX上)展开,或

  9. ruby-on-rails - Rails 5,公寓和设计 : sign in with subdomains are not working - 2

    我已经使用Apartment设置了一个Rails5应用程序(1.2.0)和Devise(4.2.0)。由于某些DDNS问题,应用只能在app.myapp.com下访问(请注意子域app)。myapp.com重定向到app.myapp.com。我的用例是每个注册该应用的用户(租户)都应该通过他们的子域(例如tenant.myapp.com)访问他们的特定数据。用户不应限定在其子域内。基本上应该可以从任何子域登录。重定向到租户的正确子域由ApplicationController处理。根据Devise标准,登录页面位于app.myapp.com/users/sign_in。这就是问题开始的

  10. ruby-on-rails - 设计中的 ArgumentError::RegistrationsController#new 错误的参数数量(2 代表 0..1) - 2

    我在关注RyanbatesRailsCast的devise和omniauth(第235集-devise-and-omniauth-revised)。当我尝试使用Twitter登录时,标题中不断出现错误。defself.new_with_session(params,session)ifsession["devise.user_attributes"]new(session["devise.user_attributes"],without_protection:true)do|user|user.attributes=paramsuser.valid?end完整跟踪:C:/Ruby20

随机推荐