Overlay Index · 0 → 95
弹出来的东西，
不都叫弹窗。
你说"这里加个弹窗"，设计师想到的是一闪而过的提示，程序员想到的是整页变暗、点不了别处的那种框。同一个词，两套东西——做出来当然不对。
5种可量化的打扰指数
3条选型判断
3个必踩的坑
你想的
已保存
程序员想的
确认删除？
取消删除
≠
一闪而过的 Toast 两秒自己消失（左）· 霸屏拦截的 Modal 要写遮罩、焦点、按钮（右）
01认层
先量一下：它有多打扰你
把这五种浮层按打扰指数排一遍，从 0 到 95 就一条线：越往上，用户越躲不开。指数高的不是更"重要"，只是更贵——每一次弹出都在花用户的注意力。点任意一根柱子，下面那台机器会真的演给你看。
0 · 页面本身
10–25 环境型
45–60 半阻隔
95 阻断
← 0 · 页面本身100 · 打断一切 →
实演舞台
文字提示Tooltip
客户管理
共 6 条 · 今天已同步
选一个浮层，看它在你面前演一遍。
02正名
五种浮层，一次叫对
开会时说出英文名，工程师才知道你要的是哪一套实现。点卡片，上面那台机器会演示一遍。
03选型
内容一多，弹窗、抽屉还是新页面
绝大多数"这里加个弹窗"的返工，卡在同一个地方：内容装不下。三条判断就够。
01
看内容长短
在 1440px 的屏幕上，弹窗的宽度就那么几档：400 / 520 / 720。小提示用 400 就够；表单越长，越该换容器。表单很长、内容很深，换抽屉；再深，换新页面。
小 400px→Modal/长表单→Drawer/更深→新页面
02
要不要左右对照
如果用户需要一边看列表、一边改右边那份详情，那他要的是抽屉：左边列表还在，选中的那条高亮着，改完保存，位置一点没丢——焦点不丢，才敢连续处理下一条。
要对照→Drawer·列表还在，焦点不丢
03
换不换流程
真正该跳新页面的，是流程本身换了台阶的那种：浏览 → 收银台 → 付款。用户心里已经把它当成"另一件事"，这时候留在原页面反而是打断。
流程换了→新页面·下单付钱这种
三种容器，装东西的能力不一样：Modal 装一个决定，Drawer 装一屏表单，新页面装一条完整流程。反过来用——把一个流程塞进弹窗，或者为一句提示新开一页——都是同一个错误的两个方向。
04避坑
三个坑，细节里翻车
组件选对了，还是会做错。这三个是最高频的。
坑 01 / 03
填表的弹窗，
点蒙层就关
用户填了三行，手一滑点到灰底，全没了。有未保存内容的弹窗，点蒙层必须先问一句，或者干脆不响应。
判据：有没有"没保存的改动"坑 02 / 03
能撤销，
就别弹二次确认
每一次确认都是一次刹车。删除这类动作如果能在 Toast 里给一个"撤销"，就直接删、给退路——比拦一道让人点"确定"更安全，也更顺。
能撤销 > 二次确认坑 03 / 03
按钮别写
"是 / 否"
用户看按钮的时间只有两三百毫秒（298ms），扫不到"是"到底指什么。把后果写在按钮上："删除这 12 个文件"，而不是"确定"。
注意力 ≈ 0.2–0.3 秒