文章结构

1.弹窗的定义

2.常见的弹窗

3.弹窗的分类：模态弹窗/非模态弹窗 （概念解析、常见案例、何时使用）

4.对话框/抽屉  （概念、常见类型、案例、尺寸、如何使用、抽屉还是弹窗）

说说这篇文章的由来

在2021年终总结时发现这些年读了很多的文章，虽说也会通过各种工具记录整理，但还是会觉得零散。最好的输入是输出，今年给自己定的目标是写 10 篇文章。一来是把零散的知识整理归纳，串联知识结构度；二来是通过课题研究，提高专业深度。

在B端的产品设计中，经常会使用到弹窗。选择合适的弹窗展示形式，避免过度打扰用户，有效的向用户传递/收集信息，帮助用户做出更合理的决策，完成复杂的任务，今天来聊聊如何设计 B 端产品的弹窗。

一、弹窗定义：

 弹窗是展现在用户操作界面之上的容器，在 X 轴和 Y 轴的平行空间之外扩展了页面的高度。通过承载对应信息，对当前操作进行补充/传递，是一种更灵活的信息容器。

二、常见弹窗类型

常见的弹窗类型：对话框 Modal、抽屉 Drawer、警告提示 Alert、全局提示 Message、通知提醒框Notification、气泡确认框Popconfirm （在此重点阐述 B 端产品的弹窗）。

三、弹窗的分类

从交互形式上，弹窗分为 模态和非模态。通常来说有遮罩为模态，无遮罩为非模态。

1.模态（Modal）

a 概念解析：

模态是目前比较常见的类型，打开模态弹窗，会停止当前所有工作的进度，它所属的应用程序不能继续进行，直到对话框关闭为止。

比如说我在开车的过程中，路过收费站，必须将车停下来拿卡缴费。打断我的当前的驾驶行为，专注完成交卡收费行为。

模态弹窗最常见的类型：对话框（Modal）、抽屉（Drawer）

b 常见案例

01.淘宝卖家平台对于商品删除，考虑到商品的重要性，在删除前通过对话框的形式做二次确认。

02.阿里云以抽屉的方式展示模块信息。这么做的主要考虑是抽屉可以展示较多的页面信息，同时支持搜索和筛选等功能，并且在点击抽屉后弹出二级页面，有较强的拓展性。

C 使用场景

01.模态对话框的目的和使用范围对用户而言非常清晰，比较容易引起注意；

如：在执行一个重要信息的删除时，通过二次询问引起用户的注意，让用户再次做判断；

02.承载较为紧急的信息，让用户快速处理；

如：用户未保存，就点击离开当前页面，通过对话框让用户做出选择。

03.平台限制用户需要执行完信息后才能进行后续的操作；

如：有赞的功能模块需要付费后才能使用，弹窗内容可以是该模块的介绍；

04.流程的引导；

例如：阿里云产品当用户首次进入，会出现分步骤的引导。

缺点：

01.本质上强制中断用户的工作流程，需要立即关注；对于一些高风险如下单流程、支付流程要慎重使用；

02.造成认知负荷，可能会忘记原始任务相关的一些细节；

2.非模态化（Non-Modal）

a 概念解析：

可以不打断父应用程序，无需停止进度，用户仍可以于父级内容进行交互。大部分应用于信息的反馈和提示。

继续用开车做例子，在开车的过程中，我可以听着音乐，可以拿起口香糖放到口中。不必完全中断我当前的操作，可以继续甚至同时处理。

非模态化弹窗最常见的类型：警告提示 Alert、全局提示 Message、通知提醒框Notification、气泡确认框Popconfirm 

b 常见案例：

01.阿里云的【帮助文档】在支持查看文档的同时，也支持对父页面进行编辑。帮助文档的作用是指导用户进行软件操作，基于这种使用场景选择非模态弹窗，用户可以在两者之间切换，极大的提高帮助文档的使用质量。

02 微信公众号对新建分组的命名使用的非模态弹窗，属于气泡确认卡片popover的演化。这种方式是基于分组命名是一个非主流程、低频率、轻量级的操作，所以选择这种温和的方式。

c 使用场景

01.非主流程相关的任务提示；

如：对于一个创建流程来说，加载提示一个非主流程的操作，选择全局提示Message进行反馈提示；

02.用户可以在父应用程序和弹窗间快速切换，可以通过参考父级的信息对弹窗做操作；

如:在飞鱼CRM平台用户无需关闭抽屉，只需要在父页面切换不同的联系人，即可查看/修改该联系人的详细信息；

03.比较温和、低打扰，用户无需停掉当前的工作来完成；

缺点：

01.避免用来承载内容较多、过于重要的信息。

02.避免让用户做较为复杂的操作；

3.模态还是非模态

模态化弹窗最常见的类型：对话框（Modal）、抽屉（Drawer）；非模态化弹窗最常见的类型：警告提示 Alert、全局提示 Message、通知提醒框Notification、气泡确认框Popconfirm ；

但是，并不是所有的对话框和抽屉都是属于模态化弹窗。

在决定使用两种类型时，需要参考上下文的工作流程和业务场景，避免不必要的打断用户和他们的工作流程。最终的目的是引导用户高效完成任务。

四、对话框 / 抽屉

对话框/抽屉（概念、常见类型、案例、尺寸、如何使用、抽屉还是弹窗、抽屉使用）

在Ant D等众多平台级设计组件规范中对警告提示 Alert、全局提示 Message、通知提醒框Notification、气泡确认框Popconfirm 都有较为明确的定义；

但是在实际的项目中，对话框 Modal、抽屉 Drawer 有较高的使用场景以及较强的业务属性；在此主要针对对话框 Modal、抽屉 Drawer进行研究