![6ccbc57521ed4ca8b3028f7f3ee598e5.png](https://i-blog.csdnimg.cn/blog_migrate/4c1d2e6241a74ec8f5981ba437898898.jpeg)
本文是「经典交互模式」系列第二篇,前文回顾:面包屑导航 Breadcrumbs Trail
全文目录
- 什么是模态窗
- 模态窗的使用问题
- 模态框应用实践
什么是模态窗 Modal Window
我们在各种不同的屏幕应用中见过「模态窗」,全屏幕模态窗、弹出信息框、(跟随触发)弹出信息框、灯箱弹窗、多步骤对话框等等,它们有着不同的形状、大小和交互模式。
![f6de302092e79a416308427f1835bf50.png](https://i-blog.csdnimg.cn/blog_migrate/a900da50a0e3fcae1fffb8f04823805b.jpeg)
可以说,所有屏幕应用都可以分为模态窗口和非模态窗口。
什么是模态窗口?我们先从「模态」理解起。
Modal 模态是指计算机处于一种特殊状态下,此时用户进行同样的输入操作,会得到不一样的输入结果。典型的案例即按下 大写锁定(Caps Clock)时,用户输入的字母会变成大写,此时大写锁定键成为了模态开关。
![2171861a6b054c849814b0d3fae14cc0.png](https://i-blog.csdnimg.cn/blog_migrate/4cf29c0950ce4b17c9d72081b391c40d.jpeg)
而「模态窗」即指窗口的特殊模式:出现在前级主视窗前方,使主窗口可被看到(移动屏幕上可能出现全屏),但无法使用。用户想要返回主应用,需要先与模态窗进行互动。
在非模态窗中,用户可以自由的浏览、操作、返回或是通过导航跳转;而在模态窗中,你需要先完成操作,才可以返回状态。
![6fcdb57bbef03491e3062c658fd2357b.png](https://i-blog.csdnimg.cn/blog_migrate/e22222e6115c33f260f4c4222cdfc834.jpeg)
模态窗的使用问题
由于模态框覆盖原浏览内容且不进行操作无法离开的特点,它总被应用于强制打断用户的工作流程获取用户的注意力。久而久之,人们反而形成了一种「应激机制」——精准地找到「关闭按钮」,瞬间关闭。
![29fc1fea04e4ee5d2b4a7f93b20021e8.png](https://i-blog.csdnimg.cn/blog_migrate/96a01b1586c938113baa5568bacfcbd2.jpeg)
- 需要即刻的注意力
模态窗将系统置于一个特殊模态中,用户需要搞懂模态窗的内容并作出反应。
- 打断用户的工作流
从模态窗返回后用户需要额外的时间和精力想起此前的工作内容。
- 用户产生了额外的目标
有些复杂内容的模态窗花费了更多的额外成本,用户不得不将「关闭窗口」作为当前的任务目标。
- 遮挡了主窗口内容
特别是出现表单类模态窗口时,重要的信息被遮挡导致无法完成表单填写。
纵观带来的巨大交互成本,模态窗的使用却依旧广泛。因此,了解如何合理、节制地使用模态窗口或许可以帮助你创建更加安全、流畅的产品体验。
模态窗应用实践
- 展示更多内容
模态窗口可以用于展示更多的浏览内容,例如图片、视频等。
![b4504a6b612445a8f942617a51231770.png](https://i-blog.csdnimg.cn/blog_migrate/34aae18a50fd06d9cde8134ffd4532d2.jpeg)
- 完成一个独立的任务
模态窗口可以承载应用主任务之外的独立任务,它有着明确的触发点和结束点。
![4f3e752cb8a25d98e0f5fd50103e00c4.gif](https://i-blog.csdnimg.cn/blog_migrate/920fd267c2179d1abda1a7094abd3939.gif)
- 显示重要警告 用于预防或改正严重错误
预防总比补救更重要。这可能是最常见的模态窗使用方式。那么什么才是「防止严重错误」的重要时刻呢?
1 只需要用户留意就可以避免的错误
![dd1bd5d3e9c72ed483140d855494bf75.png](https://i-blog.csdnimg.cn/blog_migrate/8c56775eaea19be3b202ad48fa9cc14e.jpeg)
2 难以补救的错误
![4fee444f9c66ee89b0deffd1d6f1a17b.png](https://i-blog.csdnimg.cn/blog_migrate/d46759e5cdff3dca43912f461c1c5d69.jpeg)
- 补充重要信息 保证流程继续进行
由于信息的缺失,流程无法继续下去时,我们运用模态窗要求用户补全信息。
![3413c40d2532f43c634ce4269a7e65aa.png](https://i-blog.csdnimg.cn/blog_migrate/bc84566b27d57fd4d5d25551ce7872fb.jpeg)
- 避免让用户在模态框中做复杂决策
模态窗的内容应当简洁、直接,避免用户完成复杂的计算或研究。例如模态窗显示的商品优惠,却遮挡了原价信息,用户难以做出选择。
![3b341c31fe6ca720395269e06f51b5d5.png](https://i-blog.csdnimg.cn/blog_migrate/3c4098c50b056c9005bc4605b3303bae.jpeg)
- 避免用模态窗显示提示消息
警告或错误提示尽量出现在相关目标旁边,消息通知不需要额外占用用户的注意力。
![10a42281a8f61914c44719f35944de18.png](https://i-blog.csdnimg.cn/blog_migrate/9accc28b6dfbc17e9ee3833328b1003d.jpeg)
总结
无论是否使用模态窗口,我们的产品目的总是帮助用户解决问题、完成任务继而达成目标。没有人愿意自己着手的事情没打断,所以在应用模态窗时,衡量一下它的交互成本,并保证用户会觉得这次中断是有价值的。
参考链接
- Therese Fessenden, Modal & Nonmodal Dialogs: When (& When Not) to Use Them, Nielsen Norman Group
- Raluca Budiu, Interaction Cos, Nielsen Norman Group
- Naema Baskanderi, Best Practices for Modals / Overlays / Dialog Windows, uxplanet.org
- Fabian Sebastian, Modality Is the One UX Concept That Most Designers Don’t Fully Understand, uxplanet.org