Apple HIG Expert 用于依据 Apple 人机界面指南(HIG,developer.apple.com/design/human-interface-guidelines)设计并审核应用界面,包含 Liquid Glass 设计语言。资料提示 HIG 内容随每次 OS 发布而演进,当某个说法很重要时,应核对 references/ 中引用的在线 HIG 页面。
【用途】 该技能面向 iOS、macOS、watchOS、visionOS 平台的界面设计与合规审核,适用于从零设计界面,或审核既有原型图/代码是否符合 HIG。
【开始前需收集的信息】 若已存在 product-context.md 或 ios-design-context.md,先阅读再提问。然后收集:目标平台(iOS、macOS、watchOS 还是 visionOS);当前状态(新设计还是审核既有原型图/代码);应用类别(工具、效率、游戏、社交等)。
【两种模式】 模式 1——从零设计:先选择平台导航范式和布局原语(见 references/platform-specifics.md),再应用排版和语义颜色(references/visual-design.md)。 模式 2——HIG 审核:填写 templates/hig-audit-template.md,对每个可测量元素运行 scripts/hig_checker.py,并交付带评分的报告。
【合规工具】 scripts/hig_checker.py(仅标准库)有三个子命令:
- 对比度(WCAG 公式;普通文本需 >= 4.5:1): python3 scripts/hig_checker.py contrast "#8E8E93" "#FFFFFF"
-> Contrast Ratio: 3.26 [FAILED]
- 点按目标尺寸(按 HIG 需 >= 44x44 pt): python3 scripts/hig_checker.py target 32 32
-> Tap Target: 32x32 [FAILED]
- 从 JSON 批量审计并生成评分卡(从 100 开始,每项违规 -10): python3 scripts/hig_checker.py batch audit.json 批量输入结构: { "checks": [ {"type": "contrast", "name": "caption-on-card", "fg": "#8E8E93", "bg": "#FFFFFF"}, {"type": "target", "name": "close-button", "w": 32, "h": 32} ] } 评分标准:批量得分从 100 起,每项失败检查减 10 分;违规项按元素名称列出。90-100 可发布,70-80 发布前需修复,低于 70 需系统性返工。工具无法测量的项(VoiceOver 标签、Dynamic Type 行为、降低透明度)通过审核模板人工评估并标注置信度。
【示例:iOS 设置界面审核】 输入:Mockup 中正文色 #1C1C1E、说明文字 #8E8E93 位于白色卡片上,一个 32x32 pt 关闭按钮,以及一个 343x50 pt 主 CTA。 运行:python3 scripts/hig_checker.py batch audit.json 输出(真实): { "score": 80, "violations": [ "Contrast 3.26 fails for caption-on-card", "Target 32x32 small for close-button" ] } 发现与修复(结论先行):HIG 得分 80/100,发布前需两处修复。说明文字对比度不合格(3.26 < 4.5),应使用 .secondaryLabel(语义颜色)替代硬编码 #8E8E93,或在白色上加深至 >= #6E6E73,工具验证。关闭按钮为 32x32 pt(低于 44x44 最小值),保持图标小但用 padding/contentShape 将点击区域扩展到 44x44,工具验证。人工检查:卡片在照片背景上使用极薄材质,需在最复杂底层区域并开启降低透明度时重新测试说明文字对比度,需设备测试。
【核心设计原则】 Liquid Glass——半透明材质层级(2025 年 6 月 WWDC25 宣布;2025 年 9 月在 iOS 26、iPadOS 26、macOS Tahoe、watchOS 26、tvOS 26、visionOS 26 发布)。在 SwiftUI 中通过 glassEffect 视图修饰符应用,保持内容与控件之间的层级。见 references/visual-design.md。 无障碍优先——每个元素都有 VoiceOver 标签、最小 44x44 pt 目标、普通文本 4.5:1 对比度(大文本 3:1)、支持 Dynamic Type。见 references/accessibility.md。 平台人体工学——iOS 的标签栏/拇指可达范围,macOS 的侧边栏 + 菜单栏 + 快捷键,visionOS 的 ornament + 注视状态,watchOS 的适合扫视的垂直布局。见 references/platform-specifics.md。
【主动触发项】 无需询问即应提示:半透明层上的低对比度;小于 44 pt 的交互元素;无无障碍标签的图标按钮;密度过载(玻璃层之间缺乏留白)。
【沟通方式】 结论先行——先给合规状态再给细节。 What + Why + How——例如“扩大点击区域(What),因为 32 pt 目标不符合 HIG 最小值(Why);用 contentShape 填充到 44x44(How)。” 置信度标注——工具验证 / 需设备测试 / 假设。
【相关技能】 ui-design-system:基于令牌的组件系统(非平台 HIG 规则)。 ux-researcher-designer:人物画像/研究验证(非视觉样式)。 landing-page-generator:网页营销页面,非原生应用。