文章作者：Rindy
在设计B端产品时，产品经理和设计师总会为写一个问题争执不休：在有限的页面空间，是否还能放些什么？而弹窗它可大可小，且能在当前二维页面之外衍生无限的空间，几乎可以做到所有页面能做的事，同时对于开发来说随便在html中加一个<alert>和一句话就能生成一个最简单的提示弹窗。是的，在产品设计中，弹窗真的太“方便”了！
或许正因如此，弹窗可能是产品设计中最被滥用的一种常用控件了。如果用户打开一个链接或是按钮后充斥的是一层层的弹窗，用户会感觉你的产品太复杂太难用！更糟糕的是，有的产品会很粗鲁的弹出各种“提示”、“警告”，还需要强制用户去点击或关闭——可能设计者以为这种”温馨提示“是“已用户为中心”，但很多时候我们完全可以以一种更为温和的方式来提醒用户（如toast、悬停浮层、输入框旁边的橙色文字等）。了解弹窗有哪些类型、可以做什么，能够帮助我们在设计时做出更合理的决策。
弹窗，是一种“展现于页面之上的一种信息容器”，在x、y轴的平面空间之外扩展了页面的维度和深度，它是一种比页面更灵活的信息容器。细分下来会有很多类型，但并没有一种很明确和统一的叫法。在移动应用流行以前的网页设计中，有对话框（Dialog）、警示框（alert）、弹出层、弹框、浮层（popup）、气泡……现在，因为响应式设计和多平台统一的趋势下，甚至也有将android的toast提示、Actionbar，以及ios的透明指示层（HUD）和也算作是“弹窗”的一种。同时，非模态各种浮层和窗口，类型和用法千差万别；鉴于此，我在这里重点探讨我们在B端产品（PC端）中常用的传统意义上的“弹窗”。
以功能和用途为维度，笔者将弹窗分为三种类型：信息展示、任务、反馈。
一、信息展示
1、解释或说明
一般由用户主动触发的，包含图文信息，少数会有简单的操作按钮，如“确认”、“知道了”等等。
典型场景：欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图……
这种弹窗一般用来对页面内容作补充，用户通过点击图标或文字按钮，可以在当前页面展开弹窗。比如业务介绍、图表的取数说明、操作说明和引导等，这类信息往往与当前页面紧密相关，且从属于当前语境，所以并不适合用跳转页面、并列tab其或二级页面的形式来表达，因为这样无疑会加深页面层级，增加用户的认知负担。尤其是对一些很重要的操作说明或引导，甚至可以在弹窗中使用翻页或tab页签的形式来扩充弹窗的显示空间。
需要说明的是，很多产品喜欢对那些普通的字段解释和说明也使用带遮罩的模态弹窗，并需要用户点击才显示。这是一种很糟糕的设计。这种解释说明，完全可以用一般的非模态浮层来代替，用户只需要悬停就可以快速浏览，并且快速离开（移开触发区按钮或点击空白区域）（当然，如果内容太多，可能你要考虑设计跳转到新的页面而不是使用浮层或弹窗）。
类似这种页面的补充说明，使用悬停浮层体验会更好
2、内容拓展
这种类型常见于一些图表统计页面、列表页面。由于页面布局的限制，以及突出核心需求的原则，我们只会给用户展示最关心的统计结果和字段，不会也不可能把统计图表的所有详细数据和说明展示在当前页面。而这些内容往往又并未多到需要一个新的页面来容纳（同样会增加页面层级），所以这时候就可以用弹窗来呈现。
内容扩展型的弹窗，主要有以下场景：查看详情、预览图片、数据透视、历史记录……
对于这种弹窗，模态和非模态并没有很大的差别。一般来说，如果是内容较少，并不会占用较大的屏幕面积，使用非模态的会更合适。因为用户只需要扫一眼内容就行，模态的可能会给用户一种“被打断”的感觉。而且，使用非模态的可以直接展现在目标旁边，关联性更好，同时可允许用户快速切换查看其它同类弹窗，且不会影响对其他的模块的操作和浏览。
弹窗的扩展样式——侧滑面板
还有一种比较常见的“弹窗”，会以侧滑的形式出新，而不是加遮罩层的模态弹窗。这样做的好处是，用户在查看弹窗内容的同时，不会失去当前页面的信息，方便用户进行对比、参照和检阅；同时并不会影响用户对界面其他区域的操作。这种形式一般在表格中出现较多。当然，这里的弹窗并不局限于一般的对话框样式，我们也可以使用侧滑浮层。
而对于那些信息量较大（可能有滚动条、拖拽操作等），甚至会有一些可选的支线任务或扩展操作时，建议最好使用模态的弹窗。这样可以让用户的注意力更为聚焦，且可减少可能产生的误操作（一些非模态的弹窗允许用户点击弹窗范围外区域关闭弹窗）。
渐进式的展示：
除了弹窗和二级页面，还有一种信息展示方式——渐进式的策略值得借鉴：即在页面只展示结构式信息和核心元素，更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响，但你能得到一个更清爽更简洁的用户界面。