当前位置: article > 正文

华为HarmonyOS鸿蒙智能手表开发和设计需要知道的_华为手表设计规范

作者：我家小花儿 | 2024-03-20 05:33:33

踩

华为手表设计规范

华为HarmonyOS智能手表分为两类：（1）智能穿戴（2）轻量级智能穿戴

智能穿戴产品目前只有：HUAWEI WATCH 3。
其他都是轻量级智能穿戴，如HUAWEI WATCH GT 2 Pro，HUAWEI WATCH GT 3。

本文仅针对智能穿戴设备（如HAWEI WATCH 3）：轻量级智能穿戴可以实现的功能比智能穿戴少，尤其是轻量级智能穿戴不具有发送网络请求获取数据的能力。

本文是基于JavaScript的智能手表开发指导，开发时尽量选择6及以上的SDK版本。

智能穿戴设计指南：

文档中心https://developer.harmonyos.com/cn/docs/design/des-guides/design-principles-0000001052899763智能穿戴开发JS API参考：

文档中心https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-versions-0000001185761140

一. 智能穿戴尺寸

智能穿戴的基准宽度为454px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。

换算关系：组件的width设为100px时，在宽度为454物理像素的屏幕上，实际显示为100物理像素；在宽度为908物理像素的屏幕上，实际显示为200物理像素。

智能穿戴设计常用尺寸：

（1）常用文字大小

（2）图标大小

（3）间距大小

二. 智能穿戴组件

1. 智能穿戴常用组件

（1） input 组件

交互式组件，包括单选框，多选框，按钮。

Note：智能穿戴仅支Input类型设置为button、radio、checkbox。

（2） swiper组件

滑动容器，提供切换子组件显示的能力。

Note：swiper组件支持除<list>之外的子组件。

（3）list组件

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

（4）progress组件

进度条，用于显示内容加载或操作处理进度。

（5）image-animator组件

图片帧动画播放器。

2. 智能穿戴常用的选择组件

（1） picker-view组件

嵌入页面的滑动选择器，不支持子组件。

（2） slider组件

滑动条组件，用来快速调节设置值，如音量、亮度等。

（3）switch组件

开关选择器，通过开关，开启或关闭某个功能。

3. 智能穿戴不支持的组件

（1）智能穿戴不支持的容器组件

badge：应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。
panel：可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换。属于弹出式组件。
popup：气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。
stepper：步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
- stepper-item：步骤导航器子组件，作为步骤导航器某一个步骤的内容展示组件。
tabs：tab页签容器。
- tab-bar：<tabs>的子组件，用来展示tab的标签区，子组件排列方式为横向排列。
- tab-content：<tabs>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。

（2）智能穿戴不支持的基础组件

menu：提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。
- option：当作为<menu>的子组件时用来展示弹出菜单的具体项目。
select：下拉选择按钮，可让用户在多个选项之间选择。
- option：当作为<select>的子组件时用来展示下拉选择的具体项目。
picker：滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
rating：评分条，表示用户使用感受的衡量标准条。
toggle：状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。
search：搜索框组件，用于提供用户搜索内容的输入区域。
piece：一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
richtext：富文本组件，用于展示富文本信息。
textarea：多行文本输入的文本框。
toolbar：工具栏。放在界面底部，用于展示针对当前界面的操作选项。
- toolbar-item：工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。
web：展示网页内容的组件。