hig-components-dialogs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple HIG: Presentation Components

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. Alerts: sparingly, for critical situations. Errors needing attention, destructive action confirmations, or information requiring acknowledgment. They interrupt flow and demand a response.
  2. 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.
  3. 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.
  4. 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.
  5. Minimize interruptions. Before reaching for a modal, consider inline presentation or making the action undoable instead.
  6. Concise, actionable alert text. Short descriptive title. Brief message body if needed. Button labels should be specific verbs ("Delete", "Save"), not "OK".
  7. Mark destructive actions clearly. Destructive button style (red text). Place destructive buttons where users are less likely to tap reflexively.
  8. Provide a cancel option for alerts and action sheets with multiple actions. On action sheets, cancel appears at the bottom, separated.
  9. Digit entry: focused and accessible. Appropriately sized input fields, automatic advancement between digits, support for paste and autofill.
  10. Adapt presentation to platform. The same interaction may use different components on iPhone, iPad, Mac, and visionOS.
  1. Alerts:仅在关键场景下谨慎使用。 适用于需要关注的错误、破坏性操作确认,或需要用户确认的信息。这类组件会打断用户流程,要求用户做出响应。
  2. Sheets:用于聚焦任务且保留上下文。 从屏幕边缘滑入(在macOS上则依附于窗口)。适用于创建条目、编辑设置、多步骤表单等场景。
  3. Popovers:iPad和Mac端的非模态组件。 出现在触发元素旁,点击外部即可关闭。用于在不占据整个屏幕的情况下展示额外信息、选项或控件。
  4. Action Sheets:用于在多个操作中选择。 当用户需要从多个操作中选择时展示,尤其是包含破坏性操作的场景。iPhone端:从底部向上滑出;iPad端:以弹出框形式显示。
  5. 最小化干扰。 在使用模态组件前,先考虑内联展示方式,或让操作支持撤销。
  6. 简洁、可操作的警告框文本。 标题要简短描述内容。必要时添加简短的消息正文。按钮标签应使用具体动词(如“删除”“保存”),而非“确定”。
  7. 清晰标记破坏性操作。 使用破坏性按钮样式(红色文本)。将破坏性按钮放在用户不易误触的位置。
  8. 为包含多个操作的警告框和操作表提供取消选项。 在操作表中,取消选项位于底部且与其他操作分隔开。
  9. 数字输入:聚焦且易用。 输入框大小合适,支持自动切换输入框,支持粘贴和自动填充。
  10. 根据平台调整展示方式。 同一交互在iPhone、iPad、Mac和visionOS上可能使用不同的组件。

Reference Index

参考索引

ReferenceTopicKey content
alerts.mdAlertsButton ordering, title/message text, confirmation, destructive actions
action-sheets.mdAction sheetsMultiple actions, cancel option, destructive handling
popovers.mdPopoversNon-modal, dismiss on tap outside, iPad/Mac
sheets.mdSheetsModal task, context preservation
digit-entry-views.mdDigit entryPIN input, autofill, auto-advance
参考文档主题核心内容
alerts.mdAlerts按钮排序、标题/消息文本、确认、破坏性操作
action-sheets.mdAction Sheets多操作选择、取消选项、破坏性操作处理
popovers.mdPopovers非模态、点击外部关闭、iPad/Mac适配
sheets.mdSheets模态任务、上下文保留
digit-entry-views.md数字输入PIN码输入、自动填充、自动切换输入框

Output Format

输出格式

  1. Recommended presentation type with rationale and why alternatives are less suitable.
  2. Content guidelines -- title, message, button labels per Apple's tone and brevity rules.
  3. Dismiss behavior -- how the user dismisses and what happens (save, discard, cancel).
  4. Alternatives -- when the scenario might not need a modal at all (inline feedback, undo, progressive disclosure).
  1. 推荐的展示类型及理由,并说明为何其他选项不太合适。
  2. 内容规范 —— 符合Apple风格和简洁性要求的标题、消息、按钮标签。
  3. 关闭行为 —— 用户如何关闭组件,以及关闭后的操作(保存、丢弃、取消)。
  4. 替代方案 —— 某些场景下可能无需使用模态组件(内联反馈、撤销、渐进式展示)。

Questions to Ask

需询问的问题

  1. What information or action does the presentation need?
  2. Blocking or non-blocking?
  3. Which platforms?
  4. How often does this appear?
  1. 该展示组件需要承载什么信息或操作?
  2. 是阻塞式还是非阻塞式?
  3. 面向哪些平台?
  4. 该组件出现的频率如何?

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

  • hig-components-menus —— 触发展示组件的按钮和工具栏项
  • hig-components-controls —— 表单页和弹出框内的输入控件
  • hig-components-search —— 展示视图内的搜索与导航
  • hig-patterns —— 模态性、干扰处理、用户流程管理
  • hig-foundations —— 展示组件的颜色、排版、布局