Apple Hig Advisor

何时使用

• 为苹果生态（iOS / macOS / watchOS / visionOS）从零设计界面，需要选对导航范式、视觉语言与无障碍基线时。
• 审计已有原型或代码，要按 Apple HIG 系统性查违规、给 0-100 合规打分与优先级修复时。
• 触发词：HIG、苹果设计规范、人机界面指南、Liquid Glass、VoiceOver、点击区、对比度、visionOS、SF 字体、Dynamic Type。

不该用的边界：

• 不做跨平台 Web / Android / 桌面（非 Apple）界面设计——HIG 规则不通用。
• 不做品牌识别系统、配色字体规范的「制定」（交给 brand-guidelines），不做前端样式系统落地（交给 frontend-design）。
• 不替代真机/模拟器实测；本技能给规范与量化判据，最终需在 Apple 设备上验证。

步骤 / 指令

开始前先收集上下文（若工作区有 product-context.md / ios-design-context.md 先读再问）：

1. 目标平台：iOS / macOS / watchOS / visionOS？
2. 当前状态：新建项目 还是 审计已有 mockup/代码？
3. 应用品类：工具 / 效率 / 游戏 / 社交…？

两种模式：

• 模式一·从零设计：按苹果三大哲学（清晰 Clarity / 谦让 Deference / 深度 Depth）走原子设计、布局原语与导航范式。
• 模式二·HIG 审计：用打分卡逐项查违规与改进点（见下「示例」的 0-100 评分卡）。

设计三阶段：

阶段1 导航与布局：iOS→Tab Bar/底部工具栏；macOS→侧边栏+菜单栏；
                  visionOS→Ornaments 浮动控件；watchOS→Digital Crown 纵向滚动。
阶段2 视觉样式：San Francisco 字体族 + 语义色 + Liquid Glass 材质。
阶段3 终检：跑 hig_checker 量化对比度/点击区。

核心规范要点：

• Liquid Glass：用材质分层级（ultra-thin 用于 Tab Bar/小浮动按钮，thin 用于菜单/侧边栏，thick 用于 macOS 窗口背景）；vibrancy 不只是透明，是从背景提取主色让文字更可读。
• 字体/间距：用语义文本样式（Title 1、Body、Caption 1），必须支持 Dynamic Type（300% 仍可用）；遵循 8pt 网格（8/16/24/32），标准边距 16 或 24pt。
• 语义色：用 systemBlue / systemRed 等语义色，不硬编码 hex，以支持深浅色与高对比模式。
• 无障碍硬指标：点击区最小 44x44pt；正文对比度 ≥ 4.5:1、大字 ≥ 3:1；每个图标都要有 VoiceOver 标签（用「提交订单」而非「按钮1」）；不能仅靠颜色传达信息（图标+色）。

主动预警（不必等用户问，直接指出）：

• 半透明层压低文字可读性（低对比度）。
• 交互元素 < 44pt（点击区过小）。
• 有图标无无障碍标签（缺语义）。
• 布局过密、缺留白（违背 Deference）。

指令

输出遵循结构化沟通：

• 结论先行——先给 HIG 合规结论，再展开细节。
• What + Why + How——例：「加大内边距(What)，因点击区过小(Why)，改用 12pt 边距(How)」。
• 置信标注——🟢 已验证 / 🟡 中等 / 🔴 推断。

不同请求对应产物：

示例

量化检查脚本 hig_checker.py（保留源命令）：

# 对比度（前景/背景 hex，阈值 4.5:1）
python hig_checker.py contrast "#FFFFFF" "#000000"
# 点击区（宽 高，单位 pt，阈值 44x44）
python hig_checker.py target 32 40
# 批量（JSON：{"checks":[{"type":"contrast","fg":"#...","bg":"#...","name":"x"}, ...]}）
python hig_checker.py batch checks.json   # 输出 {score, violations}，每违规 -10 分

对比度算法核心（WCAG 相对亮度）：

def adjust(c):  # 线性化
    return c/12.92 if c <= 0.03928 else ((c+0.055)/1.055)**2.4
# L = 0.2126*R + 0.7152*G + 0.0722*B；ratio = (L_max+0.05)/(L_min+0.05)

HIG 审计评分卡（满分 100，可直接套用）：

1. 视觉设计与美学      /20  Liquid Glass 材质分层 · SF 字体语义样式 · 语义色 · 8pt 网格
2. 导航与布局          /20  平台原生范式 · iOS 主操作靠底部可达 · 安全区(避开灵动岛/Home条) · 留白
3. 无障碍              /30  VoiceOver 标签+提示 · 点击区≥44pt · Dynamic Type 不裁切 · 对比度≥4.5:1
4. 交互与动效          /20  弹簧式流畅动画 · 触觉反馈 · 标准手势(轻扫/捏合)可预期
5. 平台特性            /10  灵动岛/Live Activities/复杂功能 · macOS 键盘快捷键齐全

判级：🟢 85-100 可上架 · 🟡 70-84 需打磨 · 🔴 <70 高风险（易被审核拒）

注意事项

• 点击区 44x44pt、正文对比度 4.5:1 是硬线，审计先跑脚本量化再下结论，不要凭目测。
• Liquid Glass 例外：背景过于花哨时，为可读性必须降低透明度（vibrancy）；务必在系统「降低透明度」开启下复测。
• 必须支持 Dynamic Type，用 Auto Layout 或 SwiftUI 的 VStack/HStack 自动换行，确保字体放到最大也不裁切。
• 安全区：iOS 元素避开灵动岛与 Home Indicator；macOS 每个主操作要有 Cmd + 键 等价快捷键。
• 灰度/Grayscale 模式下界面仍要可用——别仅靠颜色区分状态。
• 单一职责：本技能给「规范判据 + 量化审计」，不输出可运行的 SwiftUI 工程代码，也不实测真机。

互见

• related：frontend-design（前端样式系统落地，非 Apple 平台 HIG 规则）、brand-guidelines（品牌色/字体规范的制定，非平台规范）、theme-factory（主题/配色批量生成）。
• combines_with：canvas-design——先按 HIG 定平台规范与版式判据，再用其产出具体画面构图。

采编自 alirezarezvani/claude-skills（MIT）。