⌚ 表盘设计师速成文档 #

（新人 0→1→3→10 全流程极速上手）

🥚 第一阶段：认识表盘（Day 1） #

目标：理解表盘是什么，设备差异是什么，能立即开始制作。

1. 表盘本质 #

表盘 = 背景 + 时间数字 + 数据组件（天气/步数/电量/心率） + 交互逻辑 设计师重点是视觉层，需保持：清晰、兼容、低能耗、可读性强。

2. Garmin 设备差异（必须掌握） #

• 屏幕形状：圆形 / 方形
• 屏幕尺寸：218×218 / 240×240 / 390×390 / 454×454 …
• 显示类型：MIP（低功耗） / AMOLED（高饱和）
• 色彩限制：MIP 对比低 → 设计需强对比
• 亮暗屏双版本：A 亮屏 / M 休眠屏

3. 新人必须知道的 6 条铁律 #

• 时间数字必须最大且最清晰
• 背景不能干扰指示信息
• 数据组件之间要留空间
• 背景层高不超过 70% 视觉吸引力（主角是时间）
• 尽量使用等宽数字避免“跳动感”
• 亮屏 & 息屏（A/M 屏）需单独做

🌱 第二阶段：工具与资源（Day 1–3） #

目标：熟悉 Figma 等工具，能做出完整背景和数字。

1. 工具 #

• Figma（必须）
  • 自动布局
  • Tokens管理
  • 导出多规格背景
  • 字体微调
• Photoshop（选）：光影和氛围
• Illustrator（选）：矢量图标

2. 必备资源模板 #

• 一套 设备分辨率画板模板（各机型）
• 数字字体：Number Font（等宽）
• 图标集：天气、心率、步数、电量
• 背景素材模板（光效、渐变、花朵、几何）
• A / M 屏对照模板

如需我可以为你生成完整模板 ZIP。

🚀 第三阶段：入门实操（Week 1） #

目标：能独立完成一个“可上架”的表盘视觉稿。

1. 基础版式（4 种万能布局） #

• 大时间置中（最大众）
• 左侧大时间 + 右侧数据栏
• 上下时间布局 + 中间焦点图形
• 底部时间 + 上方背景主视觉

2. 数字规则 #

• 使用等宽数字
• 中间冒号宽度约为数字宽度的 35%–45%（最佳可读）
• 大时间区域：占画布 50–60%
• 不要在主时间附近堆装饰

3. 颜色规则 #

• MIP 必须：高对比 + 避免浅灰
• AMOLED 可：高饱和 + 光效
• 高亮区域避免覆盖数据

4. 数据组件规范（步数/天气/心率等） #

• 图标统一线宽（通常 2–3px）
• 文本使用中性字体（推荐 Noto Sans SC）
• 组件放置遵循间距体系（8/12/16）
• 避免信息超过 4 个（否则用户看不清）

🧭 第四阶段：高级技巧（Week 2–4） #

目标：做出“专业感”和“品牌化”的设计。

1. 氛围营造 #

• 发光边缘、柔光、径向光
• 窄光束指向时间区域
• 黑金、金属、花卉、渐变高级感主题

2. 花朵系 / 艺术系表盘技巧（你的团队常做的） #

• 花朵主体必须放在边缘或右侧
• 保留视线朝向时间的位置
• 背景淡化 10–30% 避免喧宾夺主
• 遵循“主视觉不压时间”

3. 数字字体高级处理 #

• Outline数字（轮廓）
• Glow数字（轻光晕）
• 半透明数字
• 多材质数字（金属 / 玻璃）

4. 多设备适配方法 #

• 先做 大分辨率（454/390）
• 再缩放到中（240）
• 最后单独调整小屏（218）
• 字体 不能仅“缩放”，需重新排版

🏆 第五阶段：交付标准（Month 1） #

目标：让设计具备“可交付性”与工程的友好度。

1. 输出全套资源 #

• 背景（各尺寸）
• A / M 屏版本
• 图标（SVG）
• 数字字体（SVG 或 PNG Sheet）
• 布局文档（Figma inspect）

2. 设计师与工程协作规范 #

• 所有数据组件位置固定
• 时间区域必须留出安全边距
• 图片不得超过 500–900KB
• 不使用半透明黑背景（MIP 不友好）

🎯 第六阶段：成长路线（3–12 个月） #

新人 → 独立设计师 → 主视觉负责人。

• 1–2 个高质量系列主题（花朵 / 金属 / 新年）
• 多机型快速适配能力
• 独立构建设计体系（字体 / 光效 / 图标库）
• 自己的标志性“系列风格”

🎁 如果你需要，我可以继续生成： #

• ✔ Notion 版《表盘设计师速成手册》
• ✔ 表盘设计训练营任务表（10 天即可上手）
• ✔ 一套可直接使用的 Figma 模板
• ✔ 表盘资源打包 ZIP（背景模板 + 数字模板 + 图标库）
• ✔ 适合新人使用的“表盘设计入门课”文档

告诉我你想要哪一种，我马上为你准备 📦✨