Dialog vs Bottom Sheet vs Drawer
「弹一个东西出来」的三种说法
我需要在当前页面上弹出一层界面，用哪个？
对比表
| Pattern | 出现位置 | 阻断用户 | 底层页面 | 主要平台 |
|---|---|---|---|---|
| Modal模态框 / 对话框 | 屏幕中央 | 是 | 完全遮蔽，灰掉 | 全平台 |
| Bottom Sheet底部弹出面板 | 屏幕底部 | 部分阻断 | 保留可见，可感知上下文 | 移动端 |
| Drawer抽屉 | 屏幕侧边 | 部分阻断 | 保留大部分可见 | 全平台 |
← 左右滑动查看完整表格
真实 Demo 对比
Modal
模态框 / 对话框怎么判断：要用户「必须决定」时用它
Bottom Sheet
底部弹出面板怎么判断：移动端的选择面板首选
Drawer
抽屉抽屉会盖住这一半页面
怎么判断：导航或筛选要占一整片区域时
选型决策
- 用户必须做出选择才能继续（删除确认、登录）Dialog
- 移动端要从几个选项里挑，或要展示一排操作Bottom Sheet
- 要放的东西比较多，像一个独立页面（导航、筛选）Drawer
- 只是想让用户知道一件事做成了哪个都别用，用 Toast
三者最大的区别是「阻断感」。越强的阻断（Dialog）用于越必须的决定；越弱的阻断（Bottom Sheet / Drawer）用于用户可以随时跑掉的场景。