弹窗/抽屉/新页面有什么区别？

在PC端项目中，用户触发了某个操作，需要向用户展示新的内容时，有很多交互方式，弹窗、抽屉、页面就是其中典型的3种。下面来分析下3种交互方式的优势、劣势和使用场景。

一、弹窗介绍

弹窗是一种的系统与用户信息交互方式，用作提醒或者解决某个任务。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。

弹窗可分为两大类型：“模态”和“非模态”

如何选择用“模态”还是“非模态”🤔️

• 当我们需要让用户实时看到界面的变化或者表单项比较简单可以选择“非模态”

• 如果操作复杂或者信息加载比较耗时，则采用“模态”更合理。

二、模态弹窗应用场景和注意点

优势：简单的配置，表单少，操作清晰。在不离开当前页面的前提下完成操作，之前的内容不会丢失。

劣势：弹窗空间有限，承载的信息量太少。

适用场景：

• 展示简单内容，没有复杂操作。

• 不用离开当前页面的前提下完成操作，不会丢失上下文定位。

• 更为详细的辅助说明，是对当前内容的快速扩展。

注意点：

• 模态体验将人们带出当前的环境，因此只有当它可以帮助人们集中注意力时才使用模态，因为突然的对话通常会造成干扰，因此请将它们用于重要的操作。

• 关闭模态视图要避免弄丢用户已输入数据的，请务必解释这种情况并为用户提供解决方法。

• 模态视图的标题或说明描述很重要，它能帮助用户了解当前的任务或定位上下文，避免用户迷失。

• 避免在一个模态视图之上呈现另一个模态视图。屏幕上同时出现多个模态视图可能会令人困惑，因为人们必须记住多个先前的上下文。

• 模态视图的背景不宜过深 ，这样不仅可以减少用户的跳出感，而不会忘记他们之前的步骤，一般使用黑色遮罩不透明度30%。

三、非模态弹窗的应用场景和注意点

优势: 不需要给出反馈，不影响用户的其他操作。

劣势： 容易忽略他。

适用场景：

• 配置类型的弹窗、文字提示、消息通知、气泡框等类型。

• 对于主动使用的用户来说可能很有用，可以通过一系列操作，比较不同行数据的细节。

1. 非模态弹窗对于主动使用的用户来说可能很有用，可以通过一系列操作，比较不同行数据的细节。如对比员工数据。

2. 非模态弹窗的另一个特点就是：实时生效。点开非模态弹窗的同时仍然可以看见主界面，主界面会根据你的操作实时变化，你可以随心所欲地不断选择、改变、在选择、再改变，而模态弹窗则无法在你点击其中一个表单的当下立即做出改变。下图例子就是非模态的筛选弹窗。

四、抽屉应用场景

通常页面中最重要的信息都放置在页面左侧，从右侧展开抽屉不会遮挡父级页靠左侧的内容。一般推荐抽屉从右侧弹出，可用于展示内容、填写表单。

优势：比起对话框，抽屉可以承载更多的配置需求，也不需要离开当前页面。在抽屉中填写表单或核对重要信息都仍然可以参考父级页内容，而且在涉及到多个项目时不会丢失位置。

劣势：由于信息集中在一侧，导致视觉焦点不稳定。

适用场景：

• 展示中等信息量的内容，如弹窗内无法承载的长表单。

• 不丢失信息焦点，或者需要连续性处理信息的场景。

• 在当前任务流中插入临时任务，创建或预览附加内容，如协议条款。

五、新建页应用场景

优势：比起对话框和抽屉，新页面可以承载更多的内容量，比如当表单较长或是需要临时展示一些文档。

劣势：但是需要打开一个新网址链接，容易使用户丢失上下文定位；（我在哪，我要干什么来着🤔）

适用场景：

• 偏流程性的功能页面，前后操作存在关联和影响。如：新建绩效。

• 同一层级间的内容切换，如：Tab页切换。

