线上开发H5（中篇）：在线设计H5指导(内含具体案例)

在线设计H5

1. 登录华为智能硬件合作伙伴平台，单击右上角的“管理中心”。
2. 在左侧导航栏中选择“产品开发”，单击待开发的产品，进入产品开发流程。
3. 选择“交互设计”，单击智慧生活App卡片右上方的“进入开发”。
4. 选择“App开发 > App设计 > 线上开发”，进入工具界面。
5. 单击设备展示区（即图3中的蓝色线框标识区），在编辑区配置设备图信息：
   • 设备图片：设备展示区显示的主图，需从“自定义素材”中选择实际的设备图片。
   • LOGO图片：设备图片下方显示LOGO，需从“自定义素材”中选择实际的Logo。
   • 是否显示光晕：设备图片周边是否显示光晕。仅部分品类（例如智能台灯）存在该选项。

   说明：

   • 自定义素材需在平台添加并审核通过后，才可在设计环节查看并使用。详细操作请参见UI资源库。
   • 如果选择“自定义素材”后没有找到可用的资源，表示没有上传素材图，或者已上传的图片素材还在审核中。

   图3 编辑设备展示区

   

   6.单击信息展示区（即图4中的蓝色线框标识区），将编辑区的“选中项”配置为“展示信息”，可以对其执行以下操作：

   说明：目前仅部分产品支持信息展示功能，以界面实际显示为准。

6. 首项突出显示：勾选“首项突出显示”后，信息展示类的第一项将展示在状态栏中心位置。通常用于展示特别重要的产品信息。

   图4 首项突出显示

   

   编辑场景模式：在编辑区，支持添加或删除场景模式；通过上下拖拽场景模式，可以调整显示顺序。当信息展示区存在枚举值时，还可以设置枚举值的颜色。

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

   

   图6 配置枚举值颜色
   

   7.编辑功能区。

7. 单击功能区中的任一功能项，可以配置功能相关信息，如功能名称、新手指引等。

   说明：不同功能支持的配置项不同，请以界面实际支持情况为准。由于某些功能的名称变更会影响用户对于功能的理解（例如，定时、定时器以及电工类的分路开关等功能），故不支持更改。

   图7 编辑单个功能项

   

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

8. 添加功能：单击“功能操作区”的“＋”，可以添加功能项。
9. 删除功能：单击功能右上角的“×”，可以删除功能项。

10. 图8 编辑功能区

11. 调整顺序：上下拖拽功能项，可以调整显示排序。
12. 显示长卡片：选择功能的UI样式是否以“长卡片”显示。

    8.（可选）设置功能组件的UI样式，适用于自定义功能及部分品类功能的组件。

    表1 组件UI样式说明

13. 组件的数据类型	支持的UI样式	说明
    布尔型	滑动开关类 点按开关类	仅适用于自定义功能组件。其他功能组件的样式是固定的，不支持更改。
    枚举型	下拉框 弹框式	仅适用于自定义功能组件。其他功能组件的样式是固定的，不支持更改。
    数值型	微调器 滑杆型	支持自定义功能组件，以及部分品类功能组件（例如，目标温度、目标湿度等）

    组件的数据类型	支持的UI样式	说明
    布尔型	滑动开关类 点按开关类	仅适用于自定义功能组件。其他功能组件的样式是固定的，不支持更改。
    枚举型	下拉框 弹框式	仅适用于自定义功能组件。其他功能组件的样式是固定的，不支持更改。
    数值型	微调器 滑杆型	支持自定义功能组件，以及部分品类功能组件（例如，目标温度、目标湿度等）

    布尔型组件样式切换：支持滑动开关类、点按开关类两种UI样式。

    ​

    枚举型组件样式切换：支持下拉框、弹框式两种UI样式。

    

    数值型组件样式切换：支持滑动、点按两种UI样式。

    

    9.配置通用功能组件样式和说明。

    说明：当前仅适用于通用功能中的“通用模式”。

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

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

    图9 编辑通用功能组件

    

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

    图10 配置滤芯耗材说明

    

    d.（仅适用于错误和故障服务）配置通用功能中的“错误和故障服务”的页面。

14. 默认跳转页面配置为“否”。
15. 如需配置二级页面故障信息，配置方式：跳转页面选择“是”，添加故障描述、描述故障原因、添加解决办法及服务电话、添加购买链接（仅支持华为商城链接）。

16. 图11 配置错误和故障服务

    

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

    说明:目前仅支持将自定义功能组件的图标更改为系统内置图标。标准功能的图标不支持更改。

    

    11.（可选）配置组合功能组件的说明。

    说明:开启组合功能后，HarmonyOS Connect云会自动检测该组合功能的条件并触发相应的动作。

    

    配置组件逻辑（可选）

    伙伴可以自定义设备界面功能组件之间的逻辑配置，包括可用、禁用、锁定：

17. 可用：指当满足某些条件时，设置某一功能属性的可用范围，则组件操作时只能选择可用范围，范围以外不可用。
18. 禁用：指当满足某些条件时，设置某一功能禁用，则该功能的界面组件呈现为置灰状态，不可操作。

19. 本章节以空气净化器为例，介绍配置“可用”逻辑的操作。禁用和锁定逻辑的配置与此类似。

    1.单击右上角的“组件逻辑配置”。

    2.选择“可用列表”页签，单击“新建”。

    3.设置依赖条件。

    说明:

    • 依赖条件可添加多个，满足其中任意一个即可执行命令。
    • 枚举型、数值型功能属性关系可以选择“=”、“＞”、“＜”。
20. 锁定：指当满足某些条件时，设置某一功能锁定，则该功能的界面组件呈现为展示状态，不可操作。
21. 隐藏：指当满足某些条件时，设置某一功能隐藏，则该功能的界面组件呈现为不可见状态，不可操作。

    ​

    3.（可选）设置功能组件的UI样式，适用于自定义功能及部分品类功能的组件。

    ​

    4.选择执行命令。

    ​

    5.配置完成后，单击“确定”。