兰亭妙微ui设计公司分享：在 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 的状态提示一闪而过，用户扫一眼就知道保存成功了。
不过，轻提示不适合承载必须被用户看到的重要信息。因为它通常会自动消失，用户可能还没来得及阅读，所以，特别重要的提示，还是对话框弹出更稳妥一点。
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 在一个新领域快速落下脚。
这篇文章就到这里，下篇再见。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
