界面图鉴
抽屉Drawer
你可能会问
抽屉到底是什么？从旁边滑出来的面板和弹窗有什么区别？
简单来说
从屏幕边缘滑出的面板，手机上的汉堡菜单点开后就是它。
01 · 拆开看看
这一块由什么组成
它平时藏在屏幕边缘，需要时滑出一整条面板——手机上的汉堡菜单点开后就是它。和弹窗一样有遮罩，但它靠边站，装的是内容不是问题。组成：
面板Panel
从边缘滑出的那一条，宽度固定。
遮罩Scrim
压暗剩余页面，点它可以关闭。
关闭控件Close
× 按钮，或往回滑的手势。
内容区Content
菜单、筛选器或详情——内容越长越适合它。
02 · 常见变体
同一个零件，几种摆法
桌面端常用：筛选器、详情预览。
手机导航菜单的标准位。
手机上从底部滑出，也叫 Bottom Sheet。
03 · 火眼金睛
这个页面里，哪一个是抽屉？
还是这三个浮层。这回找那个靠边站的。
点一块试试，看看它叫什么
抽屉Drawer
就是它！从屏幕边缘滑出一整条，放的是「一块内容」而不是「一个问题」。
弹窗Modal
不是它。居中拦路、要你表态的是弹窗。
轻提示Toast
不是它。角落里自己消失的小条是 Toast。
04 · 用与不用
什么时候该上它
适合
- 手机上的导航菜单
- 筛选器面板（电商列表页）
- 不离开当前页的详情预览
先别用
- 要用户立即决定——用弹窗
- 内容极短——一个气泡就够
- 桌面端的主导航——直接用侧边栏
05 · 想一想
一道题，检查眼力
手机上导航链接放不下了，点汉堡按钮后应该展开什么？
对。菜单是拿来浏览的，抽屉给它一整条空间，滑回去也自然。
弹窗是拿来做决定的。浏览菜单用居中拦路，小题大做。
能用，但多了一次整页跳转——抽屉在当前页就能来回，更轻。
06 · 说给 AI 听
让 AI 改它时，这样说
说清从哪边滑出、占多宽——这两样 AI 最容易自由发挥。
汉堡菜单点开后从左侧滑出抽屉
筛选面板做成右侧抽屉，带遮罩
抽屉支持点遮罩关闭和滑动关闭
手机上把详情改成底部抽屉预览
最容易踩的坑
抽屉是藏东西的：藏得住菜单，也藏得住用户永远找不到的功能。高频操作别往抽屉里塞。