mcpField
H
hig-components-dialogs

hig-components-dialogs

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

关于 hig-components-dialogs

为 Apple 平台界面设计提供呈现组件指导,涵盖警告框、操作菜单、弹出框、工作表和数字输入。帮助设计者与开发者根据任务、阻塞程度和平台选择合适方式,并减少不必要的打断。

主要功能

  1. 01区分警告框、工作表与弹出框的用途
  2. 02提供操作菜单和数字输入建议
  3. 03指导标题、消息与按钮文案
  4. 04说明取消、关闭及替代方案

适用场景

  1. 01设计破坏性操作的确认流程
  2. 02为设置编辑选择合适的呈现方式
  3. 03规划 PIN 数字输入体验

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill hig-components-dialogs

安装后在 Claude Code 中输入/hig-components-dialogs确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
action-sheets.md
alerts.md
digit-entry-views.md
popovers.md
sheets.md

详细介绍

Apple HIG:呈现组件

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

核心原则

  1. 警告框:谨慎使用,仅用于关键情况。 需要关注的错误、破坏性操作的确认,或需要用户知悉的信息。它们会打断流程并要求响应。

  2. 表单:保持上下文的聚焦任务。 从边缘滑入(或在 macOS 上附加到窗口)。用于创建条目、编辑设置、多步骤表单。

  3. 浮出层:在 iPad 和 Mac 上非模态。 出现在触发元素旁边,点击外部即可关闭。用于在不占据整个屏幕的情况下提供附加信息、选项或控件。

  4. 操作表单:在多个操作之间选择。 在需要从多个操作中挑选时呈现,尤其是在其中一个是破坏性操作时。iPhone:从底部向上滑入。iPad:以浮出层形式出现。

  5. 尽量减少打断。 在使用模态之前,先考虑行内呈现,或让操作可撤销。

  6. 简洁、可操作的警告框文本。 简短的描述性标题。如有必要,附上简短的消息正文。按钮标签应使用具体动词("Delete"、"Save"),而非"OK"。

  7. 清晰标示破坏性操作。 使用破坏性按钮样式(红色文本)。将破坏性按钮放在用户不太可能条件反射点击的位置。

  8. 为包含多个操作的警告框和操作表单提供取消选项。 在操作表单上,取消出现在底部,并与其他选项分隔。

  9. 数字输入:聚焦且易于访问。 大小合适的输入框、数字间自动前进、支持粘贴和自动填充。

  10. 让呈现方式适配平台。 同一交互在 iPhone、iPad、Mac 和 visionOS 上可能使用不同的组件。

参考索引

参考主题关键内容
alerts.md警告框按钮排序、标题/消息文本、确认、破坏性操作
action-sheets.md操作表单多个操作、取消选项、破坏性操作处理
popovers.md浮出层非模态、点击外部关闭、iPad/Mac
sheets.md表单模态任务、上下文保持
digit-entry-views.md数字输入PIN 输入、自动填充、自动前进

输出格式

  1. 推荐的呈现类型及理由,以及为何其他替代方案不太合适。
  2. 内容指南 —— 标题、消息、按钮标签,遵循 Apple 的语气和简洁规则。
  3. 关闭行为 —— 用户如何关闭,以及会发生什么(保存、丢弃、取消)。
  4. 替代方案 —— 该场景何时可能根本不需要模态(行内反馈、撤销、渐进式披露)。

需要询问的问题

  1. 该呈现需要传达什么信息或操作?
  2. 阻塞式还是非阻塞式?
  3. 涉及哪些平台?
  4. 它出现的频率如何?

相关技能

  • hig-components-menus —— 触发呈现的按钮和工具栏项
  • hig-components-controls —— 表单和浮出层内的输入控件
  • hig-components-search —— 所呈现视图内的搜索和导航
  • hig-patterns —— 模态、打断、用户流程管理
  • hig-foundations —— 呈现组件的颜色、排版、布局

由 Raintree Technology 构建 · 更多开发者工具

何时使用

此技能适用于执行概述中描述的工作流或操作。

示例

用户请求:

使用 @hig-components-dialogs 完成此任务:Apple HIG 针对呈现组件的指导,包括警告框、操作表单、浮出层、表单和数字输入视图。

限制

  • 仅当任务明确符合上述范围时,才使用此技能。
  • 不要将输出视为特定环境验证、测试或专家评审的替代品。
  • 如果缺少必需的输入、权限、安全边界或成功标准,请停止并请求澄清。

评论

支持 Markdown