在交互流程上，浮层组件停留在当前页面，相比页面跳转的交互方式效率更高

对于强调操作效率的 B 端产品，如非必要，需要尽量减少页面的跳转次数，实现当前页面内的流程闭环。

在交互流程上，浮层组件停留在当前页面，相比页面跳转的交互方式效率更高。

在触发机制上，非模态浮层可以实现悬停展示，移走消失，操作更加方便。

某些信息反馈类的组件还可以自动消失，最大程度上减少了用户操作。并且非模态浮层同样可以承载按钮、选择器，表单等功能性组件，用户可以就近操作，从而提高效率。

QQ浏览器设置浮窗

在页面布局方面，浮层也更加灵活，可以出现在页面中间、侧边、上方、下方等各个位置，尺寸可大可小，对于不太复杂的信息都有较好的适应性。

3. 实现操作的所见即所得

由于非模态窗口不具有强交互性，一般不占据屏幕中间位置，更多的是跟随功能选项或者页面边缘。这就为功能操作的所见所得提供了便利性，方便用户做出操作决策。

例如表格列设置功能，操作后即可实时展示操作结果。或者页面皮肤的设置，用户选择后即可预览效果，方便用户对比选择。

QQ浏览器皮肤切换

三、浮层组件的应用案例

在实际使用场景中，浮层组件主要应用在信息反馈、内容展示和功能操作 3 个方向，给大家介绍几个案例。

1. 预览展示，减少用户的操作成本

Windows11 任务栏悬停程序图标时，显示浮窗预览当前运行的任务，通过图形化的方式，让用户更好的识别任务内容，便于用户做出选择。

在淘宝 Web 端订单页面，商品在未收货状态下，物流状态就成为用户更加关心的信息，悬停显示物流最新状态，用户可以不进入详情页快速获取信息，交互上更加便捷，有效的减少了用户操作成本。