在 Vibe Coding 里，脑子里有画面、跟 AI 讲了半天，最后却出来个完全不相关的页面——这种经历不少见。我知道自己要什么，可就是说不出来。比如你跟 AI 说「点这个按钮，弹出一个窗口」。

AI 是照做了，但给你的可能是屏幕正中间一个大方框，外加一层灰色遮罩。你真正想要的，不过是按钮旁边展开一小块面板。

毛病出在哪？

AI 来了以后，技术能力不再是坎。以前要十几个程序员才能搭起来的大型网站和系统，现在 Claude 和 GPT 半天就能弄完。可另一种难处冒了出来：我知道自己想要什么，却不知道该怎么把它说出来。每个行业都有自己的专有名词，AI 把技术门槛抹平了，怎么让语言体系和 AI 对上号，反倒成了外行人的关卡。技术实现的门槛被 AI 一点点消掉，表达能力或许正变成新的分水岭。

不懂专业名词，就没法用行业里的话表达，只能一遍遍跟 AI 要「高级感、电影感、有质感」。这类需求跟「五彩斑斓的黑」差不多，AI 也猜不出你到底要啥。可你想要的「游戏质感」，也许一个「迪卡姆风格」就说清楚了。

所以这篇文章开个小专题，回到我产品经理搞 AI 的老本行，把 VibeCoding 里常用的术语普及一下。让大家在 VibeCoding 时，能把模糊的视觉感受翻成精准的组件名称和交互规则，少让 AI 去猜，把生成界面的质量提上来。

先从「弹窗」说起。有一点得先记住：页面上所有弹出来的东西，别都叫「弹窗」，它们各有各的名字。

模态与非模态

模态（Modal）是种交互形式，简单说就是：一个界面出现后，用户得先处理它，才能接着操作原来的界面。

这种交互很常见。就拿对话框弹窗举例，做删除操作时，页面上往往会弹出一个框，二次确认是不是真要删，然后给「取消」和「确认删除」两个按钮。这时候用户必须先把选项选了，才能继续往下操作。

模态的交互比较强，适合关键信息确认、强阻断流程这类场景。

跟它相对的是非模态（Non-Modal）：弹窗或其他元素出现后，用户照样能操作原来的页面，不用先把弹窗关掉。

非模态的弹窗不多见，典型的是 Word 里的「查找与替换」窗口，在输入框里打完字，文档照样能编辑、能阅读。

不过在其他交互组件里，非模态的用法频率很高，比如悬浮球、下拉菜单、输入框的报错提示等等。

所以下回想让一个组件提示用户、又不打算打断操作流程，不用跟 AI 讲一大段，只要告诉它「这个组件交互形式为非模态」。

对话框：需要集中处理的事

对话框（Dialog）是最熟的那种弹窗，大部分人说的弹窗其实指的就是它，英文叫 Dialog，会直接在页面里弹出来，给出选项或者做提示。

比如删一条订单记录，屏幕中央突然冒出个窗口：「确定删除吗？」底下是取消、确认两个按钮。

跟前面说的「模态」合起来，就有了模态对话框（Modal Dialog）和非模态对话框（Non-Modal Dialog）。模态对话框的关键是打断当前操作、把用户的注意力收拢过来，所以删除确认、关键授权这类重要场景，最好都用「模态对话框」这种弹窗形式。

Vibe Coding 时可以这么说：「点击删除按钮后，打开模态对话框，背景添加半透明遮罩，提示用户确认删除，提供取消和确认两个按钮。」

气泡浮层：贴着按钮展开的小面板

假设我们点一下头像，想在头像下方展开一个小面板，里面显示账号信息、个人设置、退出登录等选项。

遇到这种情况，就不必再放一个占满屏幕中央的大对话框，更对路的组件是气泡浮层（Popover）。

气泡浮层（Popover）的特别之处在于，它挂在某个元素旁边出现，用户不用离开当前所在的操作位置。

举例来说，点一下颜色按钮，旁边就展开一块选颜色的面板；点一下筛选按钮，下面则列出一组筛选条件。

这类浮层一般不会挡住用户对整页的操作，里面还能放按钮、输入框这类可交互的元素。

跟对话框比，气泡浮层更轻，更贴合局部辅助操作的需要。

用 Vibe Coding 可以这么描述：“点击筛选按钮后，在按钮下方展开一个气泡浮层，显示筛选选项，不添加全屏遮罩，点击外部区域后关闭。”

工具提示：只解释，不打扰

气泡浮层还有个容易跟它搞混的同类，叫作 Tooltip（工具提示）。

有的按钮上只有图标、没有文字。例如工具栏里放了一把小剪刀，鼠标移上去后浮出“裁剪图片”四个字，用户这时就明白了：哦，这把小剪刀是用来裁剪图片的。

它的用途主要是说明某个元素是什么意思，一般在鼠标悬停或键盘聚焦时浮现，用户不需要主动去点。

工具提示与气泡浮层长得有点像，可各自的分工并不一样：工具提示只管解释，气泡浮层能承载操作。因此通常情况下，工具提示在页面里占的面积要小得多。

工具提示（Tooltip）在 PC 上用得比较多，到了 App 交互里却几乎见不到。原因在于两者形态本身有差异：电脑上可以“鼠标悬停”，手机却很难用手指做出“手指悬停”这种动作。

