参考卡 · 设计 · 贯穿全程 · 统一叫法 · 可反复回看 / 可打印
UI 组件术语表
这张卡用来给页面上"那个东西"找到对的名字。你不用懂代码，能说出"我要一个底部弹层，不是模态弹窗"，Agent 就更容易一次做对。名字说准，返工通常更少。每个组件下面有真实渲染的小样例，照着认就行。中英对照，方便你看懂 Agent 偶尔蹦出的英文。
这张卡按"功能"分八类
- 基础交互控件：按钮 / 输入 / 选择 / 范围
- 导航：让用户知道"我在哪、能去哪"
- 信息容器：卡片 / 展开收起 / 浮层
- 反馈与状态：提示 / 加载 / 校验
- 数据展示：标签 / 列表表格 / 图表
- 布局与结构 · 表单与流程
- 交互状态：一个组件的"不同脸色"
- 动画与动效 · 高阶组件
怎么用这张卡：想让 Agent 加某个东西时，先在这里找到它的标准叫法，再连同它该长什么样一起说，例如："在预约表单底部加一个主按钮（primary button），点了之后弹一个底部弹层（bottom sheet）确认。"名字越准，返工越少。下面所有样例都用电脑修理店 Steve's Repair 的场景。
1. 基础交互控件（Basic Controls）
按钮（Buttons）
按钮区分彼此靠的是强调级别，不是大小。一个屏幕通常只给一个"主按钮"。
| 叫法 | 英文 | 说明 |
|---|
| 按钮（通用） | Button | 可点击执行动作的元素 |
| 主按钮 | Primary Button | 关键行动，实心填充、最强调 |
| 次级按钮 | Secondary Button | 描边或浅色底、中等强调 |
| 弱化按钮 | Tertiary / Ghost | 纯文字、最弱强调 |
| 图标按钮 | Icon Button | 只有图标、没有文字 |
| 悬浮主操作按钮 | FAB | 悬浮在屏幕上的主操作 |
立即预约
查看价格
了解更多
主 · 次 · 弱化 · 图标
一屏只放一个主按钮。两个按钮都做成"很重要"，用户就分不出该先点哪个。术语关键词：primary action（主操作）、destructive action（危险操作，如删除）、CTA（行动召唤）。
文本输入（Text Inputs）
| 叫法 | 英文 | 用在哪 |
|---|
| 单行输入框 | Text Field / Input | 姓名、地址 |
| 密码输入框 | Password Field | 登录密码（自动打码） |
| 搜索框 | Search Field | 搜型号、搜订单 |
| 多行文本输入 | Textarea / Multiline | 故障描述 |
| 数字输入 | Number / Stepper Input | 数量、价格 |
| 格式化输入 | Masked Input | 手机号、验证码（带格式） |
选择控件（Selection Controls）
| 叫法 | 英文 | 什么时候用 |
|---|
| 复选框 | Checkbox | 多选（可勾多个） |
| 单选按钮 | Radio Button | 一组里只能选一个 |
| 开关 | Toggle / Switch | 即时生效，无需"保存" |
| 分段选择器 | Segmented Control | 2 到 4 个并列选项（iOS 常见） |
| 下拉选择 | Dropdown / Select | 选项多、收起来省空间 |
| 多选下拉 | Multi-select Dropdown | 下拉里可勾多个 |
上门取件 到店自取 （复选框）
手机 电脑 （单选按钮）
加急维修 （开关：拨了就立刻生效）
手机电脑平板 （分段选择器）
维修类型 （下拉选择）
开关（Switch）= 拨了立刻生效；复选框（Checkbox）= 通常要配一个"提交/保存"才生效。别混。
范围控件（Range & Value Controls）
| 叫法 | 英文 | 说明 |
|---|
| 滑块 | Slider | 拖动选一个值 |
| 区间滑块 | Range Slider | 选一个范围（最低～最高） |
| 步进器 | Stepper | 加减号调数量 |
| 评分控件 | Rating Control | 星级打分 |
配件数量 減2加 步进器（减 / 加）
评价：
评分控件（4 / 5 星）
2. 导航（Navigation）
导航回答用户心里的两个问题：我现在在哪？我能去哪？
全局导航（Global Navigation）
| 叫法 | 英文 | 位置 |
|---|
| 顶部导航栏 | Navigation Bar / App Bar / Top Bar | 页面最上方 |
| 底部标签导航 | Tab Bar | App 最下方，切大模块 |
| 侧边导航 | Sidebar / Drawer | 左侧或从侧边滑出 |
| 汉堡菜单 | Hamburger Menu | 三条横线图标，点开是菜单 |
层级导航（Hierarchical Navigation）
| 叫法 | 英文 | 说明 |
|---|
| 面包屑 | Breadcrumb | 显示"你在第几层" |
| 返回按钮 | Back Button | 回上一层 |
| 逐级下钻导航 | Drill-down Navigation | 一层层点进去看细节 |
内容切换（Content Switching）
| 叫法 | 英文 | 说明 |
|---|
| 标签页 | Tabs | 在同一处切换不同内容 |
| 分段标签 | Segmented Tabs | 外观像分段选择器的标签 |
| 分页 | Pagination | 一页页翻（1 2 3…） |
| 无限滚动 | Infinite Scroll | 滚到底自动加载更多 |
进行中已完成已取消
这里显示对应标签下的订单…
123下一页
3. 信息容器（Containers）
卡片类（Card-based）
| 叫法 | 英文 | 说明 |
|---|
| 卡片 | Card | 一块自成一体的内容单元 |
| 平铺卡片 | Tile | 常排成网格的方块卡 |
| 信息面板 | Panel | 一块功能/信息区 |
| 列表项 | List Item | 列表里的一行 |
iPhone 换屏
原厂屏 · 当天取件 · 保修 90 天
立即预约
展开收起（Expand/Collapse）
| 叫法 | 英文 | 说明 |
|---|
| 手风琴 | Accordion | 多个可折叠区块，一般一次展开一个 |
| 可展开面板 | Expandable Panel | 点一下展开更多 |
| 信息披露组件 | Disclosure | iOS 风格的展开/收起 |
换屏要多久？
大多数机型 30 到 60 分钟可取。
有保修吗？
浮层（Overlay/Layer）
| 叫法 | 英文 | 区别（重点） |
|---|
| 模态弹窗 | Modal | 挡住后面内容，必须先处理它 |
| 对话框 | Dialog | 问你确认或要你输入 |
| 底部弹层 | Sheet / Bottom Sheet | 从底部滑上来的层（手机常见） |
| 气泡弹层 | Popover | 从某个元素旁边冒出来的小层 |
| 覆盖层 | Overlay | 盖在内容之上的任意层 |
| 遮罩层 | Scrim / Backdrop | 弹窗背后那层半透明暗色 |
中间白框 = 模态弹窗（这里也是个对话框，因为它在问你确认）；背后的暗色 = 遮罩层。
"弹个框"太含糊。说清楚：要模态弹窗（挡住一切、强制处理）还是底部弹层（从下方滑出、轻量）还是气泡弹层（贴着某个按钮冒出来）。
4. 反馈与状态（Feedback & Status）
系统反馈（System Feedback）
| 叫法 | 英文 | 特点 |
|---|
| 轻提示 | Toast | 自动消失、不挡操作 |
| 底部提示 | Snackbar | 底部冒出的轻提示（Material 风） |
| 警告提示 | Alert | 需要注意的提示 |
| 通知 | Notification | 系统/应用推送的消息 |
| 横幅提示 | Banner | 顶部一条横幅，持续显示 |
!今日预约已满，明日仍可下单（横幅）
预约成功，3 秒后自动消失（轻提示）
加载与进度（Loading & Progress）
| 叫法 | 英文 | 说明 |
|---|
| 加载指示器 | Loading Spinner | 转圈圈 |
| 进度条 | Progress Bar | 显示完成百分比 |
| 骨架屏 | Skeleton Screen | 内容还没来，先占位灰块 |
| 骨架闪光效果 | Shimmer Effect | 骨架屏上流动的光，表示"加载中" |
验证（Validation）
| 叫法 | 英文 | 说明 |
|---|
| 行内校验 | Inline Validation | 就在输入框旁边即时提示对错 |
| 错误提示 | Error Message | 说明哪里错了 |
| 辅助说明 | Helper Text | 输入框下的小字提示 |
| 成功/错误/警告状态 | Success / Error / Warning State | 用颜色表达结果 |
手机号
138-0000
!手机号不完整，请输入 11 位
仅用于联系取件，不会外泄（辅助说明）
5. 数据展示（Data Display）
基础（Basic）
| 叫法 | 英文 | 说明 |
|---|
| 标签 | Label | 给内容贴的名字/分类 |
| 徽标 / 数字角标 | Badge | 右上角的小红点或数字 |
| 标签块 | Tag / Chip | 一小块可点的标签 |
| 头像 | Avatar | 用户的小圆图 |
| 缩略图 | Thumbnail | 图片的小预览 |
| 悬浮提示 | Tooltip | 鼠标停上去冒出的小说明 |
S3
已完成
加急
头像右上角的红色"3" = 数字角标（Badge）；右侧两个圆角小块 = 标签块（Chip）。
结构化数据（Structured Data）
| 叫法 | 英文 | 说明 |
|---|
| 列表 | List / List View | 一行行排列 |
| 表格 | Table / Data Table | 行 + 列的网格 |
| 树形结构 | Tree View | 可展开的层级（文件夹那种） |
| 时间线 | Timeline | 按时间顺序排的事件 |
指标与图表（Metrics & Charts）
| 叫法 | 英文 | 说明 |
|---|
| 图表 | Chart / Graph | 数据的可视化 |
| 柱状图/折线图/饼图 | Bar / Line / Pie Chart | 三种最常用图 |
| 热力图 | Heatmap | 用颜色深浅表示密度 |
| 仪表盘 | Gauge / Meter | 像车速表的指针 |
| 指标卡 | KPI Card / Stat Card | 一个大数字 + 标题 |
6. 布局与结构 · 表单与流程
布局与结构（Layout & Structure）
| 叫法 | 英文 | 说明 |
|---|
| 网格系统 | Grid System | 把页面分成对齐的格子 |
| 列 / 行 | Column / Row | 纵向列 / 横向行 |
| 堆叠布局 | Stack (Vertical/Horizontal) | 元素竖着或横着排 |
| 布局容器 | Container | 限制宽度、居中内容 |
| 区块 | Section | 页面的一大段 |
| 分割线 | Divider / Separator | 一条线分开两块 |
| 空白占位 | Spacer | 专门用来撑开间距 |
| 安全区 | Safe Area | 避开刘海/圆角的可用区（iOS） |
表单与流程（Forms & Flows）
| 叫法 | 英文 | 说明 |
|---|
| 表单 | Form | 一组要填写并提交的字段 |
| 表单字段 | Form Field | 表单里的一项 |
| 字段组 | Field Group | 相关字段放一组 |
| 分步流程 | Wizard / Stepper | 分几步一步步完成 |
| 新手引导流程 | Onboarding Flow | 首次使用的引导 |
| 确认弹窗 | Confirmation Dialog | 提交前再确认一次 |
7. 交互状态（Interaction States）
同一个组件在不同情况下会换样子。说清是哪种状态，Agent 才知道要做哪一种。
| 叫法 | 英文 | 什么时候 |
|---|
| 默认状态 | Default | 什么都没发生时 |
| 悬停状态 | Hover | 鼠标停在上面 |
| 聚焦状态 | Focus | 被选中/光标在里面（键盘可达） |
| 激活 / 按压状态 | Active / Pressed | 正在被按下 |
| 禁用状态 | Disabled | 暂时不能点（变灰） |
| 加载状态 | Loading | 正在处理中 |
| 错误/成功/警告状态 | Error / Success / Warning | 表达结果 |
| 空状态 | Empty State | 没有任何数据时该显示什么 |
让 Agent 做按钮/表单时，顺手交代"悬停、禁用、加载、错误状态长什么样"，页面会更完整。别忘了空状态：列表为空时不该是一片空白。
手势与触摸（移动端常见）
| 叫法 | 英文 |
|---|
| 拖放 | Drag & Drop |
| 滑动手势 | Swipe Gesture |
| 下拉刷新 | Pull to Refresh |
| 长按 | Long Press |
| 上下文菜单 | Context Menu |
8. 动画与动效（Animation & Motion）
动效的作用是帮用户理解发生了什么，不是为了好看。少而准，比多而乱好用。
触发条件（Triggers）
| 叫法 | 英文 |
|---|
| 悬停触发 | Hover |
| 按压 / 点击 | Press / Tap |
| 获得 / 失去焦点 | Focus / Blur |
| 滚动触发 | Scroll-triggered |
| 页面加载时 | On Load |
| 进入 / 离开视图 | Enter / Exit |
时间（Timing）
| 叫法 | 英文 · 区间 | 用在哪 |
|---|
| 短时长 | Short · 80 到 150ms | 微交互、悬停反馈 |
| 中等时长 | Medium · 180 到 300ms | 状态变化、展开 |
| 长时长 | Long · 400ms 以上 | 页面转场、复杂动画 |
| 错峰动画 | Stagger | 列表项依次出现 |
| 弹簧动画 | Spring | 有物理感的自然运动 |
动效让人觉得"慢"，多半不是太花哨，而是时长太长。多数界面交互在 150 到 300ms 最跟手，太久就会觉得卡。
缓动（Easing）
| 叫法 | 英文 | 最适合 |
|---|
| 线性 | Linear | 几乎不用，感觉机械 |
| 慢出 | Ease-out | 元素进入（快起步、轻落地） |
| 慢进 | Ease-in | 元素离开（轻起步、快收尾） |
| 慢进慢出 | Ease-in-out | 元素移动 |
| 弹簧 / 反弹 | Spring / Bounce | 俏皮、吸引注意 |
动效模式（Motion Patterns）
| 叫法 | 英文 |
|---|
| 淡入 / 淡出 | Fade In / Out |
| 滑入 / 滑出 | Slide In / Out |
| 缩放进入 / 退出 | Scale In / Out |
| 展开 / 收起 | Expand / Collapse |
| 共享元素转场 | Shared Element Transition |
| 英雄转场 | Hero Transition |
| 交叉淡化 | Crossfade |
| 形变动画 | Morphing Animation |
| 骨架屏加载 | Skeleton Loading |
动效层级（Motion Hierarchy）
| 叫法 | 英文 | 例子 |
|---|
| 微交互 | Micro-interaction | 按钮反馈、开关动画 |
| 大动效 | Macro Motion | 页面转场、揭示动画 |
| 轻微动效 | Subtle Motion | 悬停效果、轻微视差 |
| 表现型动效 | Expressive Motion | 庆祝动画、新手引导 |
性能（Performance）：让 Agent 守住的几条
该动这些（流畅）opacity 透明度transform：位移 / 缩放 / 旋转- 目标 60fps，不卡顿
别动这些（会卡）width / height 宽高margin / padding 间距- 会触发重排（reflow/repaint）
无障碍：尊重系统的"减少动态效果"设置（prefers-reduced-motion）。可以直接告诉 Agent："动效要尊重 prefers-reduced-motion。"
9. 高阶组件（Advanced Components）
| 叫法 | 英文 | 说明 |
|---|
| 命令面板 | Command Palette (Cmd+K) | 按 Cmd+K 弹出的快捷搜索/命令框 |
| 操作表 | Action Sheet (iOS) | 从底部弹出的一组操作 |
| 权限弹窗 | Permission Prompt | 请求相机/定位等权限 |
| 系统对话框 | System Dialog | 操作系统级别的弹窗 |
把这张卡当"点单菜单"用：给 Agent 提需求时，从这里抄出准确的组件名加上状态、动效。例如："订单卡片用卡片（card），右上角加状态标签块（chip）；点'取消'弹确认对话框（confirmation dialog）；列表为空时显示空状态。"名字越准，它越不会跑偏。
不确定某个东西叫什么？把页面截图发给你的 AI 老师（Agent），问"这个组件标准叫法是什么、还有哪些常见状态？"卡住就问它。
来源：Abel's UX Design Skill（abel-ux）· UI Components Glossary（Bilingual Reference）。本卡为中文整理版 + 真实可视样例，贯穿全程、统一叫法，可反复回看。