【AI 开发·第四集】弹窗、抽屉、手风琴，这些词该怎么说
跟 AI 提需求，最常见的情况不是它做不出来，而是它做出来的不是你想要的。
原因往往只有一个：你用的词，它理解成了另一个意思。
最典型的是「弹出来」。你说「这里给我弹个东西」，它可能做成一个盖住整页、必须点了才能继续的对话框；也可能做成右下角闪一下就消失的提示条；也可能做成从右边滑出来的一块面板。这四种东西长得完全不一样，做错一个就要来一轮返工。
这篇整理一份词表。不用全记住，用到哪一类翻哪一类。
一、为什么一个词能省好几轮
跟 AI 对话有个特点：它不会反问你「你指的是哪一种」。它默认懂，然后挑一个它觉得最像的做出来。
所以省时间的办法不是把话说得更长，而是把那个词说准。一个准的词，胜过三句解释。
下面按「界面」「前端」「数据」「功能关联」四块来分，每块给一组对照——左边是你可能会说的，右边是该用的词。
二、界面组件：最容易说不清的一类
先看这张图，同样是「弹出来」，落到四种组件上差别有多大：
2.1 会「浮起来」的四种
| 你可能会说 | 该用的词 | 它长什么样 | 什么时候用 |
|---|---|---|---|
| 弹个框，不点掉就不能干别的 | 弹窗 / 模态框（Modal） | 盖在页面正中，背景变暗，挡住其他操作 | 确认删除、填一个表单、看重要提醒 |
| 从右边滑出来一块 | 抽屉（Drawer） | 从屏幕边缘推进来，盖住一部分，但底下的页面还在 | 看详情、不改动当前页面的次要操作 |
| 点一下冒个小气泡 | 气泡浮层（Popover / Popup） | 贴在按钮旁边，很轻，点外面就消失 | 快速看信息、几个小操作 |
| 底下闪一条就没了 | 轻提示（Toast / Message） | 顶部或底部一条，几秒自动消失，不打断你 | 「已保存」「复制成功」这种反馈 |
这四个的区别，一句话记住：弹窗是「你必须理我」，抽屉是「我先占一半」，气泡是「我贴着你」，提示是「我说一声就走」。
2.2 会「展开收起」的两种 —— 这里有坑
「手风琴」和「折叠面板」经常被当成一个词，但它们不是。
| 你的说法 | 该用的词 | 关键区别 |
|---|---|---|
| 点开一个，别的自动收起 | 手风琴（Accordion） | 同一时间只允许展开一个 |
| 点开能同时开好几个，各开各的 | 折叠面板（Collapse） | 可以同时展开多个 |
行业里普遍的说法是：手风琴是一种特殊的折叠面板，只允许单个内容区域展开。所以在需求里要说清「是不是只能开一个」，否则做出来的行为会对不上你的预期。
2.3 页面上其他常见的东西
| 你可能会说 | 该用的词 |
|---|---|
| 上面一排标签，点了切换内容 | 标签页（Tabs） |
| 左边一直挂着的菜单 | 侧边栏（Sidebar） |
| 一点出来一串选项 | 下拉菜单（Dropdown） |
| 一行一行的数据表 | 表格（Table） |
| 太多了要翻页 | 分页（Pagination） |
| 一块一块的方框 | 卡片（Card） |
| 第一次打开先显示几个灰块占位 | 骨架屏（Skeleton） |
| 左上角显示我在哪个页面下 | 面包屑（Breadcrumb） |
| 鼠标放上去冒一行说明 | 悬浮提示（Tooltip） |
| 右上角一个小红点带数字 | 徽标（Badge） |
| 一步一步的进度 | 步骤条（Steps） |
| 左右滑动的图片 | 轮播（Carousel） |
| 左边一棵树，一层层点开 | 树形控件（Tree） |
三、前端：说清「会不会动」和「怎么动」
界面说清楚了，接下来要说它怎么响应。这一块如果不提，AI 通常只会做静态的样子。
| 你想表达的 | 该用的词 | 怎么说才到位 |
|---|---|---|
| 手机上也要能看 | 响应式 / 自适应（Responsive） | 「手机上竖着排，电脑上横着排」 |
| 窗口窄了自动换布局 | 断点（Breakpoint） | 「宽度小于 768 的时候变成单列」 |
| 填了数据别的地方自动跟着变 | 状态 / 联动（State） | 「数量改了，金额自动重算」 |
| 输入的时候别一直发请求 | 防抖（Debounce） | 「搜索框停下 0.5 秒再查」 |
| 滚到才加载 | 懒加载（Lazy Load） | 「图片滚到位置再显示」 |
| 页面之间怎么切 | 路由（Router） | 「点进去是一个新页面，还是弹一层」 |
| 关掉浏览器下次还记得 | 本地存储（LocalStorage） | 「记住上次选的，下次打开还是它」 |
| 两边地址不一样调不通 | 跨域（CORS） | 「后端要允许来自这个地址的请求」 |
这一块最容易被漏掉的是第七条。凡是「下次打开还想要它记得」的东西，都要明确说，不然一刷新就没了。
四、数据：说清「东西怎么存」
你说「记客户信息」，AI 会建一张表。但存得好不好用，取决于你有没有说这几件事：
| 你想表达的 | 该用的词 | 为什么必须说 |
|---|---|---|
| 这些东西分几类 | 表（Table） | 客户、订单、商品，各是一张表，不要混在一起 |
| 每类里记哪些项 | 字段（Field） | 姓名、电话、下单时间，各是一个字段 |
| 每条记录怎么唯一认出来 | 主键（Primary Key） | 没有它，将来改数据会改错行 |
| 一个客户有几个订单 | 关联 / 外键（一对多） | 不说清，将来就查不出「这个客户买过什么」 |
| 查得慢 | 索引（Index） | 数据上万条以后，没索引会明显卡 |
| 这两步要么都成要么都不成 | 事务（Transaction） | 涉及扣库存、改余额这类，必须说 |
| 删了但想留个底 | 软删除（Soft Delete） | 「删掉的不真的删，标记一下」 |
| 怎么把数据弄出来一份 | 导出 / 备份（Backup） | 做完第一件事就该问 |
最后一条特别值得一提：东西做完，第一件事是问「怎么把数据导出来」。数据存在这里、存在你自己电脑上，能导出来，才算是你自己的。
五、功能之间怎么关联 —— 最容易漏的一块
这一块是返工的重灾区。你说「这两个功能要连起来」，AI 不知道你说的「连」是哪一种：
| 你的说法 | 实际指什么 | 该怎么说清 |
|---|---|---|
| 这俩是一回事 | 数据关联（一对多 / 多对多） | 「一个客户可以有多个订单，一个订单只属于一个客户」 |
| 改了这个那个要跟着变 | 联动 / 状态同步 | 「勾选之后，下面的金额自动重算」 |
| 得先做这个才能做那个 | 流程顺序 / 前置条件 | 「没填完基本信息，不能提交审核」 |
| 有的人能用有的人不能用 | 权限（Role / Permission） | 「只有管理员能删，普通用户只能看」 |
| 这个状态之后再走一步 | 状态流转（状态机） | 「草稿 → 待审核 → 已发布，退回就回到草稿」 |
其中「状态流转」最值得花五分钟说清楚。只要你的东西带有「提交」「审核」「发布」「归档」这类词，就一定有状态流转。把下面这三件事写出来，能省掉后面一大堆「怎么这里又能改了」：
| 要说清 | 例子 |
|---|---|
| 有哪几个状态 | 草稿、待审核、已发布、已归档 |
| 每个状态谁能改 | 草稿只有本人能改，已发布的只有管理员能改 |
| 状态之间怎么走 | 提交后变待审核；审核通过变已发布；退回变回草稿 |
六、可以直接抄的一段需求模板
把上面几块合起来，一段需求大概是这个样子，方括号里换成你自己的：
我要做一个【客户管理】页面，给【我和两个同事】用。
界面：主页面是一张表格，一页显示 20 条，带分页。右上角一个「新增」按钮，点了打开弹窗填表单。点某一行的名字，从右侧抽屉里看详情，不离开当前页。操作成功后在顶部闪一条轻提示。
前端：手机上表格改成卡片竖着排（窄于 768 切换）。搜索框输入停顿 0.5 秒再查。
数据：客户表有：姓名、电话、来源、上次联系时间、备注。每条记录有唯一编号。一个客户可以有多条跟进记录，跟进记录单独一张表。
关联：跟进记录保存后，客户表里的「上次联系时间」自动更新成今天。
权限：只有我能删除客户，同事只能新增和修改。
其他：所有数据能一键导出成 Excel；删除的客户不真的删掉，标记成已删除，能在回收站里找回。
我不会写代码。做之前先把你的理解和我说一遍，我确认了再动手。
这段话不长，但它把「做成什么样」「怎么动」「怎么存」「怎么连」「谁能用」五件事一次说完了。同样是一段话，说全了和没说全，差的是后面三五轮来回。
七、最容易说不清的地方
| 常见的坑 | 怎么避 |
|---|---|
| 只说「弹出来」，不说哪一种 | 从弹窗、抽屉、气泡、提示里挑一个词 |
| 说「手风琴」但其实想同时展开好几个 | 明确说「只能开一个」还是「可以开多个」 |
| 只说界面，不说点了之后会怎样 | 每个按钮后面补一句「点了之后发生什么」 |
| 说「要能记住」但没说记多久 | 说清「关掉浏览器也记得」还是「只是这次记得」 |
| 说「两个功能连着」 | 具体到：数据关联、联动、流程顺序、权限，是哪一种 |
| 不提权限，做出来人人可删 | 一开始就说清楚谁能看、谁能改、谁能删 |
| 不说数据处理 | 做完第一件事就问「怎么导出、怎么备份」 |
| 一次把所有细节倒出来 | 先说框架让它复述一遍，确认了再补细节 |
最后一句：你不需要学会写代码，你需要学会给东西起名字。说得出「这是个抽屉不是弹窗」，AI 就少猜一次；少猜一次，你就少改一轮。