• 用户具有明确目的性的操作，跳转页有利于锁定用户注意力。

六、如何选择 弹窗/抽屉/新建页

子级的内容大致可以分为信息确认，操作反馈，信息编辑，信息展示这几个类型，但实际不管从内容类型或者内容量上来看，都不能清晰界定弹窗和抽屉的边界，目前整理的只是较为通用的规则，信息编辑中很多情况弹窗和抽屉都可以选用，需要根据上下文实际的场景和父子级页面的关系做进一步判断。

弹窗和抽屉更适合简单的内容，如警告、提示或简单的表单。如果你需要显示的内容较为复杂，可能需要使用新建页。

1、根据页面内容量（通常包含页面当中文字、图片、视频、表格、以及各种复杂的交互，从内容承载量的角度来看）内容量：页面＞抽屉>弹窗。

内容的宽度以及深度（内容宽度：元素在屏幕上的实际像素宽度 / 内容的深度：页面信息的滚动长度或信息的层级深度）

• 内容较深较宽：页面＞抽屉＞弹窗

• 内容较宽（图片、视频为主）：弹窗＞页面>抽屉

• 内容较深（表单为主）：抽屉>页面>弹窗

综合来看，页面适合较多内容信息的承载，抽屉其次，弹窗最弱。（建议条目表单数 >8 项 时使用抽屉）

2、页面连贯性

页面连贯性直接决定用户的使用体验。

当浏览器新开一个标签进行展示时，页面的连贯性是最弱的，因为用户需要进行相对困难的操作才能返回到前页面，同时你也可以理解新开页面是较为独立的，不会受到前页面的干扰，而要决定页面连贯性的核心，还是以自身业务流程出发。

• 流程变化连贯性：页面刷新 = 覆盖式全屏弹窗 > 抽屉 = 弹窗 > 新开页面

• 拓展信息连贯性：抽屉 = 弹窗 > 页面刷新 = 覆盖式全屏弹窗 > 新开页面

• 信息对比连贯性：抽屉 > 新开页面 > 弹窗 > 页面刷新 = 覆盖式全屏弹窗

页面刷新或覆盖式全屏弹窗更适合体现流程变化，弹窗和抽屉更适合展示与当前页相关的拓展信息，抽屉更适合在当前页内做信息对比。

3、页面切换成本

切换成本直接影响用户操作效率，通常切换成本 弹窗<抽屉<新建页面，B端产品效率至上，如果子级页面使用频率比较高，这样用户需要在父子页面之间来回切换，就需要考虑页面切换成本了。

4、用户体验

抽屉和弹窗可以让用户在当前页面进行操作，不会打断他们的操作流程。而新建页可能会让用户感到跳转，打断了他们的操作流程。

• 功能：如果你需要提供一些详细的功能，如编辑、添加或删除，可能需要使用新建页。抽屉和弹窗更适合简单的功能，如确认或取消。

• 空间：如果你的界面空间有限，可能需要使用抽屉或弹窗，因为它们可以节省空间。如果空间充足，可以考虑使用新建页。

• 样式和设计：根据你的网站或应用的样式和设计，选择最适合的控件。例如，如果你的设计风格是简洁的，可能会倾向于使用抽屉或弹窗。

• 总的来说，选择弹窗、抽屉或新建页控件应根据你的具体需求和情况进行。可能需要进行一些测试和用户反馈，以确定最适合的选择。

• 单一的流程任务可用新窗口

因为无论是弹窗、抽屉、新建页，究其本身就是一个内容载体，因此选择如何使用，很大程度上取决你的内容量的多少。内容量：通常包含了你页面当中文字、图片、视频、表格、以及各种复杂的交互。如果你觉得页面已经密密麻麻，在弹窗中根本无法呈现，这时候你就需要考虑弹窗是否合适

参考文献

• https://zhuanlan.zhihu.com/p/603877132

• https://fluent2.microsoft.design/components/web/react/dialog/usage