浮层是在页面上方展示的浮层容器，可展示文本、按钮、列表、标签、表单项等内容，在 B 端产品中有着非常广泛的应用

浮层是在页面上方展示的浮层容器，可展示文本、按钮、列表、标签、表单项等内容，在 B 端产品中有着非常广泛的应用。

根据内容和作用，可以分为不同的设计组件。例如 Notification，Tooltip，Dialog 等等。

这些组件都可以看作是页面空间的延展，最近在项目工作中有了一些新的思考，今天我们就来讨论下浮层组件的设计，希望大家能够有新的收获。

主要内容包括以下 4 部分：

1. 浮层组件的类型
2. 浮层组件 3 个的特点
3. 几个应用案例
4. 浮层组件应用的注意事项

一、浮层组件的类型

说起浮层就离不开“模态”和“非模态”。

简单的理解，“模态”就是用户必须进行交互操作的浮层，否则浮层会一直存在，并且无法进行页面功能操作。

例如对话框，这种强制性保证了对话框信息的有效传递，但是对用户操作流程造成了比较强的阻断。“非模态”则不需要给出反馈，不影响用户的其他操作，没有强制性，可以说是“来去自如”。

微信 PC 端图片查看功能中信息提示很好的反映了两者的差异。对于无法查看的图片，采用模态弹窗形式，提醒用户无法查看的原因，用户需要点击确定后，才能继续操作。

如果查看到最后一张图片，系统采用非模态的 Notatifion 组件提醒。组件未消失时，用户也可以回看或其他操作，更加轻量化。

具体到组件设计层面，浮层的类型就比较多了。

例如 AntDesign 设计规范共定义了 8 种浮层组件，Element 设计规范则定义了 9 种浮层组件，增加了 Messagebox 组件，其实就是 Dialog 对话框的简易版。具体的差异感兴趣的同学可以自己去查阅一下。

Ant Design设计规范

Element 设计规范

二、浮层组件的特点

1. 构建独立空间，简化页面信息量

浮层在一定的条件下触发展示，作为一种容器可以形成临时的内容空间。不会占据页面空间，并且可以简化页面的信息量，有助于页面的内容布局。例如常见的数据可视化展示时，重点在于图形展示，详细数据放置在浮窗中展示，从而保证了页面的可视化效果。