界面图鉴
弹窗Modal
你可能会问
弹窗到底是什么？它和角落里弹出来的小提示是一回事吗？
简单来说
覆盖在页面上的对话框，把页面暂停下来，要求用户先处理一件事。
01 · 拆开看看
这一块由什么组成
它的本领是「打断」：背景压暗、页面暂停，所有注意力被收进这个框里，直到你做出选择。它通常由这几部分组成：
遮罩Overlay
压暗的背景层，宣告「页面先等一等」。
标题Title
一句话说清要你决定什么。
内容区Body
做决定所需的说明，或一个小表单。
操作按钮Actions
确认加取消，主次要分明。
关闭按钮Close
右上角的 ×，给用户随时反悔的出口。
02 · 常见变体
同一个零件，几种摆法
一句话加两个按钮，处理危险操作。
装个小表单，不用跳页就能填。
手机上常见：干脆占满整个屏幕。
03 · 火眼金睛
这个页面里，哪一个是弹窗？
这页有点热闹——三种浮层同时出现了。哪个才是弹窗？
点一块试试，看看它叫什么
弹窗Modal
就是它！压暗背景、拦在页面中央，不表态就不放行。
轻提示Toast
不是它。角落里自己出现、自己消失、不拦你路的是 Toast。
抽屉Drawer
不是它。从屏幕边缘滑出来的面板是抽屉，常放菜单或详情。
04 · 用与不用
什么时候该上它
适合
- 危险或不可逆操作前的确认
- 必须先完成的小任务（登录、选择）
- 不想让用户跳走的快捷表单
先别用
- 「成功」「已保存」这类通知——用 Toast
- 大段内容浏览——直接开新页面
- 弹窗里再弹弹窗的时候
05 · 想一想
一道题，检查眼力
用户点了「删除项目」。用哪种方式确认最合适？
对。危险且不可逆的操作，值得打断一次——这正是弹窗存在的理由。
Toast 不拦路——等用户看到提示，数据已经没了。不可逆操作不能事后通知。
撤销是高级做法，但覆盖不了批量删除、网络失败这些场景。重要数据先问清楚最稳。
06 · 说给 AI 听
让 AI 改它时，这样说
说清触发时机（点了什么才弹），AI 才不会把它做成一进页面就弹。
删除按钮点击后加一个确认弹窗，主按钮用红色
把登录表单改成弹窗，不要跳页
弹窗要能点遮罩关闭，也能按 Esc 关闭
手机上这个弹窗改成全屏样式
最容易踩的坑
弹窗是在向用户借注意力，借多了会赖账：一进站就弹、弹完还弹，用户只会练出无脑点关闭的肌肉记忆。