产品中的弹窗、抽屉、当前页和新开页该如何选择？

在一款产品中经常看到有弹窗、抽屉、当前页、新开页这种元素，看似只是交互容器的选择，实则关乎信息密度、操作路径与用户心智的精准匹配。今天小编从B端产品的真实场景出发，拆解四种容器的使用逻辑与适配原则，帮助产品经理构建更清晰的设计判断框架。

在B端产品的设计实践中，你是否曾面临过以下的灵魂拷问？你是否困惑过为何此处要用弹窗而非抽屉，或用新开页而非当前页刷新？不同的信息承载方式背后，实则暗含对业务场景与用户体验的深度权衡。为构建更高效的设计决策体系，我们有必要系统梳理这四种交互呈现模式的应用准则与场景边界。

开发：“这里信息这么少，为什么要新开页面，为什么不用弹窗？”

客户：“为什么要新开这么多页面？浏览器都被填满了。”

领导：“怎么一会弹窗，一会抽屉？交互体验割裂感太强了。”

一、什么时候使用弹窗？

弹窗主要用于在不离开主路径的情况下，提供用户快速完成信息传达、状态反馈和引导操作的窗口。从交互形式上可以分成模态弹窗和非模态弹窗，具体可见之前写的一篇文章。https://mp.weixin.qq.com/s/O9LpplTXP7eZBAhAK67EXw

优点：有利于上下文的连续性，让用户能够在不脱离当前业务场景的前提下完成交互，而且打开和关闭的速度都很快，有效避免信息断点和操作割裂感。

缺点：窗口区域的扩展性有限，不能承载过多的信息和复杂的页面结构，比如叠加的窗口就在视觉和交互上都降低了用户体验。

我们可以来模拟一个场景，比如你用游客身份登录购物网站，这个时候你想购买某样东西，点击购买可以采用弹窗或者页面跳转两种方式，你会选择用哪种呢？其实用户被要求登录的时候操作已经被打断，如果跳转到新页面，意味着本页面的内容对用户不可见，用户会疑虑我要购买的商品是否还在，会不安，产生心智负担。

相比之下，弹窗相对更轻量化，可保持当前页面可见，操作更具有连贯性，用户体验也会更好。

使用场景：

1. 需要呈现的内容篇幅相对较少，过少或者过多的信息都要考虑其他的内容呈现方式。
2. 用户在进行流程操作或者你想让用户进行一个不被打扰的流程操作时候尽量使用弹窗信息层，因为大部人的认知里跳转新层级执行完操作之后原来浏览的页面不知道是否被保留了，而这样的顾虑，会给用户带来不必要的思考时间，从而影响流程操作的操作流。
3. 常用于临时性、补充性和突发性的信息展示或简单操作，比如对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
4. 可作为次级关键信息的过渡承载，比如打开新页面的过渡，避免多次跳转而失去方向。

使用注意：

1. 尽量避免弹窗上叠加弹窗。
2. 弹出弹窗时需要锁定背景页面，禁止跟随弹窗滚动。这点需要根据实际场景灵活处理，比如在淘宝网站，为了促进用户登录转化，允许背景页面滚动，以保持操作连贯性。

二、什么时候使用抽屉？

抽屉（Drawer）是从屏幕边缘滑出的浮层面板。抽屉一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。可自定义上下左右四个方向，一般右侧最为常见。

优点：可承载信息量较大，用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

缺点：窗口区域的扩展性有限，不能承载过多的信息和复杂的页面结构。

使用场景：常用于展示细节信息、补充详细信息和编辑内容等，比如弹窗展示的表单信息过长时，使用抽屉就可以得到更大的空间利用率。

使用注意：

1. 在一些场景中，该组件可以使用两个层级，第二层抽屉可以由第一层抽屉中的内容唤起，关闭时需要按顺序一层层关闭。但一般不推荐使用两个以上层级的抽屉。
2. 弹出弹窗时需要锁定背景页面，禁止跟随弹窗滚动。
3. 避免中间弹窗跳转抽屉弹窗的交互方式。

那么，什么时候使用弹窗，什么时候使用抽屉呢？

从内容承载量上判断，一般原则就是内容少就用弹窗，内容多就用抽屉。

从触发方式上判断，一般来说当反馈内容由系统出触发，例如提示、警告、确认信息等，推荐使用弹窗式；当反馈内容由用户触发，例如查看详情和信息录入，推荐使用抽屉式。

但是为了保持页面一致性，还要根据实际情况判断到底采取哪种方式合适。

三、什么时候使用当前页/新开页？

优点：前页/新开页都提供充足的空间，布局和设计更加灵活，可以构建复杂逻辑。

缺点：

1. 当前页/新开页都会打断用户正在进行的操作，影响操作流。但是当前页中断感较弱，因为用户感觉还是在本页面的；而新开页用户就有强烈的进入新流程感。
2. 新开页会让浏览器任务栏变得特别拥挤，从而会让系统变慢，需要用户花费精力去维护窗口。

使用场景：需要大量信息输入的复杂表单场景，比如编辑详细资料或配置复杂设置。

那么，什么时候使用当前页，什么时候使用新开页呢？

从页面结构上判断，如果上个页面是下个页面的前置条件，也就是流程是单向的时候，适合当前页。比如购买流程，用户进入下个页面，上个页面就不必存在，页面之间有严密的逻辑关系，页面不能共存，共存反而会引起用户混乱；还比如用户注册、频道切换、翻页、导航、返回这些操作。如果上个页面是信息集合，下个页面是子集，也就是流程是网状的适合，适合新开页，比如新闻列表页、多版本列表。

从用户意图上判断，看用户进入B页面后，回到A页面的可能性有多大。我们可以列举几个场景。

1. 用户进入一个购物网站A，对某个商品感兴趣，因此点击进去B页面。用户在购物的时候一般都会来回比价，因此他会回到A页面继续挑选商品，因此选择新页面。
2. 用户搜索关键词，表明用户已经有了明确的目的，这个时候应该让流程继续下去，因此选择当前页。

四、 总结

需要用户处理事务，又不希望跳转页面以致打断工作流程；或者内容信息不多和页面结构相对不复杂，可以采用弹窗和抽屉辅助完成操作，具体使用哪种可以从内容承载量和触发方式上具体判断。

当信息过多和页面结构复杂时，可以采用当前页和新开页完成操作，具体使用哪种可以从页面结构和用户意图上具体判断。

总之，要根据具体的业务需求、用户场景和产品风格，权衡各种因素来选择最合适的展示方式。