Back to Details

hig-components-controls

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple HIG: Selection and Input Controls

Apple HIG：选择与输入控件

Check for 
.claude/apple-design-context.md
before asking questions. Use existing context and only ask for information not already covered.
在提问前检查 
.claude/apple-design-context.md
。使用已有的上下文，只询问未涵盖的信息。

Key Principles

关键原则

  1. 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.
  2. Prefer standard system controls. Built-in controls provide consistency and accessibility. Custom controls introduce a learning curve and may break assistive features.
  3. Toggles for binary states. On or off. In Settings-style screens, changes take effect immediately. In modal forms, changes commit on confirmation.
  4. Segmented controls for mutually exclusive options. 2-5 items, roughly equal importance, short labels.
  5. Sliders for continuous values. When precise numeric input is not critical. Provide min/max labels or icons for range endpoints.
  6. Pickers for long option lists. Too many options for a segmented control. Works well for dates, times, structured data.
  7. Steppers for small, precise adjustments. Increment/decrement in fixed steps. Display current value next to the stepper with reasonable min/max bounds.
  8. Text fields for short, single-line input. Text views for multi-line. Configure keyboard type to match expected input (email, URL, number).
  9. Combo boxes: text input + selection list. macOS. Type a value or choose from a predefined list when custom values are valid.
  10. Token fields: discrete values as visual tokens. macOS. For email recipients, tags, or collections of discrete items.
  11. 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.
  1. 明确当前状态。 用户必须始终看到选中了什么。切换器显示开/关，分段控件突出显示活动段，选择器显示当前选择。
  2. 优先使用标准系统控件。 内置控件提供一致性和可访问性。自定义控件会带来学习曲线，并可能破坏辅助功能。
  3. 切换器用于二元状态。 开或关。在“设置”式屏幕中，更改立即生效。在模态表单中，更改在确认时提交。
  4. 分段控件用于互斥选项。 2-5个项目，重要性大致相等，标签简短。
  5. 滑块用于连续值。 当精确的数字输入不关键时。为范围端点提供最小/最大标签或图标。
  6. 选择器用于较长的选项列表。 选项太多，不适合分段控件。适用于日期、时间、结构化数据。
  7. 步进器用于小而精确的调整。 以固定步长递增/递减。在步进器旁边显示当前值，并设置合理的上下限。
  8. 文本字段用于短的单行输入。 文本视图用于多行输入。配置键盘类型以匹配预期输入（电子邮件、URL、数字）。
  9. 组合框：文本输入 + 选择列表。 macOS。自定义值有效时，可以输入值或从预定义列表中选择。
  10. 令牌字段：将离散值显示为视觉令牌。 macOS。用于电子邮件收件人、标签或离散项目集合。
  11. 仪表和评分指示器显示值。 仪表显示范围内的值。评分指示器显示评分（通常是星形）。仅显示；使用交互变体进行输入。

Reference Index

参考索引

ReferenceTopicKey content
controls.mdGeneral controlsStates, affordance, system controls
toggles.mdTogglesOn/off, immediate effect
segmented-controls.mdSegmented controls2-5 options, equal weight
sliders.mdSlidersContinuous range, min/max labels
steppers.mdSteppersFixed steps, bounded values
pickers.mdPickersDates, times, long option sets
combo-boxes.mdCombo boxesmacOS, type or select, custom values
text-fields.mdText fieldsShort input, keyboard types, validation
text-views.mdText viewsMulti-line, comments, descriptions
labels.mdLabelsPlacement, VoiceOver support
token-fields.mdToken fieldsmacOS, chips, tags, recipients
virtual-keyboards.mdVirtual keyboardsEmail, URL, number keyboard types
rating-indicators.mdRating indicatorsStar ratings, display-only
gauges.mdGaugesLevel indicators, range display
参考主题关键内容
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仪表水平指示器、范围显示

Output Format

输出格式

  1. Control recommendation with rationale and why alternatives are less suitable.
  2. State management -- how the control communicates current state and whether changes apply immediately or on confirmation.
  3. Validation approach -- when to show errors and how to communicate rules.
  4. Accessibility -- labels, traits, hints for VoiceOver.
  1. 控件推荐及理由，并说明替代方案为何不太合适。
  2. 状态管理——控件如何传达当前状态，以及更改是立即应用还是确认时应用。
  3. 验证方法——何时显示错误以及如何传达规则。
  4. 可访问性——标签、特征、VoiceOver提示。

Questions to Ask

要提出的问题

  1. What type of data? (Boolean, choice from fixed set, numeric, free-form text?)
  2. How many options?
  3. Which platforms? (Combo boxes and token fields are macOS-only)
  4. Settings screen or inline form?
  1. 数据类型是什么？（布尔值、固定集合中的选择、数字、自由格式文本？）
  2. 有多少选项？
  3. 目标平台？（组合框和令牌字段仅限macOS）
  4. 设置屏幕还是内联表单？

Related Skills

相关技能

  • hig-components-menus -- Buttons and pop-up buttons complementing selection controls
  • hig-components-dialogs -- Sheets and popovers containing forms
  • hig-components-search -- Search fields sharing text input patterns
  • hig-inputs -- Keyboard, pointer, gesture interactions with controls
  • hig-foundations -- Typography, color, layout for control styling
Built by Raintree Technology · More developer tools
  • hig-components-menus——补充选择控件的按钮和弹出按钮
  • hig-components-dialogs——包含表单的工作表和弹出窗口
  • hig-components-search——共享文本输入模式的搜索字段
  • hig-inputs——键盘、指针、手势与控件的交互
  • hig-foundations——用于控件样式的排版、颜色、布局
由 Raintree Technology 构建 · 更多开发者工具