此外，在设计师的日常工作中，也经常会遇到以下情况：

1. 概念混淆

不论是在设计师之间，沐鸣平台注册还是和产品或开发沟通过程中，常出现有人在说弹窗，有人在说模态，有人在问 “你们说的是对话框还是 popover ” 的情况。

1. 用法模糊

尽管 Apple HIG 等较为权威的设计指南已经对弹窗类型做出了梳理，但这些指南主要聚焦于移动端，在 PC 端仍然欠缺弹窗设计的完整决策标准。尤其是在一些业务流程复杂的 toB 产品中，这种决策问题更为明显。

针对以上问题，沐鸣平台开户本文阐述了弹窗的概念与分类，为 PC 端弹窗设计提供了一种决策路径，并给出了相应的设计建议。

本期提纲：

弹窗概念与分类
PC 弹窗设计：5 步决策法
总结与建议
弹窗概念与分类

1. 弹窗 Popup
   从广义上讲，弹窗（popup）顾名思义泛指弹出的窗口，是一种信息容器。如图所示，从容器形态上划分，弹窗主要有以下几类：

腾讯出品！PC端弹窗设计五步决策法

弹窗的类型

对话框 Dialog

“Dialog” 的本义是指人与人之间的对话，引申到界面交互上，是指人与机器的互动。对话框是一种需要引起用户明确操作的弹窗。视觉上常居中于屏幕。虽然对话框可以是模态或非模态的，但由于本身视觉形式阻断感强，大多都是模态的。（关于模态的定义见下文）

App 设计系列之模态弹窗与非模态弹窗
在手机app应用中各种格式的弹窗效果相信大家都看过，也可能反感过某些弹窗，本文就来谈谈关于app弹窗设计以及弹窗的适用情景。 一. 弹窗的定义 1. 弹窗作用 弹窗是为了让用户回应，需要用户与之交互的窗口。

阅读文章 >>
腾讯出品！PC端弹窗设计五步决策法

腾讯文档：权限修改确认

Popover

Popover 是一种触发后出现在屏幕内容上方的瞬时视图，通常有一个箭头指向弹出位置。可以是模态或非模态的。Popover 指向性明确，更适用于较大屏幕，并且可以承载多种信息元素。

腾讯出品！PC端弹窗设计五步决策法

苹果日历：新建日程

抽屉 Drawer

抽屉是一种从屏幕边缘滑进来的面板。抽屉的滑动方向既可以是垂直的，也可以是水平的。可以是模态或非模态的。移动端常见的从屏幕底部滑出的半屏也是一种抽屉。

腾讯出品！PC端弹窗设计五步决策法

Dribbble：查看作品详情

腾讯出品！PC端弹窗设计五步决策法

Google analytics: 权限管理

腾讯出品！PC端弹窗设计五步决策法

微信小商店：新建地址

比起对话框和 popover，抽屉可以更大程度上利用屏幕空间，因此能够承载更多内容，且与主界面的亲密度较高。但缺点是灵活度较低，只能横向/纵向降低尺寸。因此使用范围更小，多用于承载较为复杂的表单及字段较多的详情页。

还有一些比较轻量的弹窗形式如 tooltip（信息提示）以及临时出现的 toast，通常都是非模态的。

腾讯出品！PC端弹窗设计五步决策法