下拉菜单：展开一组选项

另有一种很常见的效果：点一下按钮，下方冒出一组选项。

例如点“排序”，会出来“最新优先、最早优先、名称排序”；点“更多操作”，则展开重命名、复制、删除这些功能。

这类交互用得多的就是下拉菜单（Dropdown）。

它跟气泡浮层也有点像，差别在于：下拉菜单一般是同一类型、同一层级的一组选项或操作，气泡浮层则能装下更自由的内容。比如点头像，可以出现昵称、设置、余额、客服入口等各不相同的条目。

用 Vibe Coding 可以这么描述：“点击文件右侧的更多按钮，展开下拉菜单，包含重命名、复制、删除三个操作，点击选项后关闭菜单并执行对应功能。”

Toast：通知结果但不打断

Toast 大概是常见程度只次于对话框的一种弹出形式，中文有人叫「轻提示」，但更普遍的叫法就是 Toast。

用户完成某个操作、或者进入某个页面时，页面会弹出一条提示，过几秒自己消失，这就是 Toast。

Toast 的典型特征是，它只做反馈，不要求用户非得回应。

常见场景有保存成功、复制完成这类轻量提示，用来解决对话框太“强”的问题。比如每次保存成功都弹一个对话框、让用户点“确定”，流程就被完全打断，体验会非常糟糕。Toast 则不会打断用户手头的工作，用户可以接着操作，状态提示一闪而过，扫一眼就知道保存成功了。

不过，轻提示并不适合承载那些必须被用户看到的重要信息。它通常会自动消失，用户可能还没读完就没了，所以特别重要的提示，还是用对话框弹出来更稳妥。

Toast 通常停留 3 秒，这个时长既容易被看到，又不至于太打扰用户。Vibe Coding 时可以直接这样说：“保存成功后，在页面右下角显示轻提示，内容为‘保存成功’，持续 3 秒后自动消失。”

抽屉面板：从侧边滑出窗口

做后台管理系统的人，多半会碰到这种场景：用户正在翻一个数据列表，点开其中一条想看详细信息，却不愿意离开当前页面跳转过去。

这种场景下，抽屉面板（Drawer）就很合适。

它一般从页面左侧或右侧滑出，能装下不少内容，比如用户详情、编辑表单、配置选项之类。

它最值得称道的一点，是让用户查看详情的同时，仍然保留着对原页面的上下文感知。

抽屉面板同样分模态和非模态。有的展开后会遮住并锁定背景页面，有的则允许用户接着操作原来的列表，按需要挑一种合适的处理方式就行。

所以向 AI 描述抽屉面板时，最好把背景内容能不能操作说清楚。

用 Vibe Coding 的话讲就是：“用户列表里点中任意一条，右侧就会滑出一个 480px 宽的非模态抽屉面板，用来显示该用户的详细资料。左边列表照样能操作，换一个用户，右边详情跟着刷新。”

底部弹出面板：移动端的选择

抽屉面板主要用在 PC 端，左右弹出，因为屏幕够宽。到了手机上，宽度不够、高度反而富余，弹出面板的位置就换成了底部。

这就是底部弹出面板（Bottom Sheet）。

比如点一下分享按钮，屏幕底部向上展开一块区域，里面列出微信、复制链接、保存图片等操作。

移动设备上用户主要用手指操作，把常用选项放在屏幕下方，通常更贴合触控习惯。

给 AI 下指令时，底部弹出面板最好一并说明怎么关闭，一般有两种做法：

• 一种是放一个明确的 × 号或者“关闭”按钮，点一下就关掉
• 另一种是点页面其他区域自动收起，也包括衍生出来的「向下滑动关闭」这类手势操作

用 Vibe Coding 的话讲就是：“手机端按下分享按钮，底部会弹出面板列出发送渠道，往下滑可以收起，弹出时还带一层半透明遮罩。”

总结

最后，把整体图景收一收：

这些组件看上去都像“弹窗”，实际承担的任务却完全不同。

有的要用户做决定，有的用来展示更多内容，有的只是解释一个图标，还有的仅仅告诉用户操作成功了。它们的差别不只在长相，更在于何时出现、出现在哪里、会不会打断操作，以及怎么消失。

记住这些名称，再跟 AI 沟通时，就不用费半天口舌描述效果，最后还落得两边理解对不上。

英国哲学家、科学家迈克尔·波兰尼（Michael Polanyi）提出过一个著名观点：

有经验的设计师扫一眼页面，就能觉出哪里别扭，可要他把原因一条条讲全，未必办得到。摄影师也一样，凭手感挑出最好的一张，那些审美判断却不一定能换算成参数。

波兰尼把这种说不透的知识叫作 Tacit Knowledge，也就是隐性知识。

它跟 AI 时代有一处有意思的交集。从前，一个人的隐性知识靠亲手做、反复练，慢慢变成作品。如今执行环节越来越多地交给 AI，怎么把隐性的知识、经验、审美判断交给另一个干活的角色，成了新的难题。

说到底，AI 时代不一定非得把具体技术学到手，但得先把行业里的语言体系对上，才能借 AI 在新领域快速站住脚。

这篇文章就到这里，下篇再见。