关于 hig-components-controls
面向 Apple 平台界面设计任务的技能,依据 Apple HIG 为选择和输入控件提供建议。涵盖控件选择、状态管理、验证与 VoiceOver 无障碍要求。
主要功能
- 01比较选择与输入控件并给出理由
- 02指导状态呈现及变更时机
- 03说明验证错误的处理方式
- 04涵盖 VoiceOver 标签与提示
- 05提供各类控件的参考索引
适用场景
- 01为固定选项选择合适的控件
- 02规划表单输入与状态提交方式
- 03检查控件的 VoiceOver 支持
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ sickn33/ agentic-awesome-skills --skill hig-components-controls安装后在 Claude Code 中输入/hig-components-controls确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/gauges.mdlabels.mdcombo-boxes.mdsliders.mdsteppers.mdpickers.mdrating-indicators.mdcontrols.mdtext-fields.mdtext-views.mdtoken-fields.mdvirtual-keyboards.mdtoggles.mdsegmented-controls.md详细介绍
Apple HIG:选择和输入控件
提问前,请先检查 .claude/apple-design-context.md。使用已有上下文,只询问尚未涵盖的信息。
核心原则
-
明确显示当前状态。 用户必须始终能看到当前选中的内容。切换开关显示开或关,分段控件突出显示当前选中的分段,选择器显示当前选择。
-
优先使用标准系统控件。 内置控件能提供一致的体验和无障碍支持。自定义控件会带来学习成本,也可能影响辅助功能。
-
二元状态使用切换开关。 即开或关。在设置类屏幕中,更改会立即生效。在模态表单中,更改会在确认后提交。
-
密切相关的选项使用分段控件。 通常选项数量较少;macOS 还支持多选和瞬时操作。控件的选择行为和操作行为应保持一致。
-
连续数值使用滑块。 适用于不需要精确数值输入的情况。为范围端点提供最小值/最大值标签或图标。
-
选项列表较长时使用选择器。 选项过多,不适合放入分段控件。适用于日期、时间和结构化数据。
-
小幅精确调整使用步进器。 按固定步长递增或递减。将当前值显示在步进器旁,并设置合理的最小值/最大值。
-
简短的单行输入使用文本字段。 多行输入使用文本视图。将键盘类型设置为符合预期输入的类型(电子邮件、URL、数字)。
-
组合框:文本输入+选择列表。 适用于 macOS。当自定义值有效时,用户可以输入数值或从预定义列表中选择。
-
令牌字段:将离散值显示为可视令牌。 适用于 macOS,可用于电子邮件收件人、标签或离散项集合。
-
仪表和评分指示器用于显示数值。 仪表显示范围内的数值。评分指示器显示评分(通常为星级)。这两者仅用于显示;需要输入时,应使用可交互的变体。
参考索引
| 参考 | 主题 | 核心内容 |
|---|---|---|
| controls.md | 系统控件 | 控制中心、锁定屏幕和操作按钮控件 |
| toggles.md | 切换开关 | 开/关、立即生效 |
| segmented-controls.md | 分段控件 | 2-5 个选项、权重相同 |
| sliders.md | 滑块 | 连续范围、最小值/最大值标签 |
| steppers.md | 步进器 | 固定步长、有界数值 |
| pickers.md | 选择器 | 日期、时间、较长的选项列表 |
| combo-boxes.md | 组合框 | macOS、输入或选择、自定义值 |
| text-fields.md | 文本字段 | 简短输入、键盘类型、验证 |
| text-views.md | 文本视图 | 多行内容、评论、描述 |
| labels.md | 标签 | 位置、VoiceOver 支持 |
| token-fields.md | 令牌字段 | macOS、标签块、标签、收件人 |
| virtual-keyboards.md | 虚拟键盘 | 电子邮件、URL、数字键盘类型 |
| rating-indicators.md | 评分指示器 | 星级评分、仅用于显示 |
| gauges.md | 仪表 | 级别指示器、范围显示 |
输出格式
- 控件建议及理由,并说明其他方案为何不太合适。
- 状态管理——控件如何传达当前状态,以及更改是立即生效还是在确认后生效。
- 验证方式——何时显示错误,以及如何说明规则。
- 无障碍——VoiceOver 的标签、特征和提示。
要询问的问题
- 数据类型是什么?(布尔值、从固定集合中选择、数值、自由格式文本?)
- 有多少个选项?
- 面向哪些平台?(组合框和令牌字段仅适用于 macOS)
- 是设置屏幕还是内嵌表单?
相关技能
- hig-components-menus -- 与选择控件互补的按钮和弹出式按钮
- hig-components-dialogs -- 包含表单的工作表和弹出窗口
- hig-components-search -- 采用相同文本输入模式的搜索字段
- hig-inputs -- 与控件进行键盘、指针和手势交互
- hig-foundations -- 控件样式的排版、颜色和布局
由 Raintree Technology 构建 · 更多开发者工具
何时使用
当需要执行概述中所述的工作流或操作时,可使用此技能。
示例
用户请求:
为 iPhone 应用中的五个相关筛选条件选择使用选择器还是分段控件,并说明状态和 VoiceOver 行为。
限制
- 仅当任务明确符合上述范围时,才使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准,请停止并寻求澄清。
参考范围
随附的 Apple 文档是静态快照;在进行平台特定实现之前,请检查链接的主要页面以及目标 OS/API 的可用性。controls.md 页面介绍的是 WidgetKit 系统控件,并非所有应用内输入控件。评分指示器参考介绍的是 macOS NSLevelIndicator,它可以编辑;其他平台上的自定义评分 UI 属于单独的设计。可视标签不能替代无障碍名称。键盘类型和格式化器有助于输入,但不能替代区域设置感知的验证;安全字段也不会加密存储或传输的数据。此处未测试任何 Apple 运行时或图像资源的可用性。