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. 文本框用于短单行输入。文本视图用于多行输入。需根据预期输入类型配置键盘（如邮箱、网址、数字键盘）。
  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虚拟键盘邮箱、网址、数字键盘类型
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 构建 · 更多开发者工具