mcpField
H
hig-components-status

hig-components-status

github.com/raintree-technology设计与 UI148654 次安装6 天前更新
代码仓库

关于 hig-components-status

hig-components-status 是一项运用 Apple HIG 指导进度指示器、状态栏和活动圆环设计的技能。它帮助设计师与开发者选择指示方式,并考虑时机、无障碍和平台行为。

主要功能

  1. 01进度指示器选择建议
  2. 02时机与动画建议
  3. 03无障碍指导
  4. 04状态栏与安全区域指导
  5. 05活动圆环使用指导

适用场景

  1. 01为时长已知或未知的操作选择进度反馈
  2. 02规划长时间操作的无障碍状态更新
  3. 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.md
progress-indicators.md
status-bars.md

详细介绍

Apple HIG:状态组件

提问前先检查 .claude/apple-design-context.md。使用已有上下文,只询问尚未涵盖的信息。

核心原则

  1. 操作超过一两秒时,应显示进度。

  2. 已知时长或百分比时,使用确定性进度。 填充式进度条可以让用户清楚了解剩余工作量。适用于下载、上传或任何可衡量的流程。

  3. 时长未知时,使用不确定性进度。 旋转指示器表示任务正在进行,但不承诺完成时间。适用于结果难以预测的网络请求。

  4. 优先使用进度条,而不是旋转指示器。 确定性进度让人感觉更快,也更值得信任。

  5. 将指示器放在内容即将出现的位置。 在内容区域附近内嵌显示进度,而不是放在模态窗口中或远处。

  6. 不要叠加多个指示器。 将同时进行的操作合并为一个表示方式,或只显示最相关的操作。

  7. 没有充分理由时,不要隐藏状态栏。 仅在沉浸式体验中隐藏状态栏,例如全屏媒体、游戏和 AR。

  8. 让状态栏样式与内容相匹配。 使用浅色或深色样式,确保对比度充足。

  9. 遵守安全区域。 状态栏后方不得放置交互内容。

  10. 退出沉浸式场景后,及时恢复状态栏。

  11. 活动圆环仅用于活动、锻炼和站立目标。 不要将圆环隐喻用于无关数据。

  12. 遵循活动圆环的颜色惯例。 红色(活动)、绿色(锻炼)和蓝色(站立)与 Apple Fitness 密切相关。

  13. 使用 HealthKit API 获取活动数据,而不是手动跟踪。

  14. 圆环闭合时,通过动画和触觉反馈庆祝目标达成。

参考索引

参考资料主题主要内容
progress-indicators.md进度条和旋转指示器确定性与不确定性进度、内嵌位置、时长
status-bars.mdiOS/iPadOS 状态栏系统信息、可见性、样式、安全区域
activity-rings.mdwatchOS 活动圆环活动/锻炼/站立、HealthKit、健身跟踪、颜色

输出格式

  1. 指示器类型建议,并说明理由(确定性还是不确定性)。
  2. 时机与动画指南——时长阈值、动画样式、过渡效果。
  3. 无障碍功能——VoiceOver 进度播报、实时区域更新。
  4. 针对各平台的行为。

要询问的问题

  1. 时长已知还是未知?
  2. 涉及哪些平台?
  3. 操作通常需要多长时间?
  4. 使用系统级还是应用内指示器?

相关技能

  • hig-components-system——显示进度或状态的小组件和复杂功能
  • hig-inputs——触发进度状态的手势(下拉刷新)
  • hig-technologies——用于活动圆环数据的 HealthKit;用于进度播报的 VoiceOver

由 Raintree Technology 构建 · 更多开发者工具

评论

支持 Markdown