现在让我们来结合相关的使用案例,概括一下在实践中如何更好地设计对话框。
这是对话框使用得最有意义的情形——在你需要与用户进行交互之后才能继续操作的地方,或者是错误成本可能非常高的时候。
用户还没有进行任何操作的时候就突然弹出对话框,是一种非常糟糕的想法。很多网站弹出的订阅通知就是这种糟糕的例子.
一个对话框应该总是基于用户正在做(或者做过)的操作。这些操作可能是点击一个按钮,打开一个链接或者作一个选择。
a. 不是每一次选择、设置,或者是查看详情都需要以对话框的方式中断。
b. 不论对话框是以菜单还是内联的方式展示,都应该保留当前的上下文。
对话框应该使用用户的语言(用户熟悉的用词、短语和概念),而不是特殊的系统术语。
你应该使用一个明确的问题或声明,再在内容区附带上相关的解释,比如说“擦除您的内存?”或者“删除您的账户?”。通常,你应该避免道歉,用词含糊,或者提出疑问,类似“警告!”,“您确定吗?”
右边的对话框提出了一个特定的问题,描述了对用户的影响,并且提供了明确的操作方式。
避免给用户提供不明确的选项。你应该只使用清晰的选项。在大多数情况下,用户应该只基于标题和按钮上的文本就能够理解选项的意思。
对话框将对用户有用的隐晦信息明确罗列出来是很重要的。举例来说,一个对话框提示用户确认删除某些项目,应该将这些项目列出来。
此外,还应避免使用“了解更多”的方式来访问帮助文档;而应该使用对话框的内联展示来替代。如果有更多的扩展信息需要展示,在弹出对话框之前就应该提供给用户。
当一个流程结束的时候,记得给用户一个通知消息(或者视觉反馈),让用户知道她已经完成了所有必要的操作。
你不应该试图将太多内容塞进对话框。保持对话框干净简单(遵循KISS原则,KISS,即Keep It Simple,Stupid)。但简约并不意味着信息不全,所有的信息都应该是有价值和有关联的。
对话框绝不应该在屏幕上只显示一部分。你不应该让对话框出现滚动条。
反面例子:巴克莱银行支付处理对话框有很多的选项和元素,部分的选项只有滚屏之后才是可用的(尤其对那些屏幕相对较小的移动端设备)。
正面例子:Stripe使用了一个简单且智能的对话框,只包含必要的信息,并且在桌面端和移动端都有很好的展示。
对话框中不应该包括两个以上的操作。第三个操作,比如“了解更多”,将用户引导离开了对话框,可能会留下没有完成的任务。
“了解更多”操作引导用户离开这个对话框,使流程处于一个不确定的状态
将一个复杂的任务细分成多个步骤是个很不错的想法,但是这也意味着在一个对话框的范围内要完成的工作对用户来说可能有些过于复杂。
如果一个交互操作非常复杂,需要多个步骤(就像下面的例子),那么就保证当前的步骤就好了。
a. 如果你发现你正尝试将很多元素塞进一个对话框,这就意味着这个对话框并不是最好的设计方案;
b. 通过移除不支持用户任务的不必要的元素或内容来简化对话框;
对话框有两种主要类型。第一种是用以寻求关注的模态对话框,这种对话框强迫用户在继续接下来的操作之前提供交互信息。模态对话框通常用于分散的,不连续的进程:
(2) 为了关闭对话框,需要明确的“接受”或“取消”操作。当用户选择操作前,点击对话框之外的地方对话框不会被关闭;
第二种类型是非模态对话框,允许用户点击对话框之外的地方来关闭对话框。
你应该只对非常重要的交互操作(例如删除账户、同意条款和条件选择)使用模态对话框(第一种)。
同样移动系统(本地)对话框也是模态的,通常包含以下几个基本要素——内容、操作,和标题。
当打开一个对话框时,背景变暗是很重要的。这起到两个作用:一是将用户的注意力引导到对话框上,二是让用户知道页面当前是不活动的。
让用户通过点击对话框以外的背景区域来退出非模态窗口是一个非常不错的主意。
对话框应该避免弹出附加的对话框,这会增加网站或者app的景深,增加视觉复杂性。
a. 允许用户通过点击“X”按钮或点击背景等多种方式退出对话框(模态对话框除外)。
我希望这些非常好的实践是有趣并且对原型设计是有用的。记住,用户体验是关于人的,而不是技术。为你的用户找到最好的交互方式也是很简单的:模型化主要的对话框,并通过几个用户来对结果进行测试。




















