近日,华为发布了针对 2in1 设备 的HarmonyOS 应用设计指南,其中涉及到了鸿蒙 PC 版应用 UI 的展示。

2in1 设备是一种结合了平板的便携性与笔记本的生产力的新型设备,它们通常具有可拆卸键盘和触控屏,使用户能够在不同的使用场景下灵活切换。

如果要设计出优秀的 2in1 应用或服务,需要熟悉并充分利用 2in1 设备特性,这些特性包括硬件特征、使用方式、交互方式、使用场景等。

3b3a0548e64ac5afdea8ebf10b5fde4b.png

1、界面设计亮点

  • 效率型与沉浸型 UI:鸿蒙 PC 版的 UI 设计兼顾了效率与沉浸感,提供了多样化的界面风格,以适应不同用户的需求。

  • 应用界面案例:包括天气 App、文件资源管理器等,这些应用的 UI 设计简洁而直观,操作逻辑与 PC 近似,易于上手。

39561a43753b134f528137b8021e9b03.png

c6c26f5ade870c69fc82c65eb3734df3.png

2、窗口框架

窗口是系统中各个应用的载体,由容器层和内容区构成。容器层用于展示应用品牌和控制整体窗口,内容层用于查看内容及与内容进行交互。

c94d277cd7cccbcf42ec14db54192206.png

窗口控制:具备窗口名称/应用图标(可选)、最小化/最大化/关闭控制按钮(必选),使得用户能够快速适应鸿蒙 PC 版的操作方式。

窗口尺寸调整:支持窗口的默认尺寸显示,并可拉伸为任意尺寸,提供了灵活的窗口管理体验。

65e6a58b3f5cc4cdd1319929a541a66c.png

当应用未做适配时,窗口提供默认的标题区背景、应用图标、应用名称以及窗口控制按钮:

3f9305b41bea1da0788b8827cddd5d2b.png

3、尺寸规范:适应不同设备

  • 默认尺寸:屏幕的 67%,确保应用在启动时能够占据合适的显示区域。

  • 最小尺寸:360*240vp,保证了即使在小尺寸设备上,应用也能保持良好的显示效果。

c2d50de7da80d306913b398fceca6996.png

4、分栏结构

内容层是应用展示信息的空间,应用需重点关注分栏结构、基于键鼠操作的多模交互以及控件相关规范。

2in1 设备上的窗口分为三种形态,建议根据业务属性酌情使用。

8f507484242036125ca278d2b0e72623.png

5、响应式规则

充分利用 2in1 屏幕大尺寸的优势,利用响应式布局实时响应尺寸变化,确保以最佳的布局来显示内容。

此外,去年 9 月,深圳开鸿数字产业发展有限公司 CEO 王成录博士曾在微博与网友互动时确认,2024 年会有 PC 端鸿蒙系统,意味着今年我们或许能在市面上看到鸿蒙 PC 的发布。

70708535d2452f9586a4a5ad39cebbed.png

参考文章:https://developer.huawei.com/consumer/cn/doc/design-guides/2in1-0000001777531700

升级纯血鸿蒙后原游戏账号怎么办?官方介绍来了

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