mfc判断对话框是否是模态_交互设计之控件规范—模态对话框

以下内容来自Google——Material Design Dialogs^[1]、Apple——macOS Human Interface Guildeline_Alerts&Dialogs^[2]、Microsoft——Fluent Design System_Modal^[3]、IBM——Carbon Design System_Modal^[4]四家知名设计规范的官方文档。

我对其重复内容进行了整合，并且去掉了一些平台性过强的内容，摘取出适用于Web端通用的一些规则，整理如下：

概念

Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. - Microsoft_modal

对话框是一种模态窗口，出现在页面内容的最上方，用来提供关键信息，或要求做出决定；对话框在出现时禁用页面的所有功能，并且保留在页面中直到用户确认、取消或者执行必要操作为止。

用法

Do

• 对话框的三个原则：聚焦（Focused）：使用户注意力集中，以确保内容得到解决；直接(Direct)：对话框应直接、简短的展示信息或完成任务；有帮助的(Helpful)：对话框应响应用户的任务或操作，提供相关的上下文信息； - Material Design_Dialogs
• 使用对话框进行快速，可操作的交互。例如显示特定的用户任务、决策或确认的关键信息、显示打断用户正常操作的错误信息；-- Material Design_Dialogs & Microsoft_modal
• 可以用以下方式关闭：单击右上角“✕”图标、单击“取消”按钮、单击键盘快捷键“ESC”、单击对话框外的遮罩区域；- IBM_Modal & Material Design_Dialogs
• 不可逆或具有破坏性的任务可使用阻止对话框（Blocking Dialog），阻止对话框会禁用对话框以外的所有操作，也就是单击对话框外的遮罩区域不可关闭，需谨慎使用；- Microsoft_modal

Don't

• 不要过度使用；在某种程度上，它们被认为是中断工作流程，过度使用会导致差的用户体验。使用频率低有助于确保人们认真对待；- Microsoft_modal & IBM_Modal & Material Design_Dialogs
• 避免让用户返回到一个错误的状态，如果根本问题没有解决时不要关闭对话框；- Microsoft_modal

---

结构

对话框一般由三部分组成：Header、Body、Footer，下面会详细说明三个部分的使用方法与注意事项。

IBM_Carbon Design System

Header

Header一般由一个标题和一个“✕”图标组成，以下主要讨论标题。

Do

• 标题应该是一个简短、清晰的陈述或者是一个问题； - Material Design_Dialogs
• 当对话框中的默认操作会导致一个错误的结果时，标题可以使用一个问句； - macOS_Alets
• 标题要完整且具体，应尽量说明错误是怎么发生的、为什么会发生、错误造成的后果以及错误涉及的文档或文件； - macOS_Alets
• 所有的警告对话框（Alert dialog）都应有一个标题； - macOS_Alets

• 可以在标题的上方加一个副标题，用来提供额外的说明； - IBM_Modal

Don't

• 避免道歉（“Sorry for the interruption”）、警告（“Warning！”），或模棱两可的问题（“Are you sure？”）,这将会惹恼用户； - Material Design & macOS
• 避免使用“Are you sure？”之类的确认弹框，除非用户在执行一个不可逆转的或破坏性操作； - Microsoft_Dialog

Body

Body中可以使用的组件有：表单、描述文本、复选框或单选框。

Do

• 【描述】使用描述文本去扩展说明对话框的标题，可以详细说明造成的后果并提出解决方案或替代方案，提供尽可能多的信息来解释用户为什么要关注这件事； - macOS_Alets
• 【描述】描述文本应仅包含可以帮助用户做出决定所需的信息； - Microsoft_Dialog
• 【表单】在对话框关闭之前应验证用户输入是否正确，并在输入框附近显示错误信息；- Microsoft_Dialog & macOS_Alets
• 【表单】将初始焦点设置在用户输入的第一个位置。这样做可以让用户立即开始输入数据，而无需单击输入框；- macOS_Dialogs
• 【表单】使静态文本是可选择、可复制的。应允许用户复制有用的信息，例如错误消息、序列号或IP地址，以便粘贴到其他地方；- macOS_Dialogs
• 【表单】尽可能减少无效输入，使用弹出按钮提供选择而不是要求用户输入数据，并使用日期选择器和数字输入组件来确保正确输入日期和数字；- macOS_Dialogs

Don't

• 【描述】避免使用指责、判断或侮辱的语气；- macOS_Alets
• 【单选框】谨慎使用仅有单选操作的弹框，因为它会中断用户操作。可以使用下拉菜单等非模态、破坏性较小的方式来替代弹框；- Material Design

Footer

Footer通常是一个或两个按钮。

Do

• 主按钮、取消按钮操作应符合用户预期。单击主按钮通常意味着确认接受所有更改并关闭对话框，单击取消按钮意味着放弃所有更改并关闭对话框；- macOS_Dialogs & Material Design
• 当存在一个破坏性按钮时，请包含一个取消按钮。取消按钮提供了一种清晰、安全的方式去退出一个破坏性操作；- macOS_Alets
• 当对话框纯粹只展示信息，需要用户确认时，只需放置一个按钮，不需要取消按钮；（IBM中的此类对话框没有按钮）- Material Design

Material Design

IBM_Carbon Design System

• 确保对话框操作能够快速生效。通常情况下，用户应该在对话框操作结束后即时看到结果，如果一个操作需要几秒钟去完成，请显示进度信息，以便用户知道已启动该操作。- macOS_Dialogs
• 将破坏性按钮和非破坏性按钮分隔开。例如“Don't Save”、“Delete”这类破坏性按钮应尽可能远离安全按钮，例如“Save”、“Cancel”，这样用户必须有意识地点击按钮；- macOS_Dialogs
• 确保键盘快捷键“Esc”或“Command+.”可以关闭对话窗，对应对话框中的“取消”按钮；- macOS_Dialogs
• 可以为所有按钮提供键盘快捷键；例如：使用键盘“P”键来操作“Print”按钮，使用键盘“D”键操作“Don“t save”；- macOS_Dialogs

Don't

• 尽可能不要在Footer中包含超过两个按钮。如果您需要使用“帮助”或其他次级操作，请使用一个链接文本放置在弹窗的正文中；（MacOS中将帮助按钮以图标形式放置在最左侧）- IBM_Modal & Material Design

• 不要将破坏性操作设置为默认按钮。当对话框的主要操作会导致破坏性结果时，可以不设置默认按钮或将取消设置为默认按钮； - macOS_Dialogs
• 避免使用“OK”作为主按钮除非对话框纯粹只展示信息。“OK”的含义是模棱两可的，可以认为是“OK，我要执行本次操作”，也可以认为是：“OK，我了解我的操作将会导致破坏性的后果”；要确保主按钮文本能够反应按钮将执行的操作，例如：“Erase”、“Convert”、“Clear”、“Delete”；- macOS_Alets & Microsoft_Dialogs

---

以上为全部内容，第一次码了这么多字，干货满满，希望大家有所收获，多多点赞 ！

参考

1. ^Material Design https://material.io/components/dialogs/#
2. ^MacOS https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/alerts/
3. ^Microsoft https://developer.microsoft.com/en-us/fabric#/controls/web/modal
4. ^IBM https://www.carbondesignsystem.com/components/modal/usage