什么场景下使用对话框？什么场景下使用抽屉？我想很多人在做设计的时候都产生过疑惑，因为他们在很多使用场景下有所重叠，傻傻分不清楚。下面我们从应用场景、交互需求和信息内容量三个维度去对比两者区别，判断使用哪一个。

应用场景

弹窗的使用场景主要分为三类：1、内容/信息反馈    2、表单编辑/内容展示

1、内容/信息反馈

主要是指用户操作界面时，系统给到的提示。如：「删除」操作的二次确认弹窗提示等；点击「我的」icon出现对话框等；这种明确告知用户一些反馈结果或信息，帮助用户更加有效的完成界面中复杂任务的场景下，我们都会使用对话框。

2、表单编辑/内容展示

当用户需要操作相对复杂的扩展功能时，对话框会承载一些表单编辑等功能。是对当前页面有扩展操作，但又不想用户跳出当前页面时可以使用对话框的方式进行操作，能够有效减少页面的跳转频率。

抽屉的使用场景主要分为：表单编辑/内容展示

表单编辑/内容展示

常用于针对某内容进行扩展说明；展示不紧急的细节信息；进行信息补充编辑等。不会跳转页面而打断用户的操作流程；

交互需求

交互形式主要分为模态与非模态。模态形式将打断用户与当前页面的交互，强制用户与容器进行交互。此时用户界面中的其他内容是不可操作的。所以模态容器使用不恰当会是用户产生厌恶感。模态弹窗主要使用在信息强提示中，如比较重要的信息确认、表单填写等；模态抽屉主要使用在表单内容与页面内容关联度不强的情况的信息承载；

非模态形式与模态形式相反，不会打断用户的正常操作，也不会破坏用户的操作流。用户可不进行操作回应。非模态弹窗主要用作通知等非重要信息提示，大部分场景下出现一段时间就会自动消失；非模态抽屉主要是在抽屉内容与页面内容强相关，用户需要参照页面的情况下使用；

信息内容

抽屉的承载内容显然是多于弹窗的。所以当表单内容过多时，考虑使用抽屉更合理。一般抽屉的承载表单数量最多在5条内较适合。

总结

当我们遇到不确定使用弹窗还会抽屉的时候，先分析场景再考虑交互形态最后再根据内容量，去选择弹窗或者抽屉的形式。同时在一些细节点值得注意：1、当内容很多的情况下，已经超过了最大抽屉的承载范围则需考虑使用新页面；2、尽量避免使用弹窗叠弹窗；3、当保持同一类型操作的承载形式一致，当该类型操作打大部分表单较长使用抽屉时，出现个别内容较少的表单仍应该使用抽屉更合适

Powered by Froala Editor