hig-components-dialogs
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseApple HIG: Presentation Components
Apple HIG:展示组件
Check for before asking questions. Use existing context and only ask for information not already covered.
.claude/apple-design-context.md提问前请先查看文件。请利用已有上下文,仅询问未涵盖的信息。
.claude/apple-design-context.mdKey Principles
核心原则
-
Alerts: sparingly, for critical situations. Errors needing attention, destructive action confirmations, or information requiring acknowledgment. They interrupt flow and demand a response.
-
Sheets: focused tasks that maintain context. Slides in from the edge (or attaches to a window on macOS). Use for creating items, editing settings, multi-step forms.
-
Popovers: non-modal on iPad and Mac. Appear next to the trigger element, dismissed by tapping outside. For additional information, options, or controls without taking over the screen.
-
Action sheets: choosing among actions. Present when picking from multiple actions, especially if one is destructive. iPhone: slide up from bottom. iPad: appear as popovers.
-
Minimize interruptions. Before reaching for a modal, consider inline presentation or making the action undoable instead.
-
Concise, actionable alert text. Short descriptive title. Brief message body if needed. Button labels should be specific verbs ("Delete", "Save"), not "OK".
-
Mark destructive actions clearly. Destructive button style (red text). Place destructive buttons where users are less likely to tap reflexively.
-
Provide a cancel option for alerts and action sheets with multiple actions. On action sheets, cancel appears at the bottom, separated.
-
Digit entry: focused and accessible. Appropriately sized input fields, automatic advancement between digits, support for paste and autofill.
-
Adapt presentation to platform. The same interaction may use different components on iPhone, iPad, Mac, and visionOS.
-
Alerts:仅在关键场景下谨慎使用。 适用于需要关注的错误、破坏性操作确认,或需要用户确认的信息。这类组件会打断用户流程,要求用户做出响应。
-
Sheets:用于聚焦任务且保留上下文。 从屏幕边缘滑入(在macOS上则依附于窗口)。适用于创建条目、编辑设置、多步骤表单等场景。
-
Popovers:iPad和Mac端的非模态组件。 出现在触发元素旁,点击外部即可关闭。用于在不占据整个屏幕的情况下展示额外信息、选项或控件。
-
Action Sheets:用于在多个操作中选择。 当用户需要从多个操作中选择时展示,尤其是包含破坏性操作的场景。iPhone端:从底部向上滑出;iPad端:以弹出框形式显示。
-
最小化干扰。 在使用模态组件前,先考虑内联展示方式,或让操作支持撤销。
-
简洁、可操作的警告框文本。 标题要简短描述内容。必要时添加简短的消息正文。按钮标签应使用具体动词(如“删除”“保存”),而非“确定”。
-
清晰标记破坏性操作。 使用破坏性按钮样式(红色文本)。将破坏性按钮放在用户不易误触的位置。
-
为包含多个操作的警告框和操作表提供取消选项。 在操作表中,取消选项位于底部且与其他操作分隔开。
-
数字输入:聚焦且易用。 输入框大小合适,支持自动切换输入框,支持粘贴和自动填充。
-
根据平台调整展示方式。 同一交互在iPhone、iPad、Mac和visionOS上可能使用不同的组件。
Reference Index
参考索引
| Reference | Topic | Key content |
|---|---|---|
| alerts.md | Alerts | Button ordering, title/message text, confirmation, destructive actions |
| action-sheets.md | Action sheets | Multiple actions, cancel option, destructive handling |
| popovers.md | Popovers | Non-modal, dismiss on tap outside, iPad/Mac |
| sheets.md | Sheets | Modal task, context preservation |
| digit-entry-views.md | Digit entry | PIN input, autofill, auto-advance |
| 参考文档 | 主题 | 核心内容 |
|---|---|---|
| alerts.md | Alerts | 按钮排序、标题/消息文本、确认、破坏性操作 |
| action-sheets.md | Action Sheets | 多操作选择、取消选项、破坏性操作处理 |
| popovers.md | Popovers | 非模态、点击外部关闭、iPad/Mac适配 |
| sheets.md | Sheets | 模态任务、上下文保留 |
| digit-entry-views.md | 数字输入 | PIN码输入、自动填充、自动切换输入框 |
Output Format
输出格式
- Recommended presentation type with rationale and why alternatives are less suitable.
- Content guidelines -- title, message, button labels per Apple's tone and brevity rules.
- Dismiss behavior -- how the user dismisses and what happens (save, discard, cancel).
- Alternatives -- when the scenario might not need a modal at all (inline feedback, undo, progressive disclosure).
- 推荐的展示类型及理由,并说明为何其他选项不太合适。
- 内容规范 —— 符合Apple风格和简洁性要求的标题、消息、按钮标签。
- 关闭行为 —— 用户如何关闭组件,以及关闭后的操作(保存、丢弃、取消)。
- 替代方案 —— 某些场景下可能无需使用模态组件(内联反馈、撤销、渐进式展示)。
Questions to Ask
需询问的问题
- What information or action does the presentation need?
- Blocking or non-blocking?
- Which platforms?
- How often does this appear?
- 该展示组件需要承载什么信息或操作?
- 是阻塞式还是非阻塞式?
- 面向哪些平台?
- 该组件出现的频率如何?
Related Skills
相关技能
- hig-components-menus -- Buttons and toolbar items triggering presentations
- hig-components-controls -- Input controls within sheets and popovers
- hig-components-search -- Search and navigation within presented views
- hig-patterns -- Modality, interruptions, user flow management
- hig-foundations -- Color, typography, layout for presentation components
Built by Raintree Technology · More developer tools
- hig-components-menus —— 触发展示组件的按钮和工具栏项
- hig-components-controls —— 表单页和弹出框内的输入控件
- hig-components-search —— 展示视图内的搜索与导航
- hig-patterns —— 模态性、干扰处理、用户流程管理
- hig-foundations —— 展示组件的颜色、排版、布局
由 Raintree Technology 构建 · 更多开发者工具