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

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

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

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

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

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

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

对话框一般由什么组成?

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

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

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

什么是模态对话框?

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

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

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

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

为什么使用模态对话框?

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

1. 获取用户的注意力

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

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

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

2. 显示次要内容

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

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

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

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

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

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

3. 隐藏复杂性

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

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

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

什么是非模态对话框?

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

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

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

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

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

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

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

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

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

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

原文地址:zhihu

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

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

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

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

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34402/

(0)
震天下震天下
上一篇 2017-10-25
下一篇 2017-10-31

相关推荐

  • 12个线框图示例,来自Dribbble的UX设计师分享。

    在设计过程的最初阶段,我们知道很有可能直接选择word或邮件原始需求。但是,用线框技术解决问题有很多好处,它可以节省时间,更易于发现可用性问题,并让设计人员专注于创造可靠的用户体验

    2017-12-26
  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • 饿了么 UED 又搞事情啦!

    近日,据保洁阿姨匿名举报,在上海饿了么总部的榴莲酥会议室内,有人在工作时间聚众搞事情……据说场面隆重,气氛活跃,不堪入目。本台记者 @孟小雨 迅速赶往了现场。-----据调查,这次始作俑者是作为宇宙霹雳无敌超级吃货公司饿了么中最有逼格+设计感的团队—— UED 部门。在这个辞旧迎新、恭喜发财、还不放假的时刻,该部门秘密召开了第一届 UED 年度颁奖典礼!记者被大会的美食吸引,潜入该组织内部,随即被惊呆了。说到颁奖会,你以为是这样的?领导...

    2018-02-25
  • QQ国际版视觉探索:准备了两套视觉设计方案

    QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。

    2017-05-08
  • H5时代的多行文本框

    说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!首先一起回顾下输入框在PC端的应用:

    2017-06-04
  • 奥斯陆建筑学院国际建造课程招募!| 2018楼纳教育启航

    📌 编辑 | YHz奥斯陆建筑与设计学院(AHO)位于挪威首都奥斯陆,是挪威顶尖的建筑学院,也是挪威研究型大学系统中的自治机构。学院提供建筑与工业设计领域的教育,在建筑教育领域有很大影响力。- 课程背景 -2018年4月,奥斯陆建筑与设计学院(AHO)将首次在中国楼纳开设建造课程——“传统木构节点的数字化演绎”工作坊,将由于2012年在奥斯陆建筑与设计学院成立的Scarcity and Creativity Studio(以下简称“SC...

    2018-03-13
  • 这个按钮不简单

    Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换,并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时,会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时,「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

    2017-06-05
  • 5分钟,带你掌握20个表格设计技巧

    译者Jimmy:貌似翻译项目走上了正轨,应该能保持一周更行一篇,或者两周更新一篇的节奏。:)这次翻译的是一篇关于数据报表的文章,对于没有设计过报表的设计师来说,应该很有用!文章标题有所修改。原因自然是为了点击量啦~ 哈哈~

    2017-04-30
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 创新与用户体验---工业设计的双驱动力

    4月18日上午深圳融一凤巢设计发展有限公司创始人兼深圳市工业设计协会副会长仪永杰在PDC设计廊会场与到场展客商分享并探讨了现今智能硬件和消费电子类领域的设计发展趋势。仪永杰认为在消费升级的市场导向下,供方市场慢慢转化为需方市场,消费者不仅满足于产品的存在,更多的是产品在消费者内心中碰撞出情感。以小米科技为例,现今决定设计生命力延伸的是创新意识,是对工业设计创新的重视程度。从设计服务到产品化和供应链都需要整合创新满足用户对产品日益增长的功...

    2018-04-18