最专业的代练平台开发!

资讯热点
5分钟交互式设计指南系列:对话框

发布时间:2024-10-16 分类: 行业动态

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

模态防止用户在当前视图上完成任务,允许用户专注于模态视图中的新任务;只有在模态视图终止后,用户才能继续完成上一个任务。

在下面的示例中,提示框阻止用户继续查看地图,允许用户专注于提示;只有在用户点击确定后,用户才能继续查看地图。提示框是iOS中常见的模式视图之一。

什么是常规对话框?

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

标题:对话框的标题应该简单易懂,一目了然。

按钮:模态对话框中通常有两个按钮。一个是默认按钮(例如,“确认”,“打印”,“清空回收箱”),另一个是“取消”按钮。他们应该给用户明确的选择。当用户单击任何按钮时,模式对话框将关闭。为了提高熟练用户的效率,我们应该允许用户按下Esc键来终止对话框(与“取消”按钮的效果相同)。

解释性文本:解释性文本可以向用户解释对话框中的任务,这些任务应该清晰并避免重复信息。

什么是模态对话框?

打开模态对话框时,除非模态对话框终止,否则用户无法继续执行上一个任务。

在设计交互式界面时,我们应该注意模态对话框的设计。精心设计的模态对话框可以帮助用户更好地完成工作,而糟糕的模态对话框可能会让用户感到沮丧。 Alan Cooper将模态对话框与“支持角色”进行比较。在界面设计中。由于模态对话框会中断用户的流程,因此主要内容和相关控件应放在主视图中,而不是分布在不同的模式对话框中。此外,当对话框分层放在另一个对话框之上时,它们通常会令人困惑。

△级联对话通常令人困惑

为什么要使用模态对话框?

如果使用得当,模态对话框可以帮助用户完成任务并创建良好的用户体验。当您有以下要求时,请考虑使用模态对话框:

1.引起用户的注意

当您希望用户专注于重要任务时,您可能需要使用模态对话框。虽然用户将被中断,但很少有其他组件像模式对话框一样得到用户的全部注意。模态对话框通常位于界面最顶层的中间。用户必须先处理模态对话框中的任务,然后才能处理其他任务。因此,用户不太可能错过它们。

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

2.显示辅助内容

从本质上讲,应用程序旨在帮助用户访问特定内容。例如,Evernote的内容是一个注释,Spotify的内容是音乐。尽管有时难以清楚地区分主要内容和次要内容,但我们可以假设用户最感兴趣,最关注,并且最常访问的是主要内容,而其他内容是次要内容。

用户来找内容。因此,主要内容和相关控件不应出现在模态对话框中。对于桌面应用程序,它们属于应用程序的主窗口(主窗口);对于移动应用程序,它们属于应用程序的屏幕;对于Web应用程序,它们属于应用程序的页面。在精心设计的信息架构中,用户可以轻松找到他们关心的内容。

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

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

3.隐藏复杂性

我们希望为用户创建简单,功能强大的应用程序。在设计应用程序时,我们需要仔细平衡这两个目标。与移动用户相比,桌面用户更习惯于使用各种专业应用程序,如PowerPoint,Photoshop,SourceTree。但除非他们已经有经验的老用户;否则,充满按钮和专业词汇的应用界面就像一个充满地雷的战场,这将使新手气馁。如果我们希望新用户入门并更快地掌握基本功能,我们必须找到隐藏不常用的高级功能的方法,并帮助新用户专注于主要内容。

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

容易明白。模态对话框通常简短易懂,新用户可以快速完成对话框中的任务。

容易撤销。如果新用户通过按钮或菜单意外打开模式对话框,他们可以随时单击“取消”。

易于导航。由于用户仍然可以在模态对话框下方看到主视图的一部分,因此他不知道他在哪里。如果他不想继续,他可以随时关闭对话框并返回上一个视图。

什么是非模态对话框?

打开无模式对话框时,用户可以关注对话框中的辅助任务,也可以继续主视图中的主要任务。

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

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

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

为了避免这些问题,我们可以考虑使用其他非模态组件而不是非模态对话框,例如面板,侧边栏和工具栏。例如,Ulysses用面板替换非模态对话框。

« Html5有多强大?微型企业H5构建站突出强度 | 掌握这些技能,使您的业务脱颖而出。 »