前端 UI 术语速查手册
用途：在 vibe coding（用自然语言让 AI 生成前端代码）时，用对术语 = 一次就得到想要的效果。 本手册覆盖：基础控件、输入、弹窗与浮层、导航、布局、反馈、列表与数据展示、状态与交互模式，每项附英文术语（提示词关键词）、说明、提示词案例。
1. 基础控件 Controls
| 中文 | 英文术语（提示词关键词） | 说明 |
|---|---|---|
| 按钮 | Button |
触发动作。变体：primary（主按钮）、secondary、ghost/dashed/text（幽灵/虚线/文字按钮）、danger（危险操作红色） |
| 图标按钮 | Icon Button |
只有图标无文字，需 tooltip（悬浮提示）辅助 |
| 按钮组 | Button Group |
一组相关动作并排 |
| 开关 | Toggle / Switch |
两状态开/关，即时生效，无需确认 |
| 复选框 | Checkbox |
多选，可选多个 |
| 单选框 | Radio Button / Radio Group |
单选，一组里只能选一个 |
| 下拉选择 | Select / Dropdown |
从列表中选一个值；可搜索的叫 Searchable Select / Combobox |
| 滑块 | Slider |
拖动选数值，适合范围选择（价格区间等） |
| 进度条 | Progress Bar |
已知进度（如下载 70%） |
| 加载指示 | Spinner / Loading Indicator |
未知耗时的等待状态 |
| 徽标 | Badge |
小圆点或数字，提示数量（如未读消息 3） |
| 标签 | Tag / Chip |
内容的分类标记，可带删除叉 |
| 头像 | Avatar |
用户头像，常带 status dot（在线状态点） |
| 卡片 | Card |
将一组相关信息包在圆角容器中 |
| 分割线 | Divider |
分隔内容区块 |
| 评分 | Rate / Star Rating |
星级打分 |
| 步骤条 | Steps / Stepper |
展示流程进度（第 2 步/共 4 步） |
| 分页器 | Pagination |
翻页控件 |
提示词案例：
“做一个设置页：每行左侧是设置项名称和说明文字，右侧是 Toggle 开关，共 5 行，行间用 Divider 分隔，卡片整体圆角 12px、白底、浅阴影。”
“顶部工具栏：左边是返回 Icon Button（箭头图标），中间是页面标题，右边是主按钮’保存’和文字按钮’取消’。”
2. 输入 Input
| 中文 | 英文术语 | 说明 |
|---|---|---|
| 输入框 | Input / Text Field |
单行文本。属性：placeholder（占位提示）、maxlength、clearable（可清空） |
| 文本域 | Textarea |
多行文本 |
| 标签 | Label |
字段名称，常配合 required asterisk（必填红星 *） |
| 前后缀 | Prefix / Suffix / Add-on |
输入框内嵌图标或外部单位（如 ¥、kg、.com） |
| 联想输入 | Autocomplete / Typeahead |
输入时下拉显示建议项 |
| 数字输入 | Number Input / Stepper |
带 +/- 步进按钮 |
| 日期选择 | Date Picker / Date Range Picker |
日历弹层选日期/日期区间 |
| 时间选择 | Time Picker |
选时间 |
| 文件上传 | File Upload / Dropzone |
点击或拖拽上传；drag and drop（拖放区） |
| 搜索框 | Search Bar / Search Input |
带放大镜图标的输入框 |
| 表单 | Form |
输入控件的组合，含验证 |
| 验证 | Validation / Error State |
出错时红框 + 错误文案（inline error 行内错误） |
| 掩码 | Input Mask |
强制格式，如手机号 138-xxxx-xxxx |
提示词案例：
“做一个注册表单：用户名 Input（带 Label 和必填红星）、邮箱 Input（左侧信封图标前缀）、密码 Input（右侧眼睛图标可切换明文，
password visibility toggle），底部’注册’主按钮占满宽度。每个字段校验失败时显示红色边框和下方 12px 红色错误提示文字。”
“价格筛选：一个
Number Input带 ¥ 前缀和 ‘元/月’ 后缀，加一个Slider双滑块选价格区间。”
3. 弹窗与浮层 Overlays
| 中文 | 英文术语 | 说明与使用场景 |
|---|---|---|
| 模态框 | Modal / Dialog |
居中弹窗，阻断背后内容，需交互后关闭。适合：确认、重要表单 |
| 非模态 | Modeless / Non-modal |
不阻断，可同时操作背后内容 |
| 抽屉 | Drawer / Slide-over |
从侧边滑出的面板，适合：详情、设置、购物车 |
| 底部抽屉 | Bottom Sheet |
从底部滑出，移动端常用 |
| 确认框 | Confirm Dialog |
‘确定删除吗？’ + 取消/确认按钮，危险操作用红色按钮 |
| 提示气泡 | Popover |
点击/悬浮触发的浮动小卡片，带小箭头指向触发元素 |
| 工具提示 | Tooltip |
悬浮显示的简短说明，鼠标移开即消失 |
| 下拉菜单 | Dropdown Menu |
点击展开的操作菜单（如’更多 ⋯’） |
| 轻提示 | Toast / SnackBar |
屏幕角落短暂弹出的消息，自动消失，不阻断 |
| 警告条 | Alert / Banner |
页面内常驻的提示条（成功/警告/错误/信息四色） |
| 引导层 | Spotlight / Onboarding Tooltip |
高亮某区域引导新用户 |
| 遮罩 | Overlay / Backdrop / Scrim |
弹窗后面的半透明黑层，常带 blur（毛玻璃） |
| 全屏遮罩加载 | Loading Overlay |
提交时全屏转圈防止重复操作 |
提示词案例：
“点击’删除’弹出 Confirm Dialog：标题’确认删除’，正文’此操作不可恢复’，右侧并排两个按钮，取消（secondary）和删除（danger 红色），点删除后显示绿色成功 Toast ‘已删除’，2 秒自动消失。”
“表格每行末尾的’⋯’按钮点击弹出 Dropdown Menu，含：编辑、复制、删除（红色文字），删除项与其他项之间加分割线。”
“订单列表点击某行，从右侧滑出 Drawer（宽 400px）展示订单详情，带遮罩，点遮罩或右上角 × 关闭。”
4. 导航 Navigation
| 中文 | 英文术语 | 说明 |
|---|---|---|
| 顶部导航 | Navbar / Header / Top Bar |
网页最常见，含 Logo、菜单、头像 |
| 侧边栏 | Sidebar / Side Nav |
后台管理系统标配；可折叠的叫 collapsible sidebar |
| 面包屑 | Breadcrumb |
首页 / 分类 / 详情，显示层级路径 |
| 标签页 | Tabs |
同页切换内容；下划线式 / 胶囊式 |
| 返回 | Back Button |
移动端左上角返回箭头 |
| 底部标签栏 | Tab Bar / Bottom Navigation |
移动端 App 底部 3-5 个入口 |
| 汉堡菜单 | Hamburger Menu |
☰ 三横线，展开抽屉导航 |
| 分段控制 | Segmented Control |
iOS 风格的分段切换（如’日/周/月’） |
| 命令面板 | Command Palette / ⌘K |
Ctrl+K 唤起的全局搜索快捷入口 |
| 锚点 | Anchor |
长页面内跳转 + 高亮当前区块 |
提示词案例：
“后台管理布局：左侧固定 220px 深色 Sidebar，Logo 在顶部，下面是分组菜单（每组有小标题），当前页菜单项高亮；顶部 Navbar 显示面包屑’首页 / 用户管理’和右侧用户头像。”
“数据页顶部用 Tabs 切换’全部 / 待付款 / 已完成’，选中项底部有蓝色下划线动画。”
5. 布局 Layout
| 中文 | 英文术语 | 说明 |
|---|---|---|
| 容器 | Container / Wrapper |
限制内容最大宽度居中（如 max-width: 1200px） |
| 栅格 | Grid |
12 列栅格；CSS Grid 布局 |
| 弹性布局 | Flexbox |
一维方向排布，提示词常用 flex、gap、space-between |
| 间距 | Spacing / Gap / Padding / Margin |
内边距 padding、外边距 margin、元素间距 gap |
| 卡片网格 | Card Grid |
电商/作品集常用，responsive grid 自适应列数 |
| 双栏 | Two-column / Split Layout |
左表单右预览 |
| 三段布局 | Holy Grail Layout |
头-侧栏-主内容-脚 |
| 吸顶 | Sticky Header |
滚动时导航固定顶部 |
| 粘性侧栏 | Sticky Sidebar |
长文章侧边目录随滚动固定 |
| 折叠面板 | Accordion / Collapse |
点击展开收起，FAQ 常用 |
| 骨架屏 | Skeleton Screen |
加载中的灰色占位块 |
| 空状态 | Empty State |
无数据时的插图+文案+引导按钮 |
| 响应式 | Responsive |
断点 breakpoints：手机 <768、平板 <1024、桌面 |
提示词案例：
“落地页：Sticky 顶部导航（白底、滚动后加阴影和毛玻璃效果），Hero 区居中大标题+副标题+两个按钮，下面是 3 列响应式 Card Grid（手机变 1 列），页面最大宽度 1152px 居中。”
“移动端地址列表：每项是一个 Card，左侧 Avatar，中间姓名+地址两行文字（第二行灰色小字），右侧右箭头图标，用 Flex 布局 space-between。”
6. 反馈 Feedback
| 中文 | 英文术语 | 说明 |
|---|---|---|
| 成功提示 | Success Toast / Message |
绿色，短暂显示 |
| 警告 | Warning Alert |
黄/橙色 |
| 错误 | Error Alert |
红色 |
| 加载态 | Loading State / Spinner / Skeleton |
三选一：转圈、进度、骨架屏 |
| 禁用态 | Disabled State |
灰色不可点，按钮 loading 时自动禁用防重复提交 |
| 拖拽排序 | Drag and Drop / Sortable |
拖动行调整顺序，出现 drag handle（拖拽手柄 ⠿） |
| 下拉刷新 | Pull to Refresh |
移动端下拉出 Spinner |
| 无限滚动 | Infinite Scroll |
滚到底自动加载更多；或 Load More 按钮 |
| 乐观更新 | Optimistic Update |
先改界面再等服务器确认 |
| 撤销 | Undo |
删除后 Toast 里带’撤销’按钮 |
提示词案例：
“点赞按钮点击后有缩放弹跳动画并从描边心形变红色实心，数字 +1（乐观更新）；再次点击取消。”
“列表首次加载显示 Skeleton（灰色圆角块模拟头像+两行文字），加载完成淡入真实内容；列表为空时显示 Empty State：一个插图、’还没有订单’、一个’去下单’按钮。”
7. 数据展示 Data Display
| 中文 | 英文术语 | 说明 |
|---|---|---|
| 表格 | Table / Data Table |
列头 table header、行、斑马纹 zebra stripes、悬停行高亮 |
| 排序 | Sortable Column |
列头点击排序，箭头指示方向 |
| 筛选 | Filter |
表格上方筛选条件；filter chip 已选筛选标签 |
| 描述列表 | Description List / Key-Value |
详情页字段：左标签右值 |
| 列表 | List |
可带 list item 头像/图标/操作 |
| 树形控件 | Tree View |
层级展开（文件目录） |
| 时间线 | Timeline |
垂直时间轴记录事件 |
| 轮播 | Carousel / Slider |
图片轮播，带指示点 dots 和箭头 |
| 统计卡 | Stat Card / KPI Card |
大数字 + 标题 + 环比箭头 |
| 图表 | Chart |
折线 line、柱状 bar、饼图 pie、面积 area |
| 折叠单元格 | Expandable Row |
表格行展开显示详情 |
| 状态列 | Status Pill |
如 ‘已支付’绿、’待付款’橙、’已退款’灰 |
提示词案例：
“订单管理表格：列有订单号、客户（带头像和姓名）、金额（右对齐）、状态（彩色 Pill：待付款橙色/已支付绿色/已取消灰色）、创建时间、操作。列头’金额’可点击排序，表格上方左侧是搜索框、右侧是’导出’按钮，底部 Pagination 显示总数。”
“数据看板顶部 4 个 KPI Card：大数字标题 + 较小灰色说明 + 环比箭头（上升绿色），下面一行两个图表卡：近 30 天折线图和分类饼图。”
8. 状态与交互模式 States & Patterns
每个控件通常都有这组状态，提示词中直接点名可大幅提升质感：
| 术语 | 说明 |
|---|---|
Default |
默认态 |
Hover |
鼠标悬停：变色/阴影/上浮（transition: all .2s） |
Active / Pressed |
按下瞬间 |
Focus |
键盘聚焦，常见 focus ring（外发光描边），无障碍必需 |
Disabled |
禁用灰态 |
Loading |
按钮内转圈、文字保留宽度 |
Selected / Checked |
选中态（Tab 高亮、Checkbox 打勾） |
Error |
校验失败红态 |
Drag-over |
拖拽悬停目标高亮 |
常用交互/视觉术语（点缀提示词用）：
hover effect、micro-interaction（微交互）、transition（过渡动画）、fade in（淡入）、slide up（上滑入场）rounded corners（圆角）、box-shadow（阴影）、elevation（层级高度）、glassmorphism（毛玻璃）、neumorphism（新拟态）dark mode（深色模式）、RTL（从右到左）accessibility / a11y（无障碍：aria-label、键盘可达、对比度）loading shimmer（骨架屏闪光动画）、parallax（视差滚动）、sticky（吸附）
提示词案例：
“所有按钮 hover 时轻微变深并上移 1px 加阴影，active 时按下 1px，transition 0.15s ease；输入框 focus 时显示 2px 蓝色 focus ring。”
9. Vibe Coding 提示词模板
模板 A：组件级
做一个 [组件名]：包含 [子元素列表]。
样式：[颜色/圆角/阴影/字号]。
状态：[default/hover/disabled/loading]。
交互：点击后 [行为]，反馈用 [toast/dialog/动画]。
模板 B：页面级
做一个 [页面名]，[桌面/移动]端优先，整体风格 [简洁/活泼/专业]，主色 [#xx]。
布局：[顶部导航/侧边栏/内容区结构]。
主内容：[区块 1]、[区块 2]…
数据状态：加载时 [骨架屏]，空数据 [空状态图]，错误 [重试按钮]。
模板 C：交互级
当用户 [触发动作] 时：
1. 立即 [乐观更新/按钮进入 loading 并禁用]；
2. 请求成功 → [成功 toast，2s 消失]；
3. 失败 → [行内错误提示 + 恢复原状]。
反面示例 → 正面示例
❌ “加个弹的东西” ✅ “点击后从右侧滑出 400px 宽的 Drawer，带遮罩，可点遮罩关闭”
❌ “弄个提示” ✅ “提交成功后右上角弹出绿色 Success Toast，2.5 秒自动消失，带滑入滑出动画”
❌ “表格弄好看点” ✅ “表格加悬停行高亮、斑马纹、金额右对齐、状态列用彩色 Pill，列头支持排序”
10. 延伸学习
- 组件库文档（看术语最直观）：Ant Design、Element Plus、shadcn/ui、Material Design 3
- 交互模式库：Refactoring UI、Nielsen Norman Group 文章