hig-components-controls by raintree-technology/apple-hig-skills
npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-controls提问前请检查 .claude/apple-design-context.md。利用现有上下文,仅询问未涵盖的信息。
清晰呈现当前状态。 用户必须始终能看到当前选择的内容。开关显示开/关状态,分段控件高亮显示活动段,选择器显示当前选择项。
优先使用标准系统控件。 内置控件提供一致性和无障碍访问支持。自定义控件会引入学习成本,并可能破坏辅助功能。
开关用于二元状态。 开或关。在设置类界面中,更改立即生效。在模态表单中,更改在确认后提交。
分段控件用于互斥选项。 适用于 2-5 个项目,重要性大致相等,标签简短。
滑块用于连续值。 当精确的数值输入不是关键时使用。为范围端点提供最小/最大标签或图标。
选择器用于长选项列表。 当选项过多不适合分段控件时使用。适用于日期、时间、结构化数据。
步进器用于小范围、精确的调整。 按固定步长递增/递减。在步进器旁边显示当前值,并设置合理的最大/最小边界。
文本字段用于简短的单行输入。 文本视图用于多行输入。根据预期输入类型(电子邮件、URL、数字)配置键盘类型。
组合框:文本输入 + 选择列表。 适用于 macOS。当允许自定义值时,可以输入值或从预定义列表中选择。
令牌字段:将离散值显示为视觉令牌。 适用于 macOS。用于电子邮件收件人、标签或离散项目的集合。
仪表和评分指示器用于显示数值。 仪表显示范围内的一个值。评分指示器显示评分(通常是星形)。仅用于显示;如需输入,请使用其交互式变体。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 参考 | 主题 | 核心内容 |
|---|---|---|
| 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 | 仪表 | 水平指示器,范围显示 |
由 Raintree Technology 构建 · 更多开发者工具
每周安装量
73
代码仓库
GitHub 星标数
29
首次出现
2026年2月15日
安全审计
安装于
opencode71
github-copilot69
codex68
cursor68
gemini-cli67
amp67
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Clear current state. Users must always see what is selected. Toggles show on/off, segmented controls highlight the active segment, pickers display the current selection.
Prefer standard system controls. Built-in controls provide consistency and accessibility. Custom controls introduce a learning curve and may break assistive features.
Toggles for binary states. On or off. In Settings-style screens, changes take effect immediately. In modal forms, changes commit on confirmation.
Segmented controls for mutually exclusive options. 2-5 items, roughly equal importance, short labels.
Sliders for continuous values. When precise numeric input is not critical. Provide min/max labels or icons for range endpoints.
Pickers for long option lists. Too many options for a segmented control. Works well for dates, times, structured data.
Steppers for small, precise adjustments. Increment/decrement in fixed steps. Display current value next to the stepper with reasonable min/max bounds.
Text fields for short, single-line input. Text views for multi-line. Configure keyboard type to match expected input (email, URL, number).
Combo boxes: text input + selection list. macOS. Type a value or choose from a predefined list when custom values are valid.
Token fields: discrete values as visual tokens. macOS. For email recipients, tags, or collections of discrete items.
Gauges and rating indicators display values. Gauges show a value within a range. Rating indicators show ratings (often stars). Display-only; use interactive variants for input.
| Reference | Topic | Key content |
|---|---|---|
| controls.md | General controls | States, affordance, system controls |
| toggles.md | Toggles | On/off, immediate effect |
| segmented-controls.md | Segmented controls | 2-5 options, equal weight |
| sliders.md | Sliders | Continuous range, min/max labels |
| steppers.md | Steppers | Fixed steps, bounded values |
| pickers.md |
Built byRaintree Technology · More developer tools
Weekly Installs
73
Repository
GitHub Stars
29
First Seen
Feb 15, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode71
github-copilot69
codex68
cursor68
gemini-cli67
amp67
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装
| Pickers |
| Dates, times, long option sets |
| combo-boxes.md | Combo boxes | macOS, type or select, custom values |
| text-fields.md | Text fields | Short input, keyboard types, validation |
| text-views.md | Text views | Multi-line, comments, descriptions |
| labels.md | Labels | Placement, VoiceOver support |
| token-fields.md | Token fields | macOS, chips, tags, recipients |
| virtual-keyboards.md | Virtual keyboards | Email, URL, number keyboard types |
| rating-indicators.md | Rating indicators | Star ratings, display-only |
| gauges.md | Gauges | Level indicators, range display |