浅谈模态框（modal window）的设计优化

窗前明月光，疑是地上霜。举头望明月，低头思姑娘。姑娘不可见，唯有守空床。

大家好，我是百万。今天我们聊一个模态框的几个设计小技巧。

首先什么是模态框呢？

古语有云：模态框者，modal window也。因其音，故名之。出则冻结万物，非解之而不可解他矣。

翻译成人话就是说，因为英文名字叫 modal window所以音译就是模态框。模态框出现后会冻结原窗口，虽然可见但不可操作。只有先完成它上面的操作才行。

其实我们就喊它对话框就行了。

无论我们设计还是开发是经常用到弹框的。因为它特别能吸引用户眼球（不吸引不行啊，不操作就不能继续使用）。就像有kindle很自然的就用来压泡面；买个iPad不自觉的了就刷剧了。

不过呢，我们这次是有模有样的讨论设计，所以呢还是说下如何（可能）正确的设计弹框。

1、首先第一条呢，就是不要使用弹框来做状态提醒

像错误提醒、加载中提醒、成功提醒等。

就提醒而言确实是非常好的一个提醒方式，但是对用户来说可不那么友好。试想一下，当你填完一个表单点击提交按钮时，出来一个弹框告诉你说“出现未知错误，请修改”。我们就得从头到位捋一遍看自己哪里做错了，若改的地方不对又会出来提醒一遍。

那怎么做呢？

当用户在填写表单时，帮忙校验并提醒用户输入的内容是否符合要求。如果输入的格式错误则在输入框旁边进行提醒，比如下面的示例。

这样用户知道自己错在哪也知道应该如何改正。

如果遇到网络问题该如何提醒呢？我们使用类似toast、snackbar这种提醒方式。web端也是类似的提醒方式，通常是在窗口的中央居顶的位置。

在加载过程中使用弹框来避免用户误操作还算合理。我们也可以做些优化。比如将Loading的状态展示跟我们的操作按钮合二为一。让用户知道，他点了这个操作按钮后需要等待，同时呢又避免他们再次点击这个按钮。

可能有人会说，看这意思就是不用弹框提醒了呗。其实不是，弹框提醒还是要用的。什么时候用呢？

当用户要执行那种不可逆的操作时需要进行提醒，让用户进行二次确认。像用户要删除数据库（跑路）了，或者要共享（机密）权限了等等。

2、稳住！少用系统弹框

上面我们说的那种弹框属于主动弹框，意思是在用户进行操作后跳出来的。还有一种被动出现的弹框，它是不经过用户操作自己出现的，其实就是所谓的系统弹框。

因为系统弹框的出现与用户操作无关，所以它可以出现在任何时候。因此也被广泛的用来做信息推广。

用户苦系统弹框久矣，因此只要看到它，就下意识的关闭。

所以比较安全的策略就是尽量使用主动弹框。除非遇到紧如账号异地登陆、或内存不足这类题型时使用。

3、文案要清晰易懂、切实引导用户

这里主要就是考验我们的文案功底了。可以让主操作按钮（希望用户点的那个）上的文本与弹框上的标题相匹配，这样会易于用户理解。

文本呢也要清晰、明确的告知用户接下来操作的后果。

比如，用户要使用本地服务时，弹框中的文本使用诸如“让我们帮助应用确定位置。这意味着即使没有应用运行，也会向我们发送匿名位置数据。”而不要用“设备要获取当前位置”的文本。

当然，操作按钮上应当展示“同意”与“不同意”按钮，而不是使用“是”和“否”这种无意义的按钮。

4、文案要简洁、操作要简单

不要让弹框出现滚动条。如果发现弹框中的内容过多时，应该想到不能用弹框了。

简单总结：一个弹框中最多放两句话；弹框上最多放两个按钮。

有时会看到弹框中出现像【查看更多】这样的按钮。这个按钮会引导用户离开当前页面，所以最好不要使用。

5、三个主要按钮的放置位置

这个不用多说了，我们之前也讨论过这三个按钮的使用方法，最后确认结果如下：

关闭按钮——放弹框右上角或弹框底部；

取消按钮——弹框底部左侧；

执行按钮——弹框底部右侧。

另外，要支持通过点击遮罩部分来关闭弹框。

6、让网页端的弹框可以用键盘操作

这个是有必要的。当出现弹框的时候，光标或者说焦点应该移动到弹框上。这样用户可以通过键盘直接对模态窗进行操作，而不用再通过鼠标移动光标。

再一点就是，要允许用户可以通过【ESC键】关闭弹框，你懂的。

7、不要出现嵌套弹框

我想大家也经常见到这种情况，就是在一个弹框上面还有一层弹框。这个的话确实一言难尽，我们知道不应该，但是产品经理非要让这样做。

如果可能的话，我们在设计时尽量不要出现这种嵌套的弹框。