小米手环表盘设计流程与部分思路（满满干货）

本文简介

Hello大家好，我是YcFeller，今天给大家带来一个小米手环表盘设计流程与部分思路，

首先，我们在接触小米手环表盘的设计时，首先要拥有一块自己的小米手环，这样才能在后续的制作测试中有更好的设计参考。这篇文章将会带领大家从头设计一款动态表盘，主要面向一些新手想要入门但是又不知从何下手的未来大佬们，同时欢迎各位大佬指正文中有误部分，个人观点仅供参考（Doge狗头保命）！

同时，本文的最后也会免费分享一些本人拙作的设计稿，感兴趣的大家可以阅读完后自己上手修改尝试！

准备工作

在我们制作一个表盘之前，最重要的就是对表盘的样子需要有一个具体的参考，也就是我们的设计图（原型），这个时候就需要一些设计平台供我们去将我们心中的想法具象成一个可见的画面，下面是我常用的一些设计平台以及我的设计历程分享。

设计平台分享

1、Canva可画设计平台 官网：首页 – Canva可画

这也是我最开始使用的一个设计平台，但是最终因为收费项目太多，且灵活性较小所以没有再使用了，不过对新手还是比较友好的，可以去可以去尝试使用一下；

2、Mastergo 莫高设计 官网：https://mastergo.com/

MasterGo 是一款基于云端的 UI/UX 设计与协作工具，支持多人实时在线编辑、设计稿一键生成代码，帮助团队高效完成从设计到开发的无缝衔接。
这个程序本身是面向团队及企业的，所以现阶段收费非常高，不过还是有个人免费的额度的。

3、即时设计 官网：https://js.design/

即时设计是一款国产、基于云端的 UI/UX 设计协作平台，支持多人实时在线编辑、组件级设计系统管理、一键切图与代码交付，并能无缝衔接产品经理、设计师与前端工程师的协作流程，帮助团队高效完成从原型到开发的全链路工作。

这也是我目前比较常用的一个平台不过优缺点也很明显：优点就是这个平台是免费的团队可以直接协作使用，但是缺点就是这个平台是基于js开发的，所以说如果你的图层太多使用起来会比较卡顿。

不过平台免费，这点小问题还是没什么的。我的极简表盘就是使用即时设计设计的😍😍

设计前提：确定主题

在正式开始设计之前，首先你的脑子里必须要有一个表盘样式的确切想法：就是要做什么东西，做什么样子。
这里我就拿一个我准备出但是还没有制作的表盘做例子：

确定好主题后，就继续开始下一步，
在这里，我们的“桃花”就是表盘的核心内容，后续的颜色样式以及配图就都是围绕这个核心内容来设计的。

如果说我还要设计一个“八重神子”的表盘，那么下一步要做的就是构思与类型确认，下一步我就会带大家来完成这个动态表盘的完整设计。

表盘设计三要素（也不一定）

在上一步我们确认了表盘的主题，那么接下来我们就要了解：一个表盘到底应该包含哪些元素？当然你怎么舒服怎么来（Doge）

在了解这些之后我们就可以开始着手表盘的设计了。

开始表盘设计

这里我们以小米手环9Pro的屏幕尺寸以及圆角参数，通过Mastergo平台进行设计演示。
将会使用的参考表盘：《全屏动态八重神子》

一、表盘尺寸了解

• 小米手环9：192px*490px 圆角999
• 小米手环9Pro/8Pro：336px*480px 圆角48
• 小米手环10：212px*520px 圆角104

二、找素材

在之前我们已经确定了表盘的主题，接下来就要围绕这个主题去寻找我们的“核心元素”。

在构思阶段我们就已经决定了我们准备制作一个全屏动态表盘，那么接下来我们就可以去找一些视频作为接下来表盘的背景，比如B站啊Wallpaper啊什么的都就可以去尝试找一找。

这里我在找素材时用到的关键词有：八重神子动态壁纸，八重神子热门壁纸，八重神子动态视频；
这里大家自由发挥自己的渠道，不过有一点是需要注意的：

这里我就找到了一个b站中的合适素材：https://www.bilibili.com/video/BV19V4y1b72r/?spm_id_from=333.337.search-card.all.click&vd_source=262d9df49696a69971939b106f312cb6

