设计界面或向 AI 提需求时，“弹个框”并不是一个足够明确的指令。同样是“盖在页面上”的浮层，触发方式、信息量和打断程度完全不同。这篇文章用大白话拆解 6 种常见弹层组件，并给出一套可以直接复制的描述公式。
六种弹层组件拆解
区分这六种组件，主要看三个维度：
- 触发方式：悬停、聚焦还是点击；
- 信息量：一句话、选项列表还是完整面板；
- 是否打断操作：看完就能走，还是必须先处理。
Tooltip 是贴着控件出现的一句短说明，适合图标、按钮或字段的简短解释。
- 触发方式：悬停或聚焦
- 出现位置：锚点旁
- 信息量：极少，不存在复杂操作
- 是否打断：不打断
Popover 是锚定触发点的丰富浮层，用于补充说明、局部详情或少量操作。
- 触发方式：点击后展开，可带按钮，点击外部区域关闭
- 出现位置：锚点旁
- 信息量：比 Tooltip 多，能放标题、说明和轻量操作
- 是否打断：不强制打断
Dropdown 从一组操作或选项里选择，适合“更多操作”、筛选或单项选择。
- 触发方式：点击按钮展开，选完通常收起
- 出现位置：按钮下方
- 信息量：适中，以列表形式展示选项，当前选项可高亮
- 是否打断：不打断
Modal 是必须先处理的居中弹窗，适合确认风险、填写关键信息或做决定。
- 触发方式：点击危险操作后触发，带页面遮罩，背景不能操作
- 出现位置：居中
- 信息量：较大
- 是否打断：强制打断，必须先处理弹窗才能继续
Drawer 是从侧边滑入的详情面板，适合查看详情、编辑内容，同时保留页面上下文。
- 触发方式：点击“查看详情”后，从右侧滑入
- 出现位置：右侧，约占页面四成宽
- 信息量：大，可承载完整详情或编辑表单
- 是否打断：不强制打断，保留原页面作为上下文
Bottom Sheet 是适合手机端的底部操作层，适合分享、快捷操作或选择下一步。
- 触发方式：点击后从屏幕底部向上推起
- 出现位置：底部，顶部保留拖拽条
- 信息量：适中，专为手机端设计，拇指容易触达
- 是否打断：不强制打断
如何选择与描述
别再只说“弹个框”。描述前先判断清楚：组件名称是什么、怎么触发、从哪里出现、用户是否需要先处理它。
描述公式
组件名称 + 怎么触发 + 从哪里出现 + 是否先处理。
组件名称 + 怎么触发 + 从哪里出现 + 是否先处理。
总结与指令
把这四个要素一起告诉 AI，AI 才能区分“悬停出现的小提示”和“必须处理的居中弹窗”。以下 6 条指令可以直接复制使用：
Tooltip：悬停触发，在锚点旁出现，不打断操作。
Popover：点击触发，在锚点旁出现，不打断操作。
Dropdown：点击触发，在按钮下方出现，选完即收。
Modal：点击触发，居中弹出，必须确认后才能继续。
Drawer：点击触发，从右侧滑入，保留上下文。
Bottom Sheet：点击触发，从底部上推，适合手机端。下次向 AI 描述弹层组件时，先说出组件名称，再补上触发方式、出现位置和是否需要用户处理，AI 就能少猜很多。
© 版权声明
THE END
![子比主题 – 文章标题前角标扫光样式[优化版]-小妖客栈](https://xykz.cn/wp-content/uploads/2025/02/20250219161210627-image.gif)
暂无评论内容