了解弹窗的类型和可以做到的事情，可以帮助我们在设计中做出更合理的决策，并且有助于我们梳理和规范现有产品框架、制定和完善设计规范。

　　在设计B端产品时，产品经理和设计师总会为写一个问题争执不休：在有限的页面空间，是否还能放些什么?而弹窗它可大可小，且能在当前二维页面之外衍生无限的空间，几乎可以做到所有页面能做的事，同时对于开发来说随便在html中加一个和一句话就能生成一个最简单的提示弹窗。是的，在产品设计中，弹窗真的太“方便”了!

　　或许正因如此，弹窗可能是产品设计中最被滥用的一种常用控件了。如果用户打开一个链接或是按钮后充斥的是一层层的弹窗，用户会感觉你的产品太复杂太难用!更糟糕的是，有的产品会很粗鲁的弹出各种“提示”、“警告”，还需要强制用户去点击或关闭——可能设计者以为这种”温馨提示“是“已用户为中心”，但很多时候我们完全可以以一种更为温和的方式来提醒用户(如toast、悬停浮层、输入框旁边的橙色文字等)。了解弹窗有哪些类型、可以做什么，能够帮助我们在设计时做出更合理的决策。

　　弹窗，是一种“展现于页面之上的一种信息容器”，在x、y轴的平面空间之外扩展了页面的维度和深度，它是一种比页面更灵活的信息容器。细分下来会有很多类型，但并没有一种很明确和统一的叫法。在移动应用流行以前的网页设计中，有对话框(Dialog)、警示框(Alert)、弹出层、弹框、浮层(popup)、气泡……现在，因为响应式设计和多平台统一的趋势下，甚至也有将android的toast提示、Actionbar，以及ios的透明指示层(HUD)和也算作是“弹窗”的一种。同时，非模态各种浮层和窗口，类型和用法千差万别;鉴于此，我在这里重点探讨我们在B端产品(PC端)中常用的传统意义上的“弹窗”。

　　以功能和用途为维度，笔者将弹窗分为三种类型：信息展示、任务、反馈。

　　一、信息展示

　　1、解释或说明

　　一般由用户主动触发的，包含图文信息，少数会有简单的操作按钮，如“确认”、“知道了”等等。

　　典型场景：欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图……

　　这种弹窗一般用来对页面内容作补充，用户通过点击图标或文字按钮，可以在当前页面展开弹窗。比如业务介绍、图表的取数说明、操作说明和引导等，这类信息往往与当前页面紧密相关，且从属于当前语境，所以并不适合用跳转页面、并列tab其或二级页面的形式来表达，因为这样无疑会加深页面层级，增加用户的认知负担。尤其是对一些很重要的操作说明或引导，甚至可以在弹窗中使用翻页或tab页签的形式来扩充弹窗的显示空间。

　　需要说明的是，很多产品喜欢对那些普通的字段解释和说明也使用带遮罩的模态弹窗，并需要用户点击才显示。这是一种很糟糕的设计。这种解释说明，完全可以用一般的非模态浮层来代替，用户只需要悬停就可以快速浏览，并且快速离开(移开触发区按钮或点击空白区域)(当然，如果内容太多，可能你要考虑设计跳转到新的页面而不是使用浮层或弹窗)。

　　类似这种页面的补充说明，使用悬停浮层体验会更好

　　2、内容拓展

　　这种类型常见于一些图表统计页面、列表页面。由于页面布局的限制，以及突出核心需求的原则，我们只会给用户展示最关心的统计结果和字段，不会也不可能把统计图表的所有详细数据和说明展示在当前页面。而这些内容往往又并未多到需要一个新的页面来容纳(同样会增加页面层级)，所以这时候就可以用弹窗来呈现。

　　内容扩展型的弹窗，主要有以下场景：查看详情、预览图片、数据透视、历史记录……

　　对于这种弹窗，模态和非模态并没有很大的差别。一般来说，如果是内容较少，并不会占用较大的屏幕面积，使用非模态的会更合适。因为用户只需要扫一眼内容就行，模态的可能会给用户一种“被打断”的感觉。而且，使用非模态的可以直接展现在目标旁边，关联性更好，同时可允许用户快速切换查看其它同类弹窗，且不会影响对其他的模块的操作和浏览。

　　弹窗的扩展样式——侧滑面板