B端对话框和抽屉怎么选？看这四个条件

需要用户暂时停止主任务、作出短而明确的决定时，可考虑模态对话框；需要参照列表连续查看详情时，非模态抽屉通常更合适。编辑任务是否使用模态，还要看背景操作会不会改变当前对象。把这几种选择放进可演示的交互原型，比只按字段数量决定容器更容易发现问题。

1. 对话框（Dialog）

1.1 对话框的定义

对话框是用户界面设计中非常常见的一种弹窗形式。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

模态对话框能集中注意力，也会暂时阻断背景任务。应给出清楚标题、必要说明和可理解的关闭方式，不能因它醒目就默认适合新手。

以停用供应商为例，标题应指出当前对象，正文说明停用影响，操作区提供取消与确认。提交后还需要处理中和失败反馈，不能只绘制关闭后的成功画面。

在非模态对话框中，用户可以专注于对话框里的次要任务，也可以继续与主窗口里的内容进行交互。通常非模态对话框没有遮罩层。

下图展示 Pixso 的 iconfont 插件面板：设计师在面板中选取图标，再把图标用于编辑器画布。这种需要对照主画布的辅助任务，适合保留清楚的面板关闭入口，避免每选一个图标就离开当前设计。

Pixso插件iconfont

1.2 对话框的使用

设计好的对话框可以帮助用户完成任务，创造良好的用户体验，而糟糕的模态对话框则会让用户感到沮丧。选择使用场景时，可考虑以下几点：

• 模态对话框

模态对话框会中断背景操作，但不代表用户必须完成任务才能离开；能否取消以及取消会发生什么，应明确显示。常用内容留在主页面，不要把一个连续任务拆成反复弹出的多个对话框。

• 模态对话框吸引用户注意力程度较强

当操作需要用户立即作出决定，例如确认停用供应商，可使用模态对话框突出对象和影响。普通保存成功等无需决策的反馈，可以放在页面原位，不必每次弹窗打断任务。

• 应用程序都是为了帮助用户访问特定的内容

例如，对于Pixso软件来说，主要内容就是编辑器页面，用户可以通过该页面开始进行界面元素的设计，寻找色彩、字体、形状等元素的调整入口。而具体的调整参数就为次要内容，会以对话框的形式出现。

也就是说，用户为内容而来，对于主要内容不应当出现在模态对话框中，从而保证页面主次有序、层次清晰，使得用户能轻松、快速地找到它们关心的内容。

Pixso字体色彩调整

• 需要平衡简单和强大

在设计应用时，我们希望为用户创造简单、强大的应用，但有时这两个目标可能会产生冲突，我们需要小心谨慎地做出取舍，平衡这两个目标。特别是在设计移动端与桌面端这种具有很大尺寸差异的设备时，我们要仔细考虑模态对话框的使用。

比如对于有的复杂流程，移动端屏幕较小，使用全屏模态对话框可能更合适；而桌面端屏幕较大，全屏模态对话框可能就不太适用。

• 复杂流程先判断是否适合模态

一个模态对话框可以容纳短小的分步任务，但应让用户看懂当前步骤和返回方式。需要反复查阅资料或长期填写的复杂流程，更适合独立页面；不要用连续叠加的弹窗代替任务结构。

• 非模态对话框便于切换主任务与辅助任务

非模态对话框适合需要在主视图和辅助面板之间切换的任务。关闭时机应与任务一致：需要持续对照的面板可以由用户主动关闭，完成一次操作即可结束的面板也可以自动收起，不应把“不会自动关闭”当成非模态的定义。

• 合理安排对话框高度与滚动

对话框高度应容纳必要内容，并限制在可用屏幕内。内容较长时，明确滚动区域和操作区，避免最后一个字段或错误提示被按钮遮住；固定操作区是一种选择，不是所有对话框都必须采用的布局。

2. 抽屉（Drawers）

2.1 抽屉的定义

抽屉通常指的是从父窗体边缘滑入，并覆盖住部分父窗口内容的面板。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。

如下图所示，抽屉可分为模态与非模态。通常模态抽屉有遮罩层，非模态抽屉无遮罩层。用户在模态抽屉，可以更加专注于当前操作。用户在非模态抽屉，更便于进行对照查看和操作。

抽屉图片

抽屉可以从左、右、上或下方进入，位置需要与页面结构、阅读方向和设备空间配合。同一产品中承担相同任务的抽屉，应保持可预测的出现方向。

2.2 抽屉的使用

对于移动设备上，需要用户专注于某项特定任务时，可针对性地使用抽屉全屏模式减少其余信息的干扰。对于页面中具有明确起点与重点的“独立流程”，可使用抽屉全屏模式，且使用“取消”来关闭全屏模式。 在全屏模式抽屉中更深的视图或者当离开模式不被视为“破坏性动作”时，“取消”动作会被“后退”动作替换。

抽屉全屏模式

对于可以取消或保存的编辑流程，先判断是否允许用户同时操作背景页面。若切换背景记录会造成数据归属混淆，可用模态；若任务需要持续参照其他信息，也可用非模态并清楚绑定编辑对象。

