在UI设计中，友好的对话框设计会使人机交互更高效，可以用户更方便、快捷的得到web页(或APP)想传达给用户的信息。但是如果设计的不好，那么对话框不但不能给用户带来便捷，反而会影响用户对信息的理解。为了让用户不受到困扰，我们应该了解如何才能设计好对话框。
什么是对话框？
对话框是一种覆盖式的，指引用户信息交互的设计。告知用户重要信息，并且让用户做出决定，或者做出相应的选择。不管是在web，还是在app中或是移动端，对话框的作用就是将用户的注意力从屏幕转移到作者想要用户专注的内容上。
那么，就让我用实践和案例来说明。
1.减少对话框的干扰
尽量减少使用对话框，因为它很容易打断用户思路。对话框的弹窗很容易让用户将注意力从既有的内容跳转到对话框的内容。用户必须处理完对话框的内容才能继续先前的阅读。或许有时这是一件好事，比如某些时候用户必须要确认某些重要的决定或是行为。但是在大多时候，频繁使用对话框是没必要甚至是很惹人烦的。
对话框是对信息的一种认可
使用对话框的场景往往是需要用户在继续某项之前作出决定。或者是继续下去会导致错误的成本很高的情况下才要使用对话框。
不要突然弹出对话框
在用户未完成某项任务的时候突然弹出对话框是非常不明智的行为。就像许多网站没完没了的弹出订阅对话框是非常恼人的一件事。
一个对话框的弹出一定是基于用户正要或者做完了某事之后。内容应当是一个确认钮，一个超链接或是某些选项。
小贴士
不是每一个选择，设置，或细节都要打断用户。
对话框是可以被菜单和内联展开所取代的，这样可以保持内容的完整，连贯性。
不要将对话框突然弹出，每次弹出一定是用户可预知的。
2.对话框表达要尽量贴近真实
对话框的内容要尽量用自然的语言描述（用那些用户熟知的文字，词汇和概念来描述），而不是用一些特殊的系统语言。
使用明晰的问题和选项
你应当在解释问题或表达内容时使用清晰的语言或是声明，比如：“确定要抹掉磁盘？”或者“确定要删除您的账户？”通常，你应当避免道歉性质或是有歧义的文字，尽量避免使用问句。（比如：“警告！”或者“你确定要这样吗？”）
避免当前用户读到的是模棱两可的选项内容。你必须细化，明确你的选项内容。大部分的案例是用户必须通过标题或者按钮上的文字就能理解内容。
举个例子（反面）：
像“否”这样的选项只是否定了选项，并没有告知用户会有怎样的后果。
再举个正面的例子：
“舍弃”这样的选项明确告知了用户点击后会是怎样的结果。
为用户提供重要的信息
不要使用晦涩的语言来描述，这点很重要，一定要告知用户最有用的信息。举个例子：对话框的内容如果是告知用户要删除，那么请列举出要删除的内容。
你还要尽量避免在帮助文档中使用“了解更多”的行为选项。相对来说内联式的模式可能在这里更适合。如果有大量的信息需要显示，那么应该在先前的对话框就要提示。
提供有用的反馈
当一个进程结束的时候，一定记得要显示一个通知消息（或者一个可视的反馈）。一定要让用户知道他所做的事情成功了。
小贴士
在对话框中使用明确、清晰的文字来描述问题或选项。
对话要首尾呼应（闭合）。
在用户行为结束后一定要告知用户。
3.力争做到最简单
不要尝试着把什么信息都塞入对话框，尽量保持对话框的干净与整洁（KISS 原则：Keep It Simple Stupid 大道至简）。但是极简并不代表着限制，那些必需的信息还是要呈现给用户的。
元素和选项的数量
对话框不要信息只显示一半，不要在对话框上还使用滚动条。
举个反面例子：巴克莱银行的支付系统的对话框里有太多的选项和元素，一些选项只有在滚动的时候才能看到（特别是在像移动设备这样的小屏幕上）。
举个正面的例子：Stripe 公司的对话框设计的非常合理，对用户只显示那些最基本且必要的信息，不管是在web端还是在小屏的移动端上显示都非常友善。
行为的数量
一个对话框上不要出现大于2个的行为,当有第三个行为时（像“了解更多”这样的），应当避免出现在同一个对话框中，否则让人会有未完成的感觉。
一个对话框中不要存在多个步骤
把一个复杂的问题拆解成多个步骤来解决是一个好方法，但要求用户在一个对话框的范围内完成答题会让用户觉得太复杂。
如果一个交互太复杂，需要许多步才能完成（就像下面的例子），那么它需要一个足以承载它复杂程度的页面来显示。
小贴士
如果你发现你设计的对话框承载了太多的元素，那么通常来说这不是一个好的设计。
你可以通过去除不必要的元素或者对用户无用的内容来简化你的对话框设计。
避免在对话框设计中使用太多步骤。
4.选择合理的对话框形式
对话框通常有2种主要形式，第一种类型是让用户的注意力集中的模态对话框，强制用户在下一步之前与他们进行互动。模态对话框通常用于阻断间隔进程，其中：
它不取决于周围环境是否会引导行为的执行。
它需要明确的指示来关闭，比如“同意”或者“取消”。当点击其他范围时他不应被关闭。
它的设计必须引导用户完成一个完整的进程。
第二种类型是非模态对话框，通俗的讲就是用户在空白处点击可以关闭的对话框。
当使用模态对话框时（第一种），一定有非常重要的信息需要用户来确认。（比如删除帐户，或者变更某种状态时）。
当然，移动系统（原生）的对话框形式通常是包含以下元素的：标题、内容、行为按钮。
5.视觉的连贯性
对话框置于背景之前
当打开一个对话框时，背景应当适当的变暗。这样做有两个好处，意识让用户的注意力集中到对话框的内容上，二是告知用户当前的对话框才是被激活的界面（而不是背景）。
清晰的关闭选项
通常的，在对话框的右上角应当有个明确的关闭钮（译者注：Mac os的规范在左边）。大部分的对话框在右上角（左上角）会放置一个“X”形的按钮以关闭或退出当前对话框。然而，对于普通用户来说，“X”钮还不够简便，因为用户可能花费更多的时间和精力以将鼠标聚焦在小小的“X”钮上以便点击。
最好的方法是使用非模态对话框，当用户点击空白或外部区域时，用户也可以方便地退出当前对话框。
避免对话框中再加载对话框
在对话框中就不要再加载额外的对话框了，在网站或者APP内叠加对话框，会增加Z轴上的冗余，使用户感觉到视觉上的复杂。
小贴士
允许用户在更广泛的区域点击以退出对话框（模态对话框除外）。
对话框中不要再加载冗余的对话框了。
结论
我希望这些有趣的实践在你做原型是能帮助到你。记着，用户体验的根本是人而不是技术。你会轻易发现什么设计才是对用户的最优解，多模拟，多测试，那么你一定能设计出让人愉悦的交互。
谢谢！
网友评论