关于 hig-components-status
hig-components-status 是一项运用 Apple HIG 指导进度指示器、状态栏和活动圆环设计的技能。它帮助设计师与开发者选择指示方式,并考虑时机、无障碍和平台行为。
主要功能
- 01进度指示器选择建议
- 02时机与动画建议
- 03无障碍指导
- 04状态栏与安全区域指导
- 05活动圆环使用指导
适用场景
- 01为时长已知或未知的操作选择进度反馈
- 02规划长时间操作的无障碍状态更新
- 03设计沉浸式内容中的状态栏行为
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ raintree-technology/ hig-doctor --skill hig-components-status安装后在 Claude Code 中输入/hig-components-status确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/activity-rings.mdprogress-indicators.mdstatus-bars.md详细介绍
Apple HIG:状态组件
提问前先检查 .claude/apple-design-context.md。使用已有上下文,只询问尚未涵盖的信息。
核心原则
-
操作超过一两秒时,应显示进度。
-
已知时长或百分比时,使用确定性进度。 填充式进度条可以让用户清楚了解剩余工作量。适用于下载、上传或任何可衡量的流程。
-
时长未知时,使用不确定性进度。 旋转指示器表示任务正在进行,但不承诺完成时间。适用于结果难以预测的网络请求。
-
优先使用进度条,而不是旋转指示器。 确定性进度让人感觉更快,也更值得信任。
-
将指示器放在内容即将出现的位置。 在内容区域附近内嵌显示进度,而不是放在模态窗口中或远处。
-
不要叠加多个指示器。 将同时进行的操作合并为一个表示方式,或只显示最相关的操作。
-
没有充分理由时,不要隐藏状态栏。 仅在沉浸式体验中隐藏状态栏,例如全屏媒体、游戏和 AR。
-
让状态栏样式与内容相匹配。 使用浅色或深色样式,确保对比度充足。
-
遵守安全区域。 状态栏后方不得放置交互内容。
-
退出沉浸式场景后,及时恢复状态栏。
-
活动圆环仅用于活动、锻炼和站立目标。 不要将圆环隐喻用于无关数据。
-
遵循活动圆环的颜色惯例。 红色(活动)、绿色(锻炼)和蓝色(站立)与 Apple Fitness 密切相关。
-
使用 HealthKit API 获取活动数据,而不是手动跟踪。
-
圆环闭合时,通过动画和触觉反馈庆祝目标达成。
参考索引
| 参考资料 | 主题 | 主要内容 |
|---|---|---|
| progress-indicators.md | 进度条和旋转指示器 | 确定性与不确定性进度、内嵌位置、时长 |
| status-bars.md | iOS/iPadOS 状态栏 | 系统信息、可见性、样式、安全区域 |
| activity-rings.md | watchOS 活动圆环 | 活动/锻炼/站立、HealthKit、健身跟踪、颜色 |
输出格式
- 指示器类型建议,并说明理由(确定性还是不确定性)。
- 时机与动画指南——时长阈值、动画样式、过渡效果。
- 无障碍功能——VoiceOver 进度播报、实时区域更新。
- 针对各平台的行为。
要询问的问题
- 时长已知还是未知?
- 涉及哪些平台?
- 操作通常需要多长时间?
- 使用系统级还是应用内指示器?
相关技能
- hig-components-system——显示进度或状态的小组件和复杂功能
- hig-inputs——触发进度状态的手势(下拉刷新)
- hig-technologies——用于活动圆环数据的 HealthKit;用于进度播报的 VoiceOver
由 Raintree Technology 构建 · 更多开发者工具