弹窗、抽屉、菜单与轻提示

先理解这个概念

弹窗会限制与背景的交互，适合必须先处理的决策；抽屉常保留页面上下文；菜单用于短操作集合；轻提示适合不要求立即操作的反馈。高风险错误不适合只短暂显示在 toast 里。

覆盖层改变了用户与背景的关系。模态对话框暂时要求用户完成或取消当前决定；非模态面板允许继续使用背景；轻提示只报告结果，不应承载必须及时处理的信息。组件名字不能替代行为说明，抽屉同样可能是模态或非模态。

记住这三个原则

1. 01

   弹窗打开后管理焦点，关闭后恢复到触发位置。

2. 02

   提供清楚的关闭方式，重要输入需考虑退出保护。

3. 03

   轻提示避免承载用户必须阅读才能继续的信息。

实际设计时，分三步做

1. STEP 01

   先判断是否必须打断当前任务。若只是展示补充信息，优先考虑页面内展开或非模态区域。

2. STEP 02

   明确关闭方式、背景是否可操作、焦点进入与返回位置，以及未保存内容如何处理。

3. STEP 03

   检查嵌套、长内容与窄屏，避免连续打开多个覆盖层，让用户不知道自己处于哪一级。

一个容易理解的例子

反馈存在，但不会反复阻断正在进行的工作。

适用边界与取舍

弹窗减少页面跳转，却不自动减少认知成本。复杂编辑、长篇阅读和需要分享链接的内容通常更适合独立页面。