编辑导语：设计师在工作中经常能够接触到移动端弹层，但同时在设计过程中通常也存在着许多的疑惑。本文作者通过总结自己的设计经验，将其对弹出层组件的理解和设计经验分享给大家，希望你看完能够有所收获。

工作中我们常常会听到或在撰写交互说明时提到“从底部向上出现弹层”、“出现浮层”、展示“对话框”、弹出“弹框”、“出现对话框”诸如此类的话术。

我相信大家对“浮层、弹层、弹框、对话框……”等称呼常常也会感到困惑。到底什么时候应该称呼为对话框，什么时候称呼弹框？，此类相似的组件又是如何分类的，应该如何应用、如何设计。

恰好笔者近期在设计弹出层组件，本篇文章将结合自己的实战经历，自己对弹出层组件的理解和设计经验分享给大家，希望帮助大家对弹出层组件有更清晰的认知和理解。

一、弹出层组件的定义

首先我们看一下弹出层组件的定义：当触发某项操作时，在页面上方展示的弹出层容器，容器内可展示文本、按钮、列表、标签、表单项等内容，英文名称定义为Popup。

图1 弹出层组件的构成

根据弹出位置的不同，我们又可以将Popup组件细分为如下5种样式。

图2 弹出层组件的5种样式

看到弹出层组件的样式，想必大家已经联想到日常用的比较多的组件了，比如“Alert确认框，picker选择器、基于场景的筛选组件”等。弹出层组件是十分基础的组件，基于该组件我们可以开发通用性组件以及场景组件。

从“形式”角度来看，“浮层、弹层、弹框、对话框……”本质上都是弹出层。“浮层、弹层、弹框”是泛指的称呼，两大官方平台也都根据自身的规范对相关组件进行命名。

Material Design和IOS官方规范中的弹出层组件如下图所示，并且笔者从“功能”角度出发整理了组件之间的对应关系，后文会详述每种组件的定义及应用。

图3 MD和IOS规范中的弹出层组件

在详述组件之前，还需要向大家传达一个概念“模态”，即平时我们常说的“模态弹框”（弹框可理解为是弹出层的一种样式）。并非有一种组件的分类被称作是“模态弹框”，而是当弹框采用了“模态”的设计手法时，我们将其简称为“模态弹窗”。

iOS官方定义为：“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:Help people focus on a self-contained task or set of closely related optionsEnsure that people receive and, if necessary, act on critical information”

翻译过来即：模态是一种设计手法，它使用一种临时性的模式将用户之前看到的内容与当前看到的内容进行区分，并且需要通过明确的操作才能退出该模式。模态呈现的内容可以：

• 帮助用户专注于一个独立的任务或一组紧密相关的选项；
• 确保用户收到关键信息，并在必要时采取行动。

由此可见，弹层是否为模态弹层可以根据具体的使用场景进行定义。

在iOS官方中定义的模态弹层通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后续的系统中将Fullsreen也作为模态弹层进行使用。MD中的Dialogs组件均为模态，而sheets组件不采用模态设计手法。

二、弹出层组件的分类与应用