SuperAPI AI 工具集

hig-components-controls

设计与创作

查看项目

更新于 10-16 08:22

技能介绍

Apple HIG:选择与输入控件

本技能基于 Apple Human Interface Guidelines,为选择与输入类控件提供设计指导。它覆盖从二元开关到多行文本输入的一系列控件,帮助在 Apple 平台界面中做出合理的控件选择。

用途

用于在设计或评审选择与输入交互时,确定应使用哪种控件,并说明选择理由、状态管理方式、验证策略与可访问性处理。

主要能力与核心原则

状态清晰

用户必须始终能看到当前选中了什么。开关显示开/关状态,分段控件高亮当前分段,选择器显示当前选择。

优先使用系统标准控件

内置控件提供一致性与可访问性。自定义控件会引入学习成本,并可能破坏辅助功能。

按场景选择控件

  • 开关(Toggles):用于二元状态,开或关。在设置类屏幕中更改立即生效;在模态表单中,更改在确认时提交。
  • 分段控件(Segmented controls):用于互斥选项,2-5 项,重要性大致相当,标签简短。
  • 滑块(Sliders):用于连续值,当精确数值输入不是关键时;为范围端点提供最小值/最大值标签或图标。
  • 选择器(Pickers):用于较长选项列表,选项多到不适合分段控件时;适合日期、时间、结构化数据。
  • 步进器(Steppers):用于小幅精确调整,按固定步长增减;在步进器旁显示当前值,并设置合理的最小/最大边界。
  • 文本框(Text fields):用于短的单行输入;文本视图(Text views)用于多行输入。根据预期输入配置键盘类型(邮箱、URL、数字)。
  • 组合框(Combo boxes):文本输入加选择列表,macOS 专用。当自定义值有效时,可输入值或从预定义列表中选择。
  • 令牌字段(Token fields):将离散值显示为可视化令牌,macOS 专用。用于邮件收件人、标签或离散项集合。
  • 仪表(Gauges)与评分指示器(Rating indicators):用于显示值。仪表显示某个范围内的值,评分指示器显示评分(常为星级)。二者为只读展示;如需输入,使用可交互变体。

使用方式

在提问前先检查 .claude/apple-design-context.md,使用已有上下文,只询问尚未覆盖的信息。输出内容通常包括:

  • 控件推荐及理由,并说明为何其他替代方案不太合适。
  • 状态管理:控件如何传达当前状态,更改是立即应用还是在确认时应用。
  • 验证方式:何时显示错误,如何传达规则。
  • 可访问性:面向 VoiceOver 的标签、特征与提示。

参考索引

  • 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、chip、标签、收件人
  • virtual-keyboards.md — 虚拟键盘:邮箱、URL、数字键盘类型
  • rating-indicators.md — 评分指示器:星级评分、只读
  • gauges.md — 仪表:级别指示、范围显示

需要确认的问题

  • 数据类型是什么?(布尔值、从固定集合中选择、数值、自由文本?)
  • 选项有多少个?
  • 面向哪些平台?(组合框与令牌字段仅限 macOS)
  • 是设置屏幕还是内联表单?

相关技能

  • hig-components-menus — 补充选择控件的按钮与弹出按钮
  • hig-components-dialogs — 包含表单的工作表与弹出框
  • hig-components-search — 共享文本输入模式的搜索字段
  • hig-inputs — 键盘、指针、手势与控件的交互
  • hig-foundations — 用于控件样式的排版、颜色与布局

限制

资料未提供具体的安装命令、收费或价格信息,也未提供各参考文件之外的详细实现步骤。