找到之后，就需要导出为MP4到本地备用！我的习惯就是新建统一的文件夹，分设备与素材类型存储素材；

这里就会有一个问题，视频能不能放进设计稿直接设计？

当然不行！

这里我们就可以使用一些截图工具截一帧作为设计的参考背景，注意截图需要截完整不要只截一小部分，这是为了给后续的设计留容错！千万注意！

暂停并直接使用截图工具截取蓝色框的全部内容。

因为我们的表盘需要的素材不多，所以至此核心素材的寻找完成。若大家想加入更多的元素到表盘中，就在这一步骤完成！这里只是一个演示，具体还是要看大家自己的想法哦~

三、开始设计

接下来我将会带大家过一遍设计流程，会弄的直接跳着看就行~主要给刚入门的伙伴们看看！

首先打开我们的“马斯特勾”Mastergo设计平台，并注册登录账号打开主要页面；
映入眼帘的就是一坨界面，这里我们新手什么都不要管，直接点击创建设计文件：

然后我们就要开始创建表盘的图层容器，这里我们继续参考图片操作~

不懂的就自己研究一下并熟悉一下操作，这里不做过多的赘述！

接下来我们直接将刚刚的视频截图放入并调整大小。

这里只分享一些可能需要注意的事项：

1、不管是时间还是数字，设计时最好使用如089一类的数字做示例，它们比较饱满后续在制作表盘时方便对齐；

2、制作素材切图时，边框不要太小以保证导出时的元素展示完整；图中这种就是有问题的，需要调整为右侧的形式。

3、导出时间切图的时候需要注意保持尺寸一致，这里就可以先创建一个“0”的文本并确认字体并调整好宽高，再右键创建一个组，随后复制这个组并修改即可~

4、在导出时最好保持图中放大倍数为“1x”这样才是原始尺寸，不然导出尺寸就会与设计图有偏差。同理，如果你想导出你的宣传图就可以调大一点保证清晰；

5、待补充

接下来就开始设计其他的元素设计与布局，这里就不为大家展示了，只分享一下思路（有AI润色，但是本人还是写了很多的😘）：

表盘的后续设计，先把三要素（时、分、秒）钉死，再谈“好看”。

颜色是第一道门槛——淡红底撞翠绿字，想不辣眼睛都难，所以务必保持色相、明度、饱和度的和谐；实在没灵感，就去扒一扒米坛啊、AstroBox、表盘自定义工具等等上面的的热门案例，研究人家怎么在同一色系里玩层次、怎么用留白让信息透气。

布局和动效同理，元素之间留足呼吸感，动效节奏别抢阅读焦点，保证“抬腕一瞥”就能抓到核心数据。对刚入门的朋友，先别急着发布可以多打磨一下，把“不乱配”当作铁律：背景、元素、数字至少保持同一冷暖基调；时间、日期、电量各司其职，字号层级拉开，别让视线迷路。

等你把“清晰 + 统一”做成肌肉记忆，再去尝试撞色、插画、微交互，就会发现：审美一旦被训练出来，后续怎么迭代都是事半功倍。

其次就是对设计软件的熟练，不说闭着眼睛就会用，至少要保证基础功能都会用，对于容器、分组、图形、文字等的认知清晰知道哪个该用在哪里，而不是胡乱一顿搓导致设计稿成了一坨这对后期的修改迭代是非常不友好的！

导出设计图

在完成设计之后我们就需要导出你的设计图即可，最好导出“1x”保证可以直接放进制作软件中做参考~或者做预览图也行！

结语

设计是很难的，想设计出一个好看又受欢迎的表盘是不容易的，我们要尊重那些努力的人！

最终送大家一句话，设计是一门艺术，心中有想法手中技术才是硬道理。目前我也在努力的学习当中！希望大家在开始接触这一圈子后保持一份热爱的心，一起加油！

资源分享

设计稿

八重神子环10重构版本设计稿（Mastergo设计稿）

椿动态表盘设计稿（Mastergo设计稿）

Xr缤纷小米设计表盘设计稿（Mastergo设计稿）

统一查看链接（注册评论后查看！感谢理解！）：

投入巨大，在此直接免费分享！若需要下载版本请加入我们的交流群交流！！！

万分感谢你的阅读！

QQ交流群

QQ群号：758279876