米环7教程 |
您所在的位置:网站首页 › 华为目前最火的表盘下载软件 › 米环7教程 |
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,想必你肯定看得懂官方文档(看不懂可以私信我),但是你大概不会用,我给举个例子
像这段代码,我们需要把 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编辑代码 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |