模态，弹层，对话框，不管你如何称呼它，现在让我们来重新审视一下这个部分。当它第一次出现时，模态窗口曾经是一种优雅的视觉解决方案。首先它简化了视觉，其次，它节省了屏幕空间。从那以后，设计师就非常乐意使用模态窗口，而且有些设计师甚至过度的使用它。模态窗口慢慢演变成了今天的这种可怕的弹窗。人们觉得它十分讨厌，并且本能的、不自觉的忽略这些窗口。

定义

一个模态窗口是一个覆盖于软件主要结构框架之上的窗口。它创造了这样一种模式：模态窗口以一种子窗口的形式出现在主界面上方，使主界面可见但是不响应任何操作。用户必须完成模态窗口上指定的操作之后，才可以回到主界面。

用法

你可以在你有如下需求时使用模态窗口：

1、获取用户的注意

当你必须打断用户当前正在进行的任务流，将用户全部注意力引导到一个更加重要的事情上时。

2、需要用户输入

当你需要用户输入信息时。举个例子，注册或者登录。

3、在内容中展示额外的信息

当你想在用户消费主页面中内容的同时想展示一些额外的信息的时候可以使用它。例如展示大图或者视频。

4、展示额外的信息（不是在内容中展示）

当你想展示一些不是直接依赖于母页面额外信息，或者其他的一些不依赖于页面的独立选项。例如通知。

小贴士：不要用模态弹窗展示错误、成功、或者警告信息。让这些信息留在页面当中。

一个模态弹窗的详细剖析

不好的弹层会妨碍任务的完成。通过下面的方法来保证你的弹窗不会犯这样的错误：

1.逃生阀

给用户一个离开的途径，这样他们就可以主动关闭弹窗。可以通过如下的方式实现：

- 取消按钮

- 关闭按钮

- 退出按键

- 点击弹窗以外的区域

易用性小贴士：每个弹窗都必须有一个可以通过键盘控制的快捷退出方式。例如应该可以使用ESC按键来关闭弹窗。

2.描述清晰的标题

通过标题告诉用户一些信息。这样可以让用户知道他们当前所处的位置——他们并没有离开最初的页面。

点击“Tweet”按钮——弹窗标题：创建新推特。给出信息。

小贴士：呼出弹窗的按钮中的文案应该与弹窗标题相呼应

3.按钮

按钮应该有一个可操作、可理解的名字。这取决于按钮所处的具体情况。在模态弹窗中，一个“关闭”按钮可以是一个按钮或者仅仅是一个“X”。

Invision拥有简洁明了的按钮

小贴士：按钮上的文案不要使人困惑。如果用户点击了取消按钮，但是弹窗出现了另外一个取消按钮，困惑就出现了，“我是在取消我的取消操作，还是在继续之前的取消？”

4.大小和位置

一个模态窗口不应太大也不应太小，你希望它刚刚合适。目标是保存应有的信息，同时一个模态窗口不应该占据整个可视窗口。内容需要适应模态窗口。如果需要一个滚动条，你需要考虑创建另外一个页面来代替它。

- 位置——屏幕中央偏上，因为在移动设备中，如果处于靠下的位置可能会在可是窗口中消失。

- 大小——不要占用整个屏幕超过50%以上的面积

5.焦点

当你使用灯箱效果（使背景变暗）来打开一个模态窗口时，由于用户无法再与母页面进行交互，因此用户的注意力被吸引到模态窗口中。

小贴士：此时要将键盘的光标焦点同时移到模态窗口中

6.让用户的操作触发开关

不要突然弹出一个模态窗口，这样会吓到用户。让用户产生一个操作行为，例如点击按钮、链接或者选择一个选项，以此来出发模态窗口。不请自来的模态窗口会惊吓到用户，并且会导致用户直接忽略其中的内容。

点击呼起的登录弹窗

移动设备中的模态弹窗

模态弹窗和移动设备并不能很容易的和谐相处。由于模态弹窗的面积通常较大，占用了屏幕或大或小的一部分区域，因此在使用模态弹窗的同时消费内容就变得不那么容易了。加入设备键盘或者嵌入的滚动条等等元素，用户会不停缩放屏幕，视图寻找模态弹窗的位置。模态弹窗可以有很多替代的表达方式，最好不要在移动设备中使用它们。

做的比较好的模态弹窗——facebook

键盘

创建模态弹窗时，时刻记得添加可使用的键盘操作。考虑如下几点：

打开弹窗——呼起弹窗的元素必须是键盘可操作的

将焦点移动到对话框中——当模态弹窗打开之后，键盘焦点应该移动到模态弹窗的最顶端

管理键盘焦点——当焦点移动到对话框中之后，它必须固定在输入框中，直到对话框关闭

关闭对话框——所有弹窗都应该有一个键盘可控的退出方式

总结

如果用户被训练的不自觉的关闭模态弹窗，你还有什么理由使用它们呢？

获取用户的注意，同时保证内容和视觉上的简洁清晰是模态弹窗最大的优点。但是，它也有着自己的缺点，它会阻断用户工作流，并且使用户无法与隐藏在模态弹窗后面的母页面中的内容进行交互。模态弹窗并不总是最好的解决方案。当你做出选择的时候，考虑如下几点：

检查清单：

- 你要在何时使用模态弹窗？

- 如何使用模态弹窗？

- 模态弹窗要长成什么样子？

- 模态弹窗中需要展示什么信息？

友善工作室  供稿