hig-components-dialogs

Name: hig-components-dialogs
Author: raintree-technology

github.com/raintree-technology设计与 UI148665 次安装6 天前更新

代码仓库

关于 hig-components-dialogs

为 Apple 平台的弹窗与呈现组件提供 HIG 设计指导，适用于需要设计确认、编辑或临时选项流程的团队。内容涵盖组件选择、文案、关闭行为，以及避免不必要打断的替代方案。

主要功能

01区分警告框、工作表与弹出框
02指导操作表与破坏性操作呈现
03提供标题和按钮文案建议
04涵盖关闭行为与非模态替代方案

适用场景

01设计删除等关键操作的确认流程
02为编辑任务选择呈现组件
03减少模态弹窗造成的流程中断

安装

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

$npx skills add https://github.com/raintree-technology/hig-doctor --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。使用现有上下文，只询问其中尚未涵盖的信息。

核心原则

谨慎使用警告框，仅用于关键情况。 需要用户关注的错误、破坏性操作确认，或需要用户确认的信息。警告框会打断当前流程并要求用户作出响应。
使用工作表处理聚焦任务，同时保留上下文。 工作表从边缘滑入（或在 macOS 上附加到窗口）。适用于创建项目、编辑设置和多步表单。
iPad 和 Mac 上的弹出框为非模态。 它们显示在触发元素旁边，点按外部区域即可关闭。适用于提供补充信息、选项或控件，而不会占据整个屏幕。
使用操作表供用户选择操作。 当用户需要从多个操作中进行选择时显示，尤其是在其中一个操作具有破坏性时。iPhone：从底部向上滑入。iPad：以弹出框的形式显示。
尽量减少打断。 使用模态界面前，考虑是否可以改为内联呈现，或让操作支持撤销。
警告框文字简洁且可操作。 标题简短明确。需要时添加简短的正文。按钮标签应使用具体的动词（“删除”“保存”），而不是“好”。
明确标记破坏性操作。 使用破坏性按钮样式（红色文字）。将破坏性按钮放在用户不太可能下意识点按的位置。
为警告框和包含多个操作的操作表提供取消选项。 在操作表中，取消选项应显示在底部，并与其他选项分开。
数字输入：聚焦且易于使用。 输入框大小适当，数字间自动前进，并支持粘贴和自动填充。
根据平台调整呈现方式。 同一种交互在 iPhone、iPad、Mac 和 visionOS 上可能会使用不同的组件。

参考索引

参考资料	主题	主要内容
alerts.md	警告框	按钮顺序、标题和正文、确认、破坏性操作
action-sheets.md	操作表	多个操作、取消选项、破坏性操作处理
popovers.md	弹出框	非模态、点按外部区域关闭、iPad/Mac
sheets.md	工作表	模态任务、保留上下文
digit-entry-views.md	数字输入	PIN 输入、自动填充、自动前进

输出格式

推荐的呈现类型及理由，并说明其他方案为何不那么合适。
内容指南——标题、正文和按钮标签应符合 Apple 的语气与简洁性要求。
关闭行为——用户如何关闭，以及之后会发生什么（保存、放弃、取消）。
替代方案——哪些情况下无需使用模态界面（内联反馈、撤销、渐进式展开）。

要询问的问题

此次呈现需要展示哪些信息或操作？
需要阻止用户继续操作，还是非阻塞？
面向哪些平台？
此内容会多频繁地出现？