Hello，我们又见面了，如你所见，这篇教程是教你设计米环7表盘并制作的
同时，如果你开发小程序，你也可以学习其中的排版和颜色搭配等
（这篇文章主要是针对于电脑端的，手机端可以学一下设计，再用表盘自定义工具做）
一.设计
1.软件选择
(1)设计软件
Figma是一个很有名的设计软件，但是毕竟是国外的嘛，服务器慢等原因是不可避免的，所以现在大批的国内设计软件（网站）冒出来
最有名的便是MasterGo了，这个网站域名是MasterGo.com，用处是设计控件的位置，提升开发效率，轻松地进行UI设计和开发
(2)绘制软件
说到绘制软件就不得不说到Adobe公司了
Adobe公司，是一家以软件设计与开发为主的公司。Adobe于1968年成立于美国加州洛杉矶，是目前世界上最大的图像与视频软件公司之一，有「计算机软件之父」之称。其产品广泛应用于设计、多媒体制作、出版等领域。旗下的软件包括 Photoshop、 Illustrator、 InDesign、 Premiere Pro等。
Photoshop主要用于绘制图形，可利用画笔，颜料，橡皮等工具来完成绘图。使用图层和蒙版可以创建新的图像，并可以对图层进行操作，也可利用剪贴板进行复制和粘贴操作。
其中用于绘制图形的便是PS了，PS里也有简易的矢量图绘制工具
(3)模拟器
这个模拟器啊，选择很多，比如gmf的和melianmiko的，以及Zepp官方的
如果你能配置官方的模拟器的话，那当然是最好不过了，如果你电脑不能配置或没时间，我建议你使用melianmiko开发的Zepp Player了，因为它和官方的模拟器功能几乎一模一样
官网https://melianmiko.ru/zepp_player/
下载后解压到C盘根目录
把你的表盘文件解压到/projects/
然后打开ZeppPlayer.exe即可开始表盘的模拟。建议与代码编辑器分屏使用，这样可以方便地进行调试和修改。同时，开启自动保存功能后，在自动保存完成时，ZeppPlayer将自动刷新并显示最新的效果。这将帮助用户更快速地查看和测试表盘设计的效果。
(4)代码编辑器
由于这篇文章是服务于电脑端的，所以我就只说电脑端的编辑工具吧
(1).免费
免费的代码编辑器很多，比如ATOM啊，VSCode啊，NotePad++啊等等等等
我这边还是倾向于VSCode的，当然，如果你电脑运行VSCode卡顿的话，你可以试试NotePad++
(2).付费
推荐Sublime Text，体量非常轻盈
2.MasterGo极速入门
首先，注册并登录MasterGo后
创建一个新项目。接着，将画布尺寸调整为192 x 480，并将圆角设置为95度。
这是作者个人喜欢的尺寸大小，你也可以根据自己的需要进行修改
然后，调整画布颜色为000000，即黑色。这样可以确保设计时不会受到任何干扰。
最后，你可以开始创建各种控件，例如正方形、三角形、图片等，以构建你所需的UI界面。
3.PS入门推荐视频
PS使用的话比较复杂，这里我推荐一些教程视频
入门:https://b23.tv/qGstoEC
极速入门:https://b23.tv/XOVcxnP
二.色彩搭配
前提
要知道纯度就是鲜艳的程度，明度就是明暗，黑白
色轮的图片可以自己搜索
1.临近色
色轮上相邻的颜色，组合在一起非常惊艳。
但是需要注意不要过于刺眼，建议与互补色搭配使用。
2.对比色
指位于色轮上相互补充的颜色，如红色和青绿色、黄色和紫色、橙色和蓝色等。使用对比色可以使元素更加醒目、突出，并增强整体的视觉效果。
3.互补色
互补色指选定颜色在色轮上的对立面的颜色，非常难以协调。如果要使用互补色，需要小心谨慎，确保能够达到理想的效果。
4.冷暖色平衡
需要使用冷色和暖色进行平衡。这样才能让整个色彩搭配更加和谐、舒适。
三.背景与时间的巧妙结合
作为一个业余的表盘设计师，我觉得背景和时间的结合是非常重要的，因为它可以帮助你达到整体和谐的效果，并为用户提供最佳的用户体验。因此，你必须仔细考虑控件的位置和大小，以及颜色也必须与背景和图片相协调。这样可以创造出一个干净整洁、美观实用的表盘，从而为用户提供最佳的体验。如果该表盘属于图片表盘，那么我认为时间控件的占位非常重要。在设计时，应尽可能地使其简洁并且突出图片主体。此外，所有元素都应简洁并且实用，以提供最佳的用户体验。
四.动态表盘的设计
动态表盘的设计可以极大地提升用户的使用体验。
根据表盘自定义工具的下载量前五，我们可以发现原神动态表盘是非常受欢迎的。
其中，可莉表盘的控件颜色与人物颜色采用了临近色，并且控件的摆放位置也和人物完美契合，从而让用户感到无违和感，提供最佳的美学体验。
在设计动态表盘时，我们需要给动态人物一定的“休息空间”，通过微调控件位置，以达到最佳效果
五.制作表盘
谈起制作，你首先要下载小程序载体表盘模板
并且还要入门JavaScript和API，JavaScript的入门我放在下面了
全坛最详细的开发Zepp OS小程序教程
至于api，想必你肯定看得懂官方文档（看不懂可以私信我），但是你大概不会用，我给举个例子
像这段代码，我们需要把
去掉，然后将底部的
去掉
然后直接把小程序表盘模板解压到模拟器的projects/
用vscode打开文件夹然后在app.json修改小程序信息
在assets文件夹下增加文件
在watchface目录下的index.js编辑代码
同时，如果你开发小程序，你也可以学习其中的排版和颜色搭配等
（这篇文章主要是针对于电脑端的，手机端可以学一下设计，再用表盘自定义工具做）
一.设计
1.软件选择
(1)设计软件
Figma是一个很有名的设计软件，但是毕竟是国外的嘛，服务器慢等原因是不可避免的，所以现在大批的国内设计软件（网站）冒出来
最有名的便是MasterGo了，这个网站域名是MasterGo.com，用处是设计控件的位置，提升开发效率，轻松地进行UI设计和开发
(2)绘制软件
说到绘制软件就不得不说到Adobe公司了
Adobe公司，是一家以软件设计与开发为主的公司。Adobe于1968年成立于美国加州洛杉矶，是目前世界上最大的图像与视频软件公司之一，有「计算机软件之父」之称。其产品广泛应用于设计、多媒体制作、出版等领域。旗下的软件包括 Photoshop、 Illustrator、 InDesign、 Premiere Pro等。
Photoshop主要用于绘制图形，可利用画笔，颜料，橡皮等工具来完成绘图。使用图层和蒙版可以创建新的图像，并可以对图层进行操作，也可利用剪贴板进行复制和粘贴操作。
其中用于绘制图形的便是PS了，PS里也有简易的矢量图绘制工具
(3)模拟器
这个模拟器啊，选择很多，比如gmf的和melianmiko的，以及Zepp官方的
如果你能配置官方的模拟器的话，那当然是最好不过了，如果你电脑不能配置或没时间，我建议你使用melianmiko开发的Zepp Player了，因为它和官方的模拟器功能几乎一模一样
官网https://melianmiko.ru/zepp_player/
下载后解压到C盘根目录
把你的表盘文件解压到/projects/
然后打开ZeppPlayer.exe即可开始表盘的模拟。建议与代码编辑器分屏使用，这样可以方便地进行调试和修改。同时，开启自动保存功能后，在自动保存完成时，ZeppPlayer将自动刷新并显示最新的效果。这将帮助用户更快速地查看和测试表盘设计的效果。
(4)代码编辑器
由于这篇文章是服务于电脑端的，所以我就只说电脑端的编辑工具吧
(1).免费
免费的代码编辑器很多，比如ATOM啊，VSCode啊，NotePad++啊等等等等
我这边还是倾向于VSCode的，当然，如果你电脑运行VSCode卡顿的话，你可以试试NotePad++
(2).付费
推荐Sublime Text，体量非常轻盈
2.MasterGo极速入门
首先，注册并登录MasterGo后
创建一个新项目。接着，将画布尺寸调整为192 x 480，并将圆角设置为95度。
这是作者个人喜欢的尺寸大小，你也可以根据自己的需要进行修改
然后，调整画布颜色为000000，即黑色。这样可以确保设计时不会受到任何干扰。
最后，你可以开始创建各种控件，例如正方形、三角形、图片等，以构建你所需的UI界面。
3.PS入门推荐视频
PS使用的话比较复杂，这里我推荐一些教程视频
入门:https://b23.tv/qGstoEC
极速入门:https://b23.tv/XOVcxnP
二.色彩搭配
前提
要知道纯度就是鲜艳的程度，明度就是明暗，黑白
色轮的图片可以自己搜索
1.临近色
色轮上相邻的颜色，组合在一起非常惊艳。
但是需要注意不要过于刺眼，建议与互补色搭配使用。
2.对比色
指位于色轮上相互补充的颜色，如红色和青绿色、黄色和紫色、橙色和蓝色等。使用对比色可以使元素更加醒目、突出，并增强整体的视觉效果。
3.互补色
互补色指选定颜色在色轮上的对立面的颜色，非常难以协调。如果要使用互补色，需要小心谨慎，确保能够达到理想的效果。
4.冷暖色平衡
需要使用冷色和暖色进行平衡。这样才能让整个色彩搭配更加和谐、舒适。
三.背景与时间的巧妙结合
作为一个业余的表盘设计师，我觉得背景和时间的结合是非常重要的，因为它可以帮助你达到整体和谐的效果，并为用户提供最佳的用户体验。因此，你必须仔细考虑控件的位置和大小，以及颜色也必须与背景和图片相协调。这样可以创造出一个干净整洁、美观实用的表盘，从而为用户提供最佳的体验。如果该表盘属于图片表盘，那么我认为时间控件的占位非常重要。在设计时，应尽可能地使其简洁并且突出图片主体。此外，所有元素都应简洁并且实用，以提供最佳的用户体验。
四.动态表盘的设计
动态表盘的设计可以极大地提升用户的使用体验。
根据表盘自定义工具的下载量前五，我们可以发现原神动态表盘是非常受欢迎的。
其中，可莉表盘的控件颜色与人物颜色采用了临近色，并且控件的摆放位置也和人物完美契合，从而让用户感到无违和感，提供最佳的美学体验。
在设计动态表盘时，我们需要给动态人物一定的“休息空间”，通过微调控件位置，以达到最佳效果
五.制作表盘
谈起制作，你首先要下载小程序载体表盘模板
并且还要入门JavaScript和API，JavaScript的入门我放在下面了
全坛最详细的开发Zepp OS小程序教程
至于api，想必你肯定看得懂官方文档（看不懂可以私信我），但是你大概不会用，我给举个例子
像这段代码，我们需要把
JavaScript:
Page({
build(){去掉，然后将底部的
JavaScript:
img.addEventListener(hmUI.event.CLICK_DOWN,(info)=>{
img.setProperty(hmUI.prop.MORE,{
y:200
})
})
}
})然后直接把小程序表盘模板解压到模拟器的projects/
用vscode打开文件夹然后在app.json修改小程序信息
在assets文件夹下增加文件
在watchface目录下的index.js编辑代码
