Communitygithub.com

Garmin屏幕设计

设计和审查Garmin手表屏幕显示内容,涵盖218至466像素的圆形屏幕,AMOLED与64色MIP调色板,位图字体,适配槽位的文本,弧线,图标以及白色背景。在绘制Connect IQ表盘、数据字段或应用屏幕时,或当文本、颜色或放置在某些手表上看起来不对时使用。

Garmin屏幕设计 是什么?

这个技能确保一个设计在每块圆形Garmin屏幕上都能良好呈现,从218像素的MIP Forerunner到466像素的AMOLED fēnix。在某一款手表上看起来正确的屏幕只是初稿。它支持所有九种Connect IQ圆形屏幕尺寸(218、240、260、280像素为MIP 64色,360、390、416、454、466像素为AMOLED),并强调针对每种尺寸至少测试一款手表。该技能的核心原则包括:使用测量高度而非固定像素进行定位,因为AMOLED字体在相同标称尺寸下比MIP字体更高;在数字显示中使用自定义位图字体以确保清晰度;避免在需要居中的字体中包含重音符;检查每个数字是否清晰可辨(如1和7不与其他字符混淆);确保每个标签在所有语言下都适配其槽位;手动为MIP屏幕选择64色调色板中的颜色,避免编译器不良舍入;使用drawArc绘制平滑弧线;确保移动标记不遮挡其指向的内容;以及按正确分辨率绘制启动图标。该技能主要面向使用Garmin Connect IQ平台和Monkey C语言的开发者,帮助他们创建跨多种手表型号视觉一致且功能可靠的表盘、数据字段和应用屏幕。它假定用户熟悉Garmin的开发者工具和SDK,并提供了指向screens.md、fonts.md和colors.md等参考文件的链接。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jk0bson/garmin-skills/tree/main/skills/garmin-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Garmin屏幕设计 是做什么的?

本技能确保一个设计在每块圆形Garmin屏幕上都能良好呈现,从218像素的MIP Forerunner到466像素的AMOLED fēnix。在某一款手表上看起来正确的屏幕只是初稿。

Monkey C行为属于garmin-app。屏幕截图属于garmin-simulator。

为九种屏幕尺寸设计,每种测试一款

圆形Connect IQ屏幕分为218、240、260、280像素(MIP,64色)和360、390、416、454、466像素(AMOLED)。在屏幕完成前,针对每种尺寸各找一款手表,用能够显示的最长值运行测试(参见screens.md)。

使用测量高度而非固定像素进行定位

AMOLED字体在相同标称尺寸下比MIP字体更高。使用槽位分数和dc.getFontHeight()进行定位,并在行高已被修剪为字形高度的字体上使用TEXT_JUSTIFY_VCENTER进行居中对齐。

对重要的数字使用自己的位图字体

系统字体因手表而异,许多小屏幕没有矢量字体。为每个屏幕尺寸生成一个BMFont .fnt + .png,仅包含你绘制的字符,在颜色和Alpha通道中都存储字形覆盖信息(否则在手表上无法实现抗锯齿),并将行高修剪为字形高度(参见fonts.md)。

避免在居中的字体中包含重音符

字符集包含É或À的字体在大写字母上方预留了空间,因此VCENTER会将大写字母放置得过低。某款区域药丸显示“Z4”时偏离中心,直到它拥有了只包含Z、数字和-的专属字体。

检查每个数字是否清晰可辨

某些字体会将1绘制为一条单独的竖线,因此“Z1”会读成“ZI”,“101”会读成“IOI”。在挑选字体前,请放大查看1、7、0和O。如果某个字形不合适,请更换字体或在你的字体生成器中重绘该字形。

每个标签在所有语言下都适配其槽位

针对每种语言,测量每个标签的像素宽度,并与它所在的槽位进行比对。翻译后的标签会变得更长(法语标签曾溢出);请测量,不要想当然。先去掉单位,然后缩写,绝不让两个标签彼此接触(参见screens.md)。

手动选择MIP颜色

MIP屏幕显示64种颜色,通道值仅为00/55/AA/FF。编译器舍入效果很差(曾将棕色变成橄榄绿)。为AMOLED、MIP和白色背景分别维护独立的调色板,并通过人眼从64种颜色中为MIP挑选每种颜色(参见colors.md)。

使用drawArc绘制弧线

用多边形构建的弧线在真实手表上看起来像是手绘的。dc.drawArc绘制的弧线平滑。从某个角度到自身画弧会绘制一个完整圆:请注意防范零长度弧线。

移动的标记不能遮挡它所指向的内容

绘制在文本上的指针或位图会擦除文本。针对每种屏幕尺寸,根据标记周围的文本大小调整标记尺寸;在390像素屏幕上足以看清的指针,在低区域时会触及心率图标。

一次性绘制大图标

以1024像素绘制启动图标,然后使用LANCZOS算法将其缩小到设备compiler.json中列出的每个launcherIcon尺寸,并为每种尺寸保存一个文件到resources-round-WxH/drawables/。对于MIP尺寸,使用64色调色板。

相关技能