您现在的位置: 破洛洛 >> 建站学院 >> 网站运营 >> 策划赢利 >> 正文

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

作者:佚名 来源:chinaz 更新时间:2019-7-11
分享到

2. 显示次要内容

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

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

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

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

3. 隐藏复杂性

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

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

  • 容易理解。模态对话框往往简短易懂,新用户可以快速完成对话框里的任务。

  • 容易撤销。如果新用户一不小心通过按钮或菜单打开了模态对话框,他们可以随时点击「取消」。

  • 容易导航。因为用户仍可看到模态对话框下面的部分主视图,他不会搞不清楚他在哪里。如果他不想继续,可以随时关闭对话框并回到之前的视图。

什么是非模态对话框?

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

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

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

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

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

转载请注明:破洛洛(谢谢合作)

  • 上一篇文章:
  • 下一篇文章: 没有了
  • 网友评论: