5分钟交互设计指南系列:对话框 - 优设-UISDC

5分钟交互设计指南系列:对话框

2017/10/31 评论区

框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

模态 (modality) 会阻止用户完成当前视图上的任务,使用户专注于模态视图 (modal views) 里的新任务;只有当模态视图被终止后,用户才能继续完成之前的任务。

在下面的例子中,提示框阻止用户继续查看地图,使用户专注于提示;只有当用户轻点 OK 后,用户才能继续查看地图。提示框是 iOS 中常见的模态视图之一

对话框一般由什么组成?

大部分对话框都由标题、按钮和说明文本组成。如果对话框允许用户输入或选择,则还需相关控件。

  • 标题:对话框的标题应该简洁易懂、一目了然。
  • 按钮:模态对话框上一般有两个按钮,一个是默认按钮(比如,“确认”、“打印”、“清空回收站”),另一个是取消按钮。它们应当给用户清晰的选项。当用户点击任何一个按钮后,模态对话框就会关闭。为了提高熟练用户的效率,我们应该允许用户按 Esc 键终止对话框(效果和取消按钮相同)。
  • 说明文本:说明文本可以向用户解释对话框里的任务,它应该清晰、避免重复信息。

什么是模态对话框?

当模态对话框打开后,用户不能继续之前的任务,除非模态对话框被终止。

在设计交互界面时,我们应该重视模态对话框的设计。设计良好的模态对话框可以帮助用户更好的完成任务,而糟糕的模态对话框则会让用户感到沮丧。Alan Cooper 将模态对话框比作界面设计中的”配角“。因为模态对话框会打断用户的心流 (flow),所以主要的内容和相关控件应该放在主视图中,而不是散布在不同的模态对话框中。此外,当一个对话框层叠在另外一个对话框之上时,它们往往让人摸不着头脑。

△ 级联对话框 (Cascading Dialogs) 往往令人困惑

为什么使用模态对话框?

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

1. 获取用户的注意力

当你希望用户专注在一项重要的任务上时,你可能需要使用到模态对话框。尽管一定会打断用户,但很少有其他组件能像模态对话框一样获取用户的全部注意力。模态对话框一般处于界面的最顶层的中间位置。用户必须先处理模态对话框里的任务,然后才能去处理其他任务。因此,用户不太可能错过它们。

在下图的例子中,当用户删除项目时,应用启动了一个模态对话框向用户确认删除操作。

2. 显示次要内容

本质上,应用都是为了帮助用户访问特定的内容。比如,Evernote 的内容是笔记,而 Spotify 的内容是音乐。尽管有时很难对主要和次要内容作出清晰划分,但我们可以认为用户最感兴趣、最关心、最频繁访问的是主要内容,其他内容则是次要内容。

用户为内容而来。因此,主要内容及相关的控件不应当出现在模态对话框中。对于桌面应用而言,它们属于应用的主窗口 (main windows);对于移动应用而言,它们属于应用的屏幕 (screens);对于 Web 应用而言,它们属于应用的页面 (pages)。在设计良好的信息架构中,用户总是能轻松地找到他们关心的内容。

在屏幕大小有限的情况下,次要的内容可以出现在模态对话框中。在特定语境 (context) 下,用户将有机会打开这些对话框。比如,用户在 AWS EC2 的实例列表中选中实例、通过右键菜单点击 「添加/编辑标签」后会打开一个模态对话框。用户可以在这个对话框里查看、编辑实例的标签。如果用户不想继续查看、编辑标签,可以随时关闭对话框并回到之前的界面。

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

3. 隐藏复杂性

我们希望为用户创造简单、强大的应用。在设计应用时,我们需要小心谨慎地平衡这两个目标。相比移动用户,桌面用户往往更习惯使用功能繁多的专业应用,比如,PowerPoint、Photoshop、SourceTree。但除非他们已经是有经验的老用户;否则,充斥着按钮和专业词汇的应用界面就像是布满地雷的战场,会令新手们望而却步。如果我们希望新用户能更快上手、掌握基本功能,我们就必须想办法把平时不常使用的的高级功能隐藏起来,帮助新用户把注意力先放在主要内容上。

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

  • 容易理解。模态对话框往往简短易懂,新用户可以快速完成对话框里的任务。
  • 容易撤销。如果新用户一不小心通过按钮或菜单打开了模态对话框,他们可以随时点击「取消」。
  • 容易导航。因为用户仍可看到模态对话框下面的部分主视图,他不会搞不清楚他在哪里。如果他不想继续,可以随时关闭对话框并回到之前的视图。

什么是非模态对话框?

当非模态对话框打开后,用户可以专注于对话框里的次要任务,也可以继续完成主视图里的主要任务。

如果用户需要频繁地在主视图和对话框、主要任务和次要任务之间切换,非模态对话框会比模态对话框更合适。但是,非模态对话框可能会令用户困惑。这是因为,尽管二者看起来非常相似,它们的行为却不一样,并难以预测。

举个例子,在模态对话框中,当用户点击了下方的按钮后,对话框就会关闭。但是在非模态对话框中,当用户点击了按钮后,对话框不会立刻关闭。(除非用户主动点击非模态对话框上的关闭控件。)

此外,因为非模态对话框不会随着次要任务的结束而自动关闭,未及时关掉的非模态对话框可能浪费屏幕空间。在 Page 中,用户可以用一个非模态对话框在当前打开的文档里查找内容。如果用户不主动关闭它,哪怕他不想继续查找,这个对话框仍会出现在屏幕上。(当用户打开第二个文档时,Page 会关闭这个非模态对话框。用户可以再次打开它。此时,这个非模态对话框的搜索范围是当前活跃窗口里的内容。)

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

欢迎关注微信公众号:非科班设计

「趋势!对话式交互好文合集」

原文地址:zhihu

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/dialog-ue-design-guide

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 设计师专访 职场 视觉设计 设计流程 用户体验设计 素材下载 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 产品设计 设计趋势 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里