运动手表自定义表盘设计指导及规范

1. 制作流程

1.1 表盘效果设计

先用Photoshop等工具设计好表盘效果预览图。（点击查看详细规格）

1.2 效果缩略图，自定义预览图和切图制作

接着以效果图为基础，制作缩略图，自定义预览图和切图。

缩略图：将效果图的尺寸缩小即可；
自定义预览图：将效果图的自定义区域挖空+一层黑色蒙层；
切图：将效果图按照背景、时间（时分秒）、日期（年月日星期）、插件（天气、步数等）四种类型，进行元素分解；·

把每个元素按具体绘制类型，分解为一个或多个图层；

针对每个图层绘制所需要的资源进行切图；

针对每个最小图层，在XML中通过控件+切图的组合方式配置其展示方式。

（点击查看详细缩略图，自定义预览图和切图规格）

1.3 自定义表盘制作

最后使用表盘工具，通过对应的控件+数据+图片来实现表盘信息的展示，并打包生成表盘资源包。

控件：表盘的功能选项（点击查看）
数据：支持控件的能力（点击查看）
图片：支持控件的展现

例子：自定义表盘制作

设计好效果预览图之后，准备好“自定义预览图”、“自定义内容预览图”、“边框资源”、“自定义资源”、“切图”。
使用表盘工具，选择“背景”控件，导入自定义预览图；

3. 选择“控件”，添加“容器”和“自定义”；

4. 在“自定义1"处选择数据类型“天气”，再添加自定义内容预览图和边框资源，接着添加两个“选图”和一个“文本”（选图的数据类型：天气和温度类型；文本的数据类型：气温类型），并导入相应的切图，调整位置；

5. 同理添加“自定义2”处选择数据类型“心率”，再添加自定义内容预览图和边框资源，接着添加一个“单图”和一个“文本”（单图的数据类型：心率类型；文本的数据类型：心率类型），并导入相应的切图，调整位置；

6. 同理添加“自定义3”处选择数据类型“电量”，再添加自定义内容预览图和边框资源，接着添加一个“选图”，一个“连接文本”和2个“弧形图”（选图的数据类型：电量枚举类型；连接文本的数据类型：电量类型；弧形图的数据类型：电量比例），并导入相应的切图，调整位置；

7. 点击“容器”，在右边属性栏里勾选“自定义”。

1.4 测试发布

将资源包导入到手机上进行测试，测试无误后，即可发布。（点击查看详细步骤）

2. 手表表盘规格

2.1 390规格

表盘规格为390px*390px，其支持的手表为HONOR手表、华为运动手表GT雅致款。

2.2 454规格

表盘规格为454px*454px，支持的手表为华为运动手表GT、华为运动手表GT活力款。

3. 预览图规格

因为在使用表盘工具新建工程时，必须要导入三张图（预览图2张+缩略图1张）。

所以需要制作两张预览图（储存于Preview目录下），用于主题市场展示，供用户在手机上浏览，分别为：

1.cover.jpg

规格为960px * 960px，用于表盘市场上展示表盘效果，需要jpg格式的图片。

2.icon_small.jpg

规格为390px * 390px，用于图标预览，需要jpg格式的图片。

4. 缩略图，自定义预览图和切图资源说明

4.1 规格说明

缩略图（更换表盘时展示的图片：390规格表盘是216px*216px， 454规格表盘是250px250px)。

自定义预览图（自定义时展示的图片： 390规格表盘是390px*390px 、454规格表盘是454px*454px)。
切片图片资源目录，存放表盘用到的所有png图片文件（每一个可变化的元素都是独立的切图)。

4.2 自定义内容详解

自定义内容由四部分组成：

自定义预览图：自定义时展示的图片。
自定义内容预览图：如步数、心率、电量等可自定义切换元素的预览。
自定义资源：自定义内容预览图的元素切图。
边框资源：突出可自定义区域。

注意：

1. 自定义预览图需做以下两步处理。

将可自定义区域挖空+加一层60%的黑色的蒙层。

2. 一个表盘最多同时支持16个自定义内容、每个自定义下的图层不超过5层。

3. 自定义区域必须添加一个边框，突出可自定义的区域。

4. 自定义表盘预览图必须同时具备自定义预览图、自定义内容预览图、边框资源。

5. 自定义内容预览图、边框资源的层级在自定义预览图的下方，是透过挖空部分呈现。

5. 表盘数据显示

6. Widget控件类型

Widget控件目前支持7种控件，如下：

IMAGE：静态图，如背景图、图标等。
TEXTUREMAPPER：图片旋转，如时分秒针等。
CIRCLE：圆形进度条，用于步数、卡路里等的目标完成进度显示。
LINE：线形进度条，用于步数、卡路里等的目标完成进度显示。
TEXTAREAWITHONEWILDCARD：动态文本，用于显示变化的文字，如步数、心率等的数值。
SELECTIMAGE：图片播放，随着订阅的数据类型的数据改变，显示不同的图片，可用于天气、日期、星期等播放。
TEXTAREAWITHTWOWILDCARD：带连接符的动态文本，如：XX/XX格式的日期显示，XX%格式的电量百分显示。

7. 测试、自检和发布流程

7.1 测试

测试步骤如下：

第1步：将打包好的表盘.hwt保存到手机中（资源包后缀名为.hwt，如24-hour_Time.hwt，资源包命名不能包含中文，只能包含字符、数字）；

第2步：安装并登陆华为运动健康APP beta版本：下载HiHealthApp10.1.1.001-china-lang-beta

注：1. APP beta版本必须是最新版本；该版本为测试版，如果下载之后安装失败，请先把应用市场的运动健康版本卸载再安装测试版本；

2. 登入的华为帐号必须是开通了设计师的收费权限

第3步：APP扫码绑定手表，进入【我的】-【我的设备】-【表盘市场】，加载已保存到手机的表盘资源包，并选择安装到手表上；

第4步：在手表上查看表盘效果；

如何更换表盘？

在测试表盘的时候，只能向手机导入表盘包进行更换。但是在平时使用手表时，点开运动健康，在设备一栏里找到手表相应型号，通过蓝牙连接。同步的表盘，可以在手表侧长按，呈现缩略图状态，左右滑动，更换表盘。

7.2 自检

为了确保您尽快通过审核，在发布之前，需要您自检自查。（详情点击）

7.3 发布

点击查看详细发布流程。