更新时间：2026年10月05日

用户在浏览页面时触发操作，后续内容可以通过弹窗、抽屉或跳转新页面来呈现。这三种方式都可以展示更多内容，但对上下文连续性和操作空间的影响不同。这需要UI/UX设计师针对不同的使用场景合理使用三种web交互方式，让用户有统一的交互体验。三种web交互方式都有各自的优势和劣势，选择时应结合任务复杂度、是否需要参照背景以及如何返回继续操作。

比较三种方案时，可以用交互原型制作与评审从同一入口分别进入弹窗、抽屉和新页面，再检查完成任务后怎样返回，以及原有信息是否还在。

订单操作中的确认弹窗、详情抽屉与独立页面三条路径

1. 弹窗

1.1 定义

本文讨论的弹窗主要指模态对话框：它覆盖在当前页面上，要求用户先完成或关闭当前任务，再操作背景内容。提示浮层等非模态组件不应直接套用这一规则。

1.2 表现形式

一般是在蒙版上置顶一个窗口，窗口中有一个主体及关闭按钮。

1.3 优劣势

优势：在当前页面上的衍生操作，之前内容不会丢失，用户可以完成弹窗后继续之前的操作。
劣势：弹窗页面一般较小，承载信息量较少，只适合简单指令。

1.4 适用场景

简单内容的展示，没有过多的复杂操作，例如外卖应用的修改配送地址。
需要连续性处理信息的场景，例如批量修改信息。
辅助说明，对当前页面内容的快速扩充，例如放大查看缩略图。

1.5 总结

弹窗多处理内容较少，相对独立的页面，在不丢失信息焦点的情况下，可以快速返回上级，适合处理一次性的操作内容。值得注意的是，应尽量避免多层弹窗叠加，以免用户丢失当前任务的位置，在弹出弹窗后，背景页面不可继续操作，确认和关闭按钮明确，避免打开弹窗无法关闭的情况。

例如在Pixso资源库中，就有当下十分流行的超大弹窗的设计，可以自适应页面宽高，在不丢失当前页面内容的情况下，呈现更多的信息量。

设计系统组件

2. 抽屉

2.1 定义

从屏幕边缘滑出的面板，可以用于查看详情或处理当前页面的关联任务。

2.2 表现形式

当父级导航无法给出更加详细的指令时，可以呼出抽屉面板，展示详细指令。

2.3 优劣势

优势：在不离开当前页面的前提下完成操作，是否允许同时操作背景，需要按任务明确；面板可以按需打开或收起，页面视觉干净清爽，不杂乱。
劣势：如遇到长时间呼出的抽屉，会导致信息集中一侧，视觉焦点过于边缘。需要做好提示，不然容易被用户忽略或遗漏。

2.4 适用场景

适用于简洁的页面，将更多操作和内容隐藏起来，当用户有需要的时候可以随时呼出。
没有复杂操作情况下，展示信息量较多的内容，例如新增用户的信息处理。
在不丢失信息焦点的前提下，连续性的处理信息，例如批量修改信息。
在页面预览附加内容，例如活动详情、游戏规则等信息。

2.5 总结

抽屉是一种深入当前操作的交互模式，对于逻辑较复杂的页面，可以化繁为简，让页面看着更加简洁，配上明确的指引，可以提升用户体验。也可以利用抽屉做批量化处理，提升操作效率。

例如下面的抽屉式侧边栏，默认侧边栏效果只显示图标，触碰后显示对应内容。

侧边栏/导航

诸如此类的样式在Pixso资源库里还有很多，点击上方素材链接就可以查看，也可以选择直接在Pixso里编辑。Pixso是一款集合了策划、原型、设计、交互、代码、交付为一体的协作设计工具。可以轻松绘制原型、一体化解决UI/UX协作，还可以节约大量重复工作时间、满足UX设计师高保真交互需求，在需求调研协作、低代码交付等方面也十分出色，同时还兼容主流文件格式。最重要的是Pixso是一款全中文的软件，学习成本低、上手快，是搭建网站、UI设计的福音。

3. 页面跳转

3.1 定义

页面跳转是指用户进入另一个具有独立内容或任务的页面；不一定需要整页刷新，也可能通过路由切换完成。

3.2 表现形式

页面跳转的方式有直接跳转、左右跳转和上下跳转，这需要UI/UX设计师针对不同的页面内容，设计出符合用户心理预期的过渡形式。

3.3 优劣势

优势：不影响用户的视觉注意力，更加顺畅地衔接到下个页面，体验感保持一致。
劣势：用户离开当前上下文后，可能需要重新寻找先前的筛选条件、滚动位置或未完成输入；这些状态需要单独设计保留规则。

3.4 适用场景

页面内容没有关联性，相对独立的内容，例如外部链接。
当前页面内容过多，单个页面无法独立展示，需要跳转至其他页面继续展示，例如从订单列表进入完整的订单详情页。
偏流程性的功能页面，前后操作存在关联和影响，例如下单—支付。
用户具有明确目的性的操作，当前页有利于锁定用户注意力，例如APP中的我的主页。

3.5 总结

页面跳转是一种非常常见的交互模式，应用范围很广；实现和维护成本取决于路由、数据依赖和返回状态等因素。需要注意的是不要过度使用页面跳转，在页面逻辑流畅的情况下适当使用跳转即可。还有就是在新页面中保留返回上级页面的按钮，让用户可以浏览完新页面后可以回到之前的页面。

弹窗、抽屉、页面跳转都是很常见的交互模式，日常使用中应用的也较多，对于UI/UX设计师来说，需要做到逻辑顺畅、应用合理、体验统一，都会提升用户体验。随着流行趋势的不断进步，越来越多的交互模式也应运而生。

同一笔订单，为什么需要三种不同的处理方式

判断入口形式时，先看用户要完成什么，再看是否需要持续参照背景。以订单管理为例，用户已经筛选出“待审核”的订单，并滚动到列表中部，接下来的三种任务不宜全部塞进同一种容器。

确认一次明确操作：点击“取消订单”后，用弹窗说明订单编号、取消后的结果以及是否可恢复。主要按钮直接写“取消订单”，另一个出口写“继续查看”，不要让两个按钮都叫“确定”。弹窗解决的是一次决策，不承担完整售后资料编辑。
边查看列表边了解详情：点击订单编号打开抽屉，展示收货信息、处理记录等关联内容。用户关闭抽屉后仍在原筛选结果和原滚动位置；若允许连续查看下一笔，应让订单编号随详情明确变化，避免把上一笔的操作带到下一笔。
处理复杂、可独立访问的任务：申请部分退款需要选择商品、填写原因、核对金额并上传材料，更适合独立页面。返回订单列表时恢复筛选与位置，提交失败时保留已填写内容，而不是让“页面跳转”成为丢失进度的理由。

Pixso 画布中的订单列表、取消确认弹窗、详情抽屉和退款页面