5分钟设计指南:对话框(对话框)模态对话框会打断用户完成任务

这个问题也困扰了我很久。最近整理资料,写了一篇文章《5分钟设计指南:对话框》,希望能有所帮助。

对话框是叠加在应用程序主视图上的弹出视图,通常需要用户响应。对话框可分为模态对话框和无模态对话框。

modality 阻止用户完成当前视图上的任务,允许用户专注于模态视图中的新任务;用户只能在模态视图终止时继续完成之前的任务。

在下面的例子中,提示框阻止用户继续查看地图,让用户专注于提示;在用户点击确定之前,用户无法继续查看地图。工具提示是 iOS 中常见的模态视图之一。

对话框一般由什么组成?

大多数对话框由标题、按钮和描述文本组成。如果对话框允许用户输入或选择,则还需要相关的控件。

对话框的标题应该简洁易懂。模态对话框一般有两个按钮,一个是默认按钮(例如“确定”、“打印”、“清空垃圾箱”),另一个是取消按钮。他们应该给用户明确的选择。当用户单击任何按钮时,模式对话框将关闭。为了提高熟练用户的效率,我们应该允许用户按 Esc 键来终止对话框(与取消按钮的效果相同)。指导性文字可以向用户解释对话中的任务,并且应该清晰,避免重复信息。什么是模态对话框?

当模式对话框打开时,除非模式对话框被终止,否则用户无法继续之前的任务。

在设计交互界面时,要注意模态对话框的设计。设计良好的模态对话框可以帮助用户更好地完成任务,而设计不佳的模态对话框会使用户感到沮丧。 Alan Cooper 将模态对话框比作界面设计中的“配角”。因为模态对话框打断了用户的流程,所以主要内容和相关控件应该放在主视图中,而不是分散在不同的模态对话框中。此外,当一个对话框叠加在另一个对话框之上时,它们通常会令人困惑。

级联对话框经常令人困惑 为什么要使用模态对话框?

如果使用得当,模式对话框可以帮助用户完成任务并创造出色的用户体验。当您有以下需求时,请考虑使用模式对话框:

1.引起用户的注意

当您希望用户专注于一项重要任务时,您可能需要在使用模式对话框时使用它。虽然保证会打断用户,但很少有其他组件能像模态对话框那样吸引用户的全部注意力。模态对话框一般位于界面最顶层的中间。用户必须先处理模态对话框中的任务,然后才能处理其他任务。因此,用户不太可能错过它们。

在下面的示例中,当用户删除一个项目时,应用程序会启动一个模式对话框以向用户确认删除。

2.显示次要内容

图片[1]-5分钟设计指南:对话框(对话框)模态对话框会打断用户完成任务-老王博客

本质上,应用旨在帮助用户访问特定内容。例如,Evernote 的内容是笔记,而 Spotify 的内容是音乐。虽然有时很难明确区分主要内容和次要内容,但我们可以假设用户最感兴趣、最关心、访问频率最高的主要内容和其他内容为次要内容。

用户为内容而来。因此,主要内容和相关控件不应出现在模式对话框中。对于桌面应用程序模态对话框是什么时候实例的对话框,它们属于应用程序的主窗口;对于移动应用程序,它们属于应用程序的屏幕;对于网络应用程序,它们属于应用程序的页面。在精心设计的信息架构中,用户总能轻松找到他们关心的内容。

由于屏幕尺寸有限,辅助内容可以出现在模式对话框中。在特定的上下文中,用户将有机会打开这些对话框。例如,用户在 AWS EC2 实例列表中选择一个实例并通过右键菜单单击“添加/编辑标签”后,将打开一个模式对话框。用户可以在此对话框中查看和编辑实例的标签。如果用户不想继续查看和编辑标签,可以随时关闭对话框返回上一界面。

有时,用户需要在多个上下文中打开同一个模态对话框。例如,除了上面提到的右键菜单,用户还可以点击底部标签面板上的“添加/编辑标签”按钮来打开相同的模态对话框。无论哪种方式,用户都可以快速回到他们关心的主要内容——AWS EC2 实例列表。

3.隐藏复杂性

我们希望为用户提供创建简单、功能强大的应用程序。在设计应用程序时,我们需要仔细平衡这两个目标。与移动用户相比,桌面用户往往更习惯于使用功能广泛的专业应用程序,例如 PowerPoint、Photoshop、SourceTree。但除非他们已经是有经验的用户;否则,一个充满按钮和行话的应用程序界面就像一个布满地雷的战场,会让新手望而却步。如果我们想让新用户更快上手和掌握基本功能,就必须想办法隐藏不常用的高级功能,帮助新用户首先关注主要内容。

我们可以在模式对话框中隐藏这些高级功能。对于新用户来说,模态对话框的好处主要体现在:

容易理解。模态对话框往往简短易懂,新用户可以快速完成对话框中的任务。易于撤消。如果新用户不小心通过按钮或菜单打开了模态对话框,他们可以随时单击“取消”。易于导航。因为用户仍然可以看到模态对话框下方的部分主视图,所以他不会混淆他在哪里。如果他不想继续,他可以随时关闭对话框并返回上一个视图。什么是无模式对话框?

当无模式对话框打开时,用户可以专注于对话框中的次要任务,或继续完成主视图中的主要任务。

如果用户需要在主视图和对话框、主任务和次任务之间频繁切换,无模式对话框比模态对话框更合适。但是,无模式对话框可能会让用户感到困惑。这是因为,尽管两者看起来非常相似,但它们的行为却不同且不可预测。

例如,在一个模态对话框中,当用户点击下面的按钮时,对话框将被关闭;但在无模式对话框中,当用户单击按钮时,对话框将关闭。盒子不会立即关闭。 (除非用户主动点击无模式对话框上的关闭控件。)

另外,由于无模式对话框不跟随次要任务在会话结束时自动关闭,未及时关闭的非模式对话框可能会浪费屏幕空间。在 Page 中,用户可以使用无模式对话框在当前打开的文档中查找内容。如果用户没有主动关闭它,即使他不想继续搜索,这个对话框仍然会出现在屏幕上。 (当用户打开第二个文档时,Page 关闭无模式对话框,用户可以再次打开模态对话框是什么时候实例的对话框,此时无模式对话框的搜索范围是当前活动窗口的内容。)

为了避免这些问题,我们可以考虑使用其他非模态组件来代替无模态对话框,例如:面板(panel)、侧边栏(sidebar)和工具栏(toolbar)。例如,Ulysses 将无模式对话框替换为面板。

参考 Alan Cooper,About Face(第 4 版,Wiley 2014)通用 Windows 平台 (UWP) 应用程序的人机界面指南内容设计基础对话框 – 组件 – 材料设计

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论