可取消抽屉

抽屉的保存和取消应放在容易发现、不会被长内容挤走的位置。标题区或底部固定操作区都可以成立，但同一产品要保持一致，不要把必需的保存动作藏进更多菜单。

非模态抽屉便于在主页面和详情之间对照，模态容器则暂时阻断背景操作。二者都需要说明当前对象、允许的动作和退出结果；模态并不等于用户一定会读完内容，非模态也不等于可以忽略未保存的数据。

桌面抽屉宽度由字段、阅读长度和需要保留的背景信息决定。先放入真实内容，再检查主列表是否仍有对照价值；当抽屉几乎遮住全部内容，或多列字段无法阅读时，应考虑全屏编辑或独立页面，而不是守住某个固定像素值。

在较长的编辑抽屉里，可以使用固定底部操作区；短详情面板也可把关闭入口放在标题区。位置选择要保证按钮不会覆盖最后一个字段，键盘顺序也与视觉顺序一致。

3. 对话框 VS 抽屉

抽屉与对话框都可以承载提示、表单或详情，也都可能采用模态或非模态行为。选择时先判断用户是否需要继续操作父页面，再决定容器形式和内容布局。

但它们在使用时，也有很多差异，比如说抽屉的出现形式与对话框完全不一样，对话框是在主页面中以弹出的方式出现，而抽屉是与主页面有着相对位置关系平滑展开出现。那么在实际场景中，我们应该如何判断是使用对话框还是使用抽屉呢？可以从应用场景、交互方式、内容长度、一致性四个维度进行判断。

• 应用场景

在应用时，对于操作确认/提示/反馈/表单信息，如果需要打断用户当前流程，需要用户立即操作处理时，则根据内容信息长度决定。如果不需要打断用户当前流程，可考虑非模态对话框。对于表单/任务/bug展示，考虑是否需要参照父级窗口内容，如果需要参照，可考虑非模态抽屉；如果不需要参照，则根据交互方式决定。

• 交互方式

对于表单、任务或缺陷详情，先看用户是否需要持续操作父容器。需要边对照边切换对象时，可考虑非模态抽屉；切换会导致编辑归属混淆时，应先解决对象绑定和未保存处理，再决定是否允许背景交互。

• 内容长度

内容长度会影响选择，但不能只数表单条数。需要边看主列表边修改的短表单也可能适合抽屉；需要独立完成、多步骤或需要大面积对照的长任务，可能更适合独立页。

• 一致性

整个产品的交互设计，需要考虑最基本的一致性原则。对于功能、语义一致的内容，要考虑其他部分的设计组件是对话框还是抽屉。

容器是否轻量取决于承载的任务和信息量。模态会暂时阻断背景操作；非模态允许继续与背景内容交互，但仍需明确当前查看或编辑的对象。

同一张供应商台账，三种不同容器

如果资料编辑需要同时比较合同、地址和联系人，可把抽屉改为独立编辑页。容器选择服务于任务，不必为了“轻量”把复杂表单塞进狭窄边栏。

画出打开、关闭和错误时的落点

在原型标注中写清：打开后焦点进入对话框；Tab 顺序限制在模态内容中；关闭后回到触发按钮，若该按钮因操作消失，则进入下一处合理位置。W3C 的模态对话框模式还给出了 Escape 关闭和可见关闭控件的说明。设计稿可以标注这些要求，实际键盘与读屏行为仍要在实现中检查。

窄屏上，先用最长供应商名称和多行错误文字试排。如果底部按钮挡住字段，应调整滚动区与固定区，必要时转为全屏；错误发生时让字段与对应信息同时可见，不只在面板顶端闪过一条提示。

4. 结论

最后，我们再简单总结一下，对话框与抽屉的使用规则。

需要用户作出明确决定时，对话框应突出操作对象、影响和取消方式。内容变长后检查阅读与滚动，避免为了保持固定尺寸隐藏说明；多层弹窗还需清楚管理当前层和返回位置。

抽屉适合保留与父页面的上下文关系。关闭图标和“取消”文字均应明确表达后果；当内容已修改但未保存时，先说明是否放弃更改。不要无节制叠加抽屉；新的任务若有独立地址和完整流程，切换页面往往更清楚。

以供应商台账继续评审：先打开甲公司的详情，再切到乙公司；修改字段后尝试关闭；最后停用当前供应商。检查每次操作指向的公司、未保存提示及焦点返回，确认用户不会把一个对象的修改提交给另一个对象。

在 Pixso 中，可以将详情抽屉、编辑抽屉和停用确认连成同一段原型，让同事从列表开始操作。把对象名称放在各画板的相同位置，方便发现切换记录时的上下文遗漏。

在原型面板中，为按钮设置触发条件、目标和转场；先验证打开、取消、保存失败与返回，再调整动画，避免流畅的过渡掩盖不明确的关闭结果。

评审意见可以在 Pixso 设计稿内按位置标注：标题是否说明当前供应商、取消是否丢弃修改、停用后焦点回到哪里。每条意见对应一个控件或一个状态，后续调整更容易落实。