：本文vs抽屉1.与干扰性对比，对两个组件的对比

先说一下：对话框和抽屉是出现在当前页面顶部的组件模态对话框是什么时候实例的对话框，允许用户在不离开主路径的情况下查看信息/提示/反馈，或者快速执行某些操作。两者的交互方式相似，使用场景也有重叠。本文比较了这两个组件之间的主要区别，并提供了帮助您快速决定选择哪一个的方法。

一、比较：对话框与抽屉

1. 信息和分心

2. 模态与非模态

模态：用户将无法操作页面层上的内容，只能操作页面层之上的内容容器，直到用户明确结束与内容容器的交互。

非模态：即使内容层上方的内容容器存在，用户仍然可以与背景页面的内容进行交互（例如，选择链接或单击按钮）。

对话框和抽屉可以分为模态和非模态，有掩码和无掩码；通常，有掩码的是模态的，没有掩码的是非模态的。

3. 何时使用模态

1）用于重要警告以避免严重问题，或修复已经发生的问题。

例如，当用户没有保存就关闭时模态对话框是什么时候实例的对话框，会弹出一个模态对话框提示用户保存。

2） 当用户需要输入信息或执行操作以继续当前进程时使用。

例如，一些资源网站会在用户浏览一段时间后弹出模态登录/注册/试用窗口，引导注册。

3）用于将复杂的流程分解为简单的步骤。

例如：逐步模态对话框式的引导。

4） 用于获取可以大大减少用户后续动作/努力的信息。

例如：在房地产网站 Zillow 上，用户可以在没有帐户或房地产经纪人的情况下浏览列表。当用户尝试联系代理以获取列表信息时，该站点将通过模式对话框询问他们是否已经拥有代理。.

4. 何时不使用模态

1）在获取与当前流程无关的不必要信息时不要使用。

2）请勿在会破坏高风险流程的情况下使用。

例如，付款是一个高风险的过程。避免在用户支付过程中弹出模态弹窗打断用户，可能使用户改变主意放弃购买。

3）不要让用户在模态组件上做出复杂的决定，这些决定需要额外的信息，而这些信息并不在上面。

例如：Frontier Airlines 使用模式对话框来追加销售超过机票，这表明现在购买可以节省 162 美元，但无法弄清楚为什么会节省这么多：

二、案例对比

1. 对话框模式与非模式

文档工具语雀中的模态对话框：登录状态失败提醒。

语雀中关联操作的无模式对话框，简称：文本链设置（这里也可以使用泡泡卡组件）

点击 Gmail 中的“写邮件”按钮，在右下角打开一个无模式的小对话框，允许用户参考以下邮件撰写新邮件：

2. 抽屉模式与非模式

项目管理工具 Jira 的帮助文档入口在页面右侧。点击后，内容从右侧显示在非模态抽屉中，方便用户查看和操作：

搜索功能条目位于页面左侧的导航中。点击后，可以从左侧进入模态抽屉进行交互。用户可以更专注于当前的操作：

3. 模式抽屉与无模式对话框

上一个案例来自上一个 Jira。当前版本的 Jira 调整了导航和交互模式。例如，通知模块已从模式抽屉更改为无模式对话框。外观位置遵循就近原则，可以体验无模式对话。框架更轻。

原本从左侧绘制的modaldrawer，点击左侧导航，从左侧进入：

当前版本使用无模式对话框，点击顶部导航后出现在图标下方：

4. 无模式抽屉与模式对话框

研发性能工具Aone中使用了一个非模态抽屉来展示项目的需求/任务/bug的具体内容：

在与上面Aone类似的场景中，类似产品Teambition使用了模态对话框：

相比之下，非模态抽屉的好处是用户可以同时在下面的父页面查看其他任务的标题，快速点击切换到其他需求；而模态对话框的好处是用户可以完全沉浸在当前的任务中，同时顶部还增加了“上一个”和“下一个”按钮，支持上下快速切换较低的酒吧。

从两个组件的对比可以看出，两个组件的优点也是对方的缺点，没有100%完美。选择哪一种取决于具体用户的需求和产品的定位。

5. 模态抽屉 vs 泡泡卡

在文档工具Gitbook中，产品功能和交互都非常简单轻量，没有对话框组件。在文档中插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉，同时插入表情、标签等位置指向清除，使用气泡卡操作很轻，类似于非模态对话框：

三、选择：对话框还是抽屉？

使用下图从应用场景、交互需求、信息长度三个维度来判断是使用对话框还是抽屉。

例如：为表单选择组件，从应用场景来看，对话框和抽屉都可以使用；从交互维度来说，表单的填充需要参考表单父页面中的内容，然后确定选择非模态抽屉，不需要再考虑长度。

一致性：除了上述列表中的三个判断维度外，还有“一致性”的原则需要考虑。例如，大多数产品弹出的表单都很长，并且使用了抽屉组件。为了保持体验的一致性，个别的短表格也可以相同的使用抽屉。但是根据不同产品的具体情况，一致性的优先级不同，所以不包括在判断列表中。

四、评论和例子

操作确认、信息提示、操作反馈场景：当用户需要暂停当前操作并立即读取/处理时，使用模态对话框。否则，建议使用警告提示、全局提示、通知提醒框、气泡确认等轻量级组件。框架。本文讨论对话框和抽屉之间的区别。

需要与父页面内容交叉引用：使用无遮罩、无模式的抽屉，以便于查看和操作。

需要在父页面中快速选择切换：使用无遮罩的非模态抽屉。在下面父页面暴露的部分进行与抽屉内容和位置无关的操作，点击空白区域抽屉不会自动消失。

堆叠：指在一个对话框/抽屉上放置更多的对话框/抽屉。不建议将对话框堆叠在对话框之上，但抽屉组件支持多层抽屉，即在一个抽屉中打开一个新的抽屉，以解决多分支任务的复杂情况。

如有必要，还可以在抽屉上堆叠对话框。例如，在抽屉的操作过程中，有非常重要的信息需要立即通知给用户，可以通过对话框进行展示。

表单长度：当表单项超过 5 个时，建议使用抽屉而不是弹窗。

内容长度：向用户展示静态信息时，如果内容少于5行，建议使用弹窗代替抽屉；如果信息超过一屏，弹窗和抽屉都支持滚动条，都可以使用。，如何选择应由设计师根据设计倾向和一致性来决定。

参考：

#