Appearance
前端UI术语手册
元信息
- 目标：能按「控件—组件—模式—风格」四层说出一个界面术语所处的位置；能叫出十余个高频组件的英文真名与中文习惯名；会用术语写提示词（prompt，发给 AI 的指令文本）去指挥 AI，而不是用生活语言描述半天
- 关键概念：组件 component、模态框 modal、吐司 toast、骨架屏 skeleton、交互模式 pattern、视觉风格 style、DESIGN.md
- 关联阶段：cp1
- 常见误区：以为术语只是行话（每个名字锁定一组形态与行为，是可检索的知识索引）；把一切弹出物都叫「弹窗」（modal、popover、tooltip、toast 行为与语义各不相同）；描述界面只用生活语言（「弹出来那个框」，人和 AI 都得猜）
为什么需要一本术语手册
控件篇你已经见过术语工作的方式：input、radio、checkbox，一个名字锁定一种形态和一种行为，名字对了，搜索、文档、代码全都对得上。
但控件只是界面词汇表的一角。整个 Web 界面，行业早就逐个命过名：你天天见的「顶部那一条」「弹出来的提示」「转圈等待」，每一个都有正式名字。这本手册就是这张地图的入口。
为什么现在学？三个沟通对象都吃术语：
- 设计师：设计稿的图层名、设计系统的文档，全用组件名说话
- 搜索与文档：输入英文名，MDN、组件库文档直接命中；输入生活描述，什么都搜不到
- AI 编程代理：你说「floating action button（悬浮操作按钮）」，AI 一次到位；你说「右下角圆的悬浮的那个」，来回猜三轮
术语是界面的通信协议。协议词汇量越大，指挥的精度越高。
界面术语的四层架构
界面术语排成四层，下层组合成上层，同一个东西在不同层有不同的名字：
| 层 | 回答什么问题 | 例子 |
|---|---|---|
| 控件 control | 用户输入什么 | 按钮、单选框、开关（控件篇） |
| 组件 component | 可复用的界面块长什么样 | 模态框、标签页、面包屑、轮播 |
| 模式 pattern | 一类问题怎么解 | 搜索加自动补全、分页、空状态 |
| 风格 style | 上面这一切穿什么衣服 | 扁平、拟物、玻璃态、新粗野主义 |
- 同一个按钮（控件）在扁平风格下是一块纯色，在拟物风格下是一颗带高光的立体键——组件管结构，风格管外观，两层独立变化
- 组件库（component library）就是把这四层里的组件层标准化：Ant Design、Bootstrap 提供现成的 modal、tabs、toast，名字全行业通用
- 本手册主体在组件层（下一节速查表），模式与风格在后面单独两节
高频组件速查：导航与布局
最常出现在页面骨架上的组件：
| 英文真名 | 中文习惯名 | 一句话 |
|---|---|---|
| navbar / navigation | 导航栏 | 页面级入口的那一排链接 |
| sidebar | 侧边栏 | 主内容旁的竖向区域，常放次级导航 |
| breadcrumb | 面包屑 | 层级路径导航，告诉你「你在哪」，名字出自童话里撒面包屑找回头路 |
| tabs | 标签页 | 同屏切换几组内容，一次只亮一个 |
| pagination | 分页 | 把长列表切成带页码的几段 |
| carousel | 轮播 | 自动或手动横向翻动的一组图 |
高频组件速查：反馈与状态
系统怎么回应你的操作，也有一套固定词汇：
| 英文真名 | 中文习惯名 | 一句话 |
|---|---|---|
| toast | 吐司 | 几秒自动消失的操作回执，如「已保存」 |
| alert / banner | 警告条 | 常驻的提示横条，通常带颜色分级 |
| skeleton | 骨架屏 | 数据没到之前先铺的灰色占位块 |
| spinner / loader | 加载指示 | 转圈等待的那个圈 |
| badge | 角标 | 提示数字或状态的小标记，如未读数 3 |
| empty state | 空状态 | 列表为空时那页「这里还没有东西」的说明 |
其中 tooltip（工具提示）属于下一节——它常被和别的弹出物混为一谈。
「弹窗」辨析：modal、popover、tooltip、toast
四个最常被统称「弹窗」的词，行为各不相同。辨析它们是术语精确性的最好示范：
| 术语 | 挡住背后吗 | 出现在哪 | 怎么消失 |
|---|---|---|---|
| modal（模态框） | 挡住，必须先处理它 | 屏幕中央 | 点关闭、点遮罩或按 Esc |
| popover（弹出层） | 不挡 | 锚定在触发点旁边 | 点外部即收起 |
| tooltip（工具提示） | 不挡 | 紧贴鼠标指向处 | 移开鼠标即消失 |
| toast（吐司） | 不挡 | 屏幕一角 | 定时自动消失 |
- 挡住背后那一层灰色叫 scrim（遮罩），「点遮罩关闭」是 modal 的常用交互——你现在已经能说出这句话了
- 模态（modal）与非模态的分界就在「挡不挡」：模态强迫你先回应，非模态随你什么时候理
- 有意思的是，这些术语正在变成 HTML 标准符号：
<dialog>元素对应 modal，popover属性对应 popover——行业词汇与平台原生能力正在合流
模式与风格：组件的上面两层
模式(pattern) 是对一类问题的惯用解法，比单个组件大一级：
- 「搜索加自动补全」（autocomplete）：输入框加下拉建议的组合拳
- 「无限滚动」对「分页」：同样处理长列表，两种竞争模式，选哪个是产品决策
- 「空状态」：列表为空不是留白，而是配图文引导用户去创建第一条
**风格(style)**是同一套组件的不同穿法，也有正式名字：
- 扁平化（flat design）：去阴影去渐变，纯色块，2013 年前后随 iOS 7 风靡
- 拟物（skeuomorphism）：模仿现实材质，皮革质感、纸张纹理、立体按键
- 玻璃态（glassmorphism）：半透明磨砂玻璃效果，背后内容模糊透出
- 新粗野主义（neubrutalism）：粗黑边框、高饱和撞色、生硬投影
描述「你想要什么感觉」时，报风格名比形容词堆砌精确得多——「要玻璃态的卡片」一句话就够。
用术语指挥 AI
AI 编程时代（俗称 Vibe Coding，指用自然语言与 AI 协作写代码），术语直接决定来回几轮。对比同一次需求：
text
生活语言版：
「帮我做一个点按钮弹出来的那个框，要点旁边黑的地方能关掉，
里面放个表单，右上角来个叉」
术语版：
「加一个 modal dialog：点按钮打开，含表单；点 scrim 或按 Esc
关闭，右上角放 close button」术语版每个词都指向确定的组件与行为，AI 不用猜。资源一节里的视觉词典更进一步：每个词条都配好了现成的 Prompt 和调试提示（Debug Prompt，界面不对时给 AI 的纠错指令），直接复制即用。
工具与资源
- Learn UI Name（在线版）——namethatui.com 的中英双语复刻版（仓库），62 个组件词条加 44 种视觉风格，每个词条配可交互标本、正式名称、人话解释、可直接复制的 Prompt 与 Debug Prompt
- 乔木 UI 学习（Obsidian 插件）——集成 13,500+ 真实设计图库、双语 UI 词典和风格图鉴；选中一张设计，一键生成「复刻 Prompt」交给 AI
- Awesome Design MD——70 余份主流网站（Vercel、Linear、Stripe、Apple 等）的 DESIGN.md：一份纯文本设计规范放进项目，AI 照着它生成风格一致的界面。DESIGN.md 由 Google Stitch 提出，与 AGENTS.md 相对，一个管界面长什么样，一个管项目怎么建
- web-standards/dictionary——俄语社区维护的前端术语词典，示范了「术语要靠社区统一」这件事本身
- jaywcjlove/reference——通用开发速查表合集，前端参考也在其中
小结
- 界面术语四层：控件管输入、组件管界面块、模式管解法、风格管外观；同物不同层名字不同
- 高频组件记英文真名：导航类的 breadcrumb、tabs，反馈类的 toast、skeleton，展示类的 carousel、badge
- 「弹窗」不是一个词：modal 挡住、popover 锚定、tooltip 贴标、toast 自动消失
- 术语是与设计师、文档、AI 三方沟通的协议；报组件名加风格名，AI 一次到位