mcpField
H
hig-components-controls

hig-components-controls

github.com/sickn33设计与 UI48.7k60 次安装1 天前更新
代码仓库

关于 hig-components-controls

面向 Apple 平台界面设计任务的技能,依据 Apple HIG 为选择和输入控件提供建议。涵盖控件选择、状态管理、验证与 VoiceOver 无障碍要求。

主要功能

  1. 01比较选择与输入控件并给出理由
  2. 02指导状态呈现及变更时机
  3. 03说明验证错误的处理方式
  4. 04涵盖 VoiceOver 标签与提示
  5. 05提供各类控件的参考索引

适用场景

  1. 01为固定选项选择合适的控件
  2. 02规划表单输入与状态提交方式
  3. 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.md
labels.md
combo-boxes.md
sliders.md
steppers.md
pickers.md
rating-indicators.md
controls.md
text-fields.md
text-views.md
token-fields.md
virtual-keyboards.md
toggles.md
segmented-controls.md

详细介绍

Apple HIG:选择和输入控件

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

核心原则

  1. 明确显示当前状态。 用户必须始终能看到当前选中的内容。切换开关显示开或关,分段控件突出显示当前选中的分段,选择器显示当前选择。

  2. 优先使用标准系统控件。 内置控件能提供一致的体验和无障碍支持。自定义控件会带来学习成本,也可能影响辅助功能。

  3. 二元状态使用切换开关。 即开或关。在设置类屏幕中,更改会立即生效。在模态表单中,更改会在确认后提交。

  4. 密切相关的选项使用分段控件。 通常选项数量较少;macOS 还支持多选和瞬时操作。控件的选择行为和操作行为应保持一致。

  5. 连续数值使用滑块。 适用于不需要精确数值输入的情况。为范围端点提供最小值/最大值标签或图标。

  6. 选项列表较长时使用选择器。 选项过多,不适合放入分段控件。适用于日期、时间和结构化数据。

  7. 小幅精确调整使用步进器。 按固定步长递增或递减。将当前值显示在步进器旁,并设置合理的最小值/最大值。

  8. 简短的单行输入使用文本字段。 多行输入使用文本视图。将键盘类型设置为符合预期输入的类型(电子邮件、URL、数字)。

  9. 组合框:文本输入+选择列表。 适用于 macOS。当自定义值有效时,用户可以输入数值或从预定义列表中选择。

  10. 令牌字段:将离散值显示为可视令牌。 适用于 macOS,可用于电子邮件收件人、标签或离散项集合。

  11. 仪表和评分指示器用于显示数值。 仪表显示范围内的数值。评分指示器显示评分(通常为星级)。这两者仅用于显示;需要输入时,应使用可交互的变体。

参考索引

参考主题核心内容
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仪表级别指示器、范围显示

输出格式

  1. 控件建议及理由,并说明其他方案为何不太合适。
  2. 状态管理——控件如何传达当前状态,以及更改是立即生效还是在确认后生效。
  3. 验证方式——何时显示错误,以及如何说明规则。
  4. 无障碍——VoiceOver 的标签、特征和提示。

要询问的问题

  1. 数据类型是什么?(布尔值、从固定集合中选择、数值、自由格式文本?)
  2. 有多少个选项?
  3. 面向哪些平台?(组合框和令牌字段仅适用于 macOS)
  4. 是设置屏幕还是内嵌表单?

相关技能

  • 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 运行时或图像资源的可用性。

评论

支持 Markdown