Communitygithub.com

Garmin 螢幕設計

設計與審查 Garmin 手錶螢幕顯示內容,涵蓋 218 到 466 px 的圓形螢幕、AMOLED 與 64 色 MIP 調色盤、點陣字型、符合其空間的文字、弧形、圖示與白色背景。適用於繪製 Connect IQ 錶面、資料欄位或應用程式畫面,或當文字、顏色或位置在某些手錶上顯示異常時。

Garmin 螢幕設計 是什麼?

此技能旨在確保單一設計能夠在從 218 px MIP Forerunner 到 466 px AMOLED fēnix 等所有圓形 Garmin 螢幕上良好呈現。它強調僅在一款手錶上看起來正確的畫面只算是初稿,設計需針對九種常見螢幕尺寸(218、240、260、280 px 的 64 色 MIP,以及 360、390、416、454、466 px 的 AMOLED)進行驗證。技能提供具體指導方針,包括:使用測量高度而非固定像素進行定位(因 AMOLED 字型可能較高)、建立自訂點陣字型以確保數字清晰可辨(並正確處理字型行高與字符覆蓋範圍)、避免在居中文字的字型中包含重音字符、確保每個標籤在各種語言下都能完整顯示於其配置區域、手動挑選 MIP 色彩以避開編譯器造成的顏色偏差、使用 `drawArc` 繪製平滑弧線、以及確保移動中的標記不會遮蓋其指向的內容。此技能支援所有執行 Connect IQ 的 Garmin 裝置,並與 `garmin-app`(處理 Monkey C 行為)及 `garmin-simulator`(負責畫面截圖)協同運作。

相容平台~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 px MIP Forerunner 到 466 px AMOLED fēnix。在一款手錶上看起來正確的畫面,只算是初稿。

Monkey C 行為屬於 garmin-app。畫面截圖屬於 garmin-simulator。

針對九種螢幕尺寸設計,各測試一款

圓形 Connect IQ 螢幕尺寸包含 218、240、260、280 px(MIP,64 色)以及 360、390、416、454、466 px(AMOLED)。在宣稱畫面完成之前,請針對每種尺寸的各一款手錶,使用其可顯示的最長數值進行測試(screens.md)。

使用測量高度定位,而非固定像素

相同名義尺寸下,AMOLED 字型比 MIP 字型更高。請使用槽位的比例和 dc.getFontHeight() 進行定位,並對行高已修剪至字形的字型使用 TEXT_JUSTIFY_VCENTER 來居中。

對重要數字使用自訂點陣字型

系統字型因手錶而異,許多小型螢幕沒有向量字型。請為每個螢幕尺寸生成一個 BMFont .fnt + .png,僅包含您要繪製的字符,在顏色通道和 Alpha 通道中儲存字形覆蓋範圍(否則在手錶上不會有抗鋸齒效果),並將行高修剪至字形(fonts.md)。

避免在您要居中的字型中包含重音字符

一個包含 É 或 À 的字型會在大寫字母上方保留空間,因此 VCENTER 會將大寫字母置放得過低。一個區域藥丸標示曾因使用包含 Z、數字與 - 的專用字型,才解決了 "Z4" 顯示偏移的問題。

檢查每個數字是否可被正確辨識

某些字型將 1 繪製成 bare stroke,導致 "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 px 上足以閱讀的指針,在低區間時可能會碰到愛心圖示。

一次繪製大型圖示

以 1024 px 繪製啟動器圖示,使用 LANCZOS 演算法將其縮小至裝置 compiler.json 中指定的每個 launcherIcon 尺寸,並將每個尺寸儲存在對應的 resources-round-WxH/drawables/ 目錄中。對於 MIP 尺寸的圖示,請使用 64 色調色盤。

相關技能