交互方式：智慧生活APP（中篇）—APP开发（上）

一、UI设计规范

APP开发设计需要遵循HarmonyOS Connect智慧生活_单品设计规范，包括如下五个方面：

01 HarmonyOS Connect智慧生活_单品设备图片规范

02 HarmonyOS Connect智慧生活_单品设备设计规范

03 HarmonyOS Connect智慧生活_单品布局标注

04 HarmonyOS Connect智慧生活_单品控制页图片规范

05 HarmonyOS Connect智慧生活_单品图标规范

二、APP设计

介绍如何进行智慧生活APP的界面设计与H5开发，支持线上开发与线下自开发两种方式。

选择APP开发方式

1，在平台左侧导航栏中选择“产品开发”，单击待开发的产品，进入产品开发流程。

2，选择“用户交互”页签，并单击“智慧生活APP”模块的“进入开发”，进入“物模型定义”页面。

3，选择“APP开发 > APP设计”。

4，从以下两种方式中，选择合适的方式完成H5开发。

线上开发

在平台的“线上开发”界面，中间为预览区（包括设备展示区、信息展示区、功能区等），右侧为编辑区，编辑区右上方的三个空间分别代表“保存H5设计”、“二维码”、“下载H5包”。开发者可以根据实时预览效果来调整编辑操作，快速实现所需的页面。

1，单击预览区域最上方的设备展示区，在右侧的编辑区配置相关信息。

图1 编辑设备展示区

2，单击预览区的信息展示项，将编辑区的“选中项”配置为“展示信息”，可以对其执行以下操作：

图2 首项突出显示

图3 增删场景模式或调整顺序

图4 配置枚举值颜色

3，单击预览区的功能区，将编辑区的“选中项”配置为“卡片容器”，可以对其执行以下操作：

图5 编辑功能区

4，（可选）设置自定义功能组件操作范式。

5，（可选）设置自定义功能组件的图标。

6，配置通用功能组件样式和说明。

a.编辑通用功能组件样式，支持列表、平铺两种UI样式。

b.编辑场景类组件，可以进行以下操作：上下拖拽调整组件排序、添加或删除组件、修改标题名称、自定义场景图片。

图6 编辑通用功能组件

c.（仅适用于滤芯耗材）选中滤芯耗材组件，进行如下配置：更改滤芯名称、添加购买链接（仅支持华为商城链接）、添加功能说明及服务电话（显示在详情页）、更换教程（支持上传整图的方式）。

图7 配置滤芯耗材说明

d.（仅适用于错误和故障服务）对错误和故障服务，进行以下配置：添加故障描述、描述故障原因、添加解决办法及服务电话、添加购买链接（仅支持华为商城链接）。

图8 配置错误和故障服务

7，预览设计效果。

界面设计完成后，点击平台右上方，扫描生成的二维码并输入验证码（下图二维码仅为示例，请以实际为准），即可在手机上查看效果、体验操作。

线下自开发

1，获取开发资料。,

2，按照《UX设计规范》完成界面设计，上传UX设计稿。

3，完成H5的开发。

说明

a.根据UX设计稿完成UI界面开发，并根据设备功能完成功能逻辑。

b.H5适配暗黑模式（即深色模式）。

c.H5完成中英文翻译适配。

4，开发完成后，打包成H5开发包。开发包需遵循如下规则：

5，将H5开发包上传到开发者平台，等待审核通过。

三、页面配置

介绍如何配置智慧生活APP的界面图和界面信息。

操作步骤

1，在平台左侧导航栏中选择“产品开发”，单击待开发的产品，进入产品开发流程。2，选择“用户交互”页签，并单击“智慧生活APP”模块的“进入开发”，进入“物模型定义”页面。

3，选择“APP开发 > 页面配置”。

4，分别完成“app首页”、“设备连接页”、“H5控制页”、“设备状态页”、“

配网指导页”的配置。下面以“配网指导页”为例说明操作步骤，其他页面的配置与此类似。

a.选择“配网指导页”，中间展示区会显示预览效果。

b.单击右下角的“编辑”。

c.单击“点击上传”，按照图片要求，选择指导图进行上传。

d.在“第一步”和“第二步”下方的输入框中，填写配网操作步骤。

e.单击“保存”，完成当前页面的配置。

相关阅读：

     交互方式：智慧生活APP（中篇）—APP开发（下）