下面送上一份可直接放进你们团队 Wiki / Notion 的《Wristo 图标规范文档》。语气偏互联网公司年终总结那种干练风，也带一点轻盈的画面感，让整个文档像一台精密的图标工厂在安静运转。 （已适配你现有的 Icon Library / Icon Asset / Icon Variant / IconResolver 架构体系。）

🧭 Wristo 图标规范（Icon Design & Asset Standard） #

Wristo 的图标体系是一条从「概念 → 语义 → 形态 → 风格 → 适配」的高速生产线。 本规范用于确保图标在平台内统一、美观、高可维护、可扩展、跨设备稳定显示。

1. 图标分类体系（Icon Taxonomy） #

1.1 顶层分类（Icon Category） #

Wristo 所有图标都归属于以下功能域：

命名规则：icon_{category}_{name} 例如：icon_weather_sunny, icon_system_refresh

2. 图标语义定义（Semantic Definition） #

为了保证跨语言、跨文化也能被正确理解，每个图标都必须绑定语义：

• Semantic ID（全局唯一）
• Meaning（中文 + 英文）
• Usage Context（使用场景）
• Resolver Rule（若为动态图标）

示例：

# icon_battery_level
SemanticID: battery.level
Meaning: 电量等级 / Battery Level
Usage: 在表盘、电量组件、状态指示
ResolverRule: 按区间匹配（0–20, 21–40, 41–60, 61–80, 81–100）

3. 图标绘制规范（Design Guidelines） #

像造精密钟表零件一样，我们为每个图标打磨到统一标准。

3.1 基础网格（Grid） #

• 主网格：24×24dp
• 安全区域：20×20dp
• 圆角：2dp–3dp
• 线宽：2dp（基线），1.5dp 在 AMOLED 上保持清晰）

3.2 对齐规则 #

• 主体必须吸附网格（Grid Snapping）
• 图标光学居中，不强制几何居中
• 对称图标必须精确对称（避免偏 1px）

3.3 线条与笔触 #

• 默认描边图标（Stroke）
• 圆端（Round Cap）+ 圆角连接（Round Join）
• Stroke 宽度按分辨率自适应（IconVariant 自动生成）

3.4 填充版本（Filled） #

用于：

• AMOLED 主题
• 高对比度 UI
• 小尺寸场景（≤ 18dp）

Variant 命名： outline、filled、duotone、gradient

4. 尺寸与分辨率（Multi-Resolution Support） #

Wristo 支持数十种 Garmin 设备，因此资产生成必须自动化。

4.1 输出分辨率 #

默认支持以下尺寸：

• 218×218
• 240×240
• 260×260
• 280×280
• 300×300
• 390×390
• 454×454（AMOLED）

4.2 自动缩放规则 #

为了保证视觉一致性，采用线性缩放 + 手动微调策略：

• Stroke 在 218–300 间按比例缩放
• 在 390–454 间保持肉眼可辨清晰度（必要时额外调粗 0.2–0.5dp）

5. 图标命名规范（Naming Convention） #

5.1 文件命名 #

{category}-{semantic}-{variant}-{size}.png

示例：

weather-rain-outline-218.png
battery-level-80-filled-454.png
system-refresh-outline-260.png

5.2 数据库字段（Icon Library / Asset / Variant） #

• library_code：weather_snow
• asset_code：weather_snow_outline
• variant_code：outline / filled / duotone
• resolution：218 / 240 / 454 …

6. 动态图标（IconResolver 规则） #

动态图标是 Wristo 的灵魂，例如天气、电量、步数成就、心率区间等。

示例 1：电量图标 #

{
  "type": "battery.level",
  "rules": [
    { "range": [0, 20], "icon": "battery_0" },
    { "range": [21, 40], "icon": "battery_25" },
    { "range": [41, 60], "icon": "battery_50" },
    { "range": [61, 80], "icon": "battery_75" },
    { "range": [81, 100], "icon": "battery_100" }
  ]
}

示例 2：天气图标映射 #

（OpenWeather → Garmin → Wristo 自建库）

{
  "type": "weather.condition",
  "mapping": {
    "01d": "sunny_day",
    "01n": "sunny_night",
    "02d": "partly_cloudy_day",
    "10d": "rain_day",
    ...
  }
}

7. 颜色规范（Icon Color System） #

为 AMOLED / MIP 双体系分别定义色板：

7.1 AMOLED（High Contrast） #

• 主色：#FFFFFF
• 辅助蓝：#4EA7F6
• 警告红：#FF5C5C
• 分割线：#FFFFFF44

7.2 MIP（低功耗显示） #

• 纯黑：#000000
• 深灰：#222222
• 反白：#FFFFFF（重要信息）

MIP 模式严禁使用 20% 以下透明度，容易消失。

8. 输出格式（Asset Format） #

8.1 对外发布 #

• PNG（带透明背景）
• 单色 ICON 可使用 SVG（用于 Web 文档）

8.2 编译进 Monkey C #

• 必须转为 CIQ PNG
• 颜色模式：RGB565（自动压缩）

9. 使用规范（Usage Guidelines） #

9.1 尺寸限制 #

• 表盘内通用图标：16–24dp
• 数据卡片图标：14–20dp
• 装饰图标：不限尺寸，但需与视觉主题一致

9.2 禁止事项 #

🚫 不允许拉伸变形 🚫 不允许修改 stroke 🚫 不允许随意换色（必须走 Theme） 🚫 不允许无 Variant 区分的临时输出

10. 工作流（Production Workflow） #

10.1 设计 → 标注 → 导出 #

1. Figma内绘制
2. 使用 Icon Template（自动网格对齐）
3. 一键导出为 SVG
4. 用自动化脚本生成多尺寸 PNG
5. 上传到 Icon Library（DB）

10.2 自动化脚本示例 #

icongen generate --input ./svg --output ./assets \
  --variants outline filled \
  --sizes 218 240 260 280 300 390 454

11. QA 检查项（Checklist） #

📦 附录：图标库命名模板（直接复制用） #

weather_sunny
weather_sunny_outline
weather_sunny_filled

battery_level
battery_level_25
battery_level_50
battery_level_75
battery_level_100

system_refresh
system_sync
system_settings