vocabulary

设计术语词典

一本用于设计和 UI 工作的反向词典。目标是从模糊的概念描述找到准确且约定俗成的词语，并了解那些看似可以互换、实则不同的词语之间的区别。

这些术语来自 index.how/to/articulate：“设计师知道自己看到的是什么时会用到的词语。”

权威来源

术语和定义的权威列表与此文件放在一起：

vocabulary.md

务必从中查找准确的定义——这里的内容才是权威内容。 terms-index.md（也与此文件放在一起）按类别列出了所有术语名称，方便快速浏览，尤其适合尚不确定要找哪个词时使用。如果索引与 vocabulary.md 有任何不一致，以 vocabulary.md 为准。

使用方法

反向查找（主要用途——“……叫什么词？”）

1. 阅读用户对概念的不确切描述。
2. 浏览 terms-index.md 查找候选术语，并按类别缩小范围（描述通常会指向某个类别：字母之间的间距 → Typography，页面上的空白区域 → Layout，附着在元素上的标签 → Components）。
3. 打开 vocabulary.md 并阅读匹配的定义。
4. 回答时提供：术语、它的定义，以及——特别重要的是——定义中提到的对比术语，让用户了解两者的界限，而不只是记住术语。

正向查找（“X 是什么意思／我用得对吗？”）

在 vocabulary.md 中找到该术语，给出定义，并指出最容易与之混淆的术语，帮助用户确认自己用词是否准确。

辨析（“这是 badge 还是 tag？”）

查找两个术语的定义，并清楚说明区分规则。vocabulary.md 中的许多定义专门用于划清这些界限——引用其中的相关句子。

鼓励准确用词

审阅文案、规格说明、PR 描述或提交消息时，如果有准确术语，就用它替换含糊的表达（“字母之间的间距” → “tracking”；“扩大空白区域” → “增加 negative space”）。如果通俗表达更清楚，就不要强行使用行话——目标是准确，而非堆砌术语。

值得辨析的近义词

人们容易用错以下词语对中的其中一个。请求涉及其中某一对时，应主动说明两者的区别：

• Kerning vs Tracking — kerning 指两个特定字符之间的间距；tracking 指一段文本中均匀的字符间距。
• Badge vs Tag — badge 是附着在元素上、用于提供信息的标记；tag 则是独立存在、可选择或移除的标签。
• Tooltip vs Popover — tooltip 不能包含交互内容；popover 可以。
• Opacity vs Visibility — opacity 为零时仍占据空间并接收指针事件；visibility 为 hidden 时仍保留空间，但不再支持交互。
• Ease-in vs Ease-out — ease-out 用于元素进入屏幕；ease-in 用于元素离开屏幕。
• Modal vs Sheet vs Drawer — 会中断当前操作的覆盖层 vs 从侧边滑入的面板 vs 从底部向上拉出的面板。
• Voice vs Tone — voice 是恒定不变的个性；tone 会随情境变化。
• Chroma vs Saturation — chroma 是 OKLCH 中与感知准确度相符的 saturation 概念。
• WCAG vs APCA — WCAG 是已确立的对比度标准；APCA 是较新的模型，会考虑字体大小和字重。
• Variables vs Tokens — variables 是命名后的值；tokens 是设计决策，设计工具和代码都可以引用。

分类一览

使用这些分类，直接跳转到 terms-index.md 中对应的部分：

分类	涵盖内容
字体排印	文本的排版、间距和阅读方式
颜色	颜色的定义、混合和应用方式
图标	图标的绘制与平衡方式
布局	页面空间与结构的组织方式
交互	元素对输入的响应方式
动效	事物的移动与过渡方式
无障碍	界面如何服务所有人
信息架构	内容的组织与查找方式
文案	文字如何引导并让人安心
工具	设计的制作与分享方式
分析	设计决策的衡量方式
组件	界面的构建模块

示例

反向查询

用户：“两个特定字母之间、可以手动微调的小间距叫什么？”

阅读 vocabulary.md 中的 Typography 部分。回答：

这叫 字偶间距调整（kerning）——两个特定字符之间经过手动调整的间距。不要与 字距（tracking）混淆，后者是均匀应用于整个单词或文本块的字符间距。

辨析

用户：“这个小小的‘New’标签应该叫徽标还是标签？”

如果它附着在另一个元素上，且仅用于提供信息，那就是 徽标（badge）。 但只要它带有“New”这样的文字或状态，就开始表现得像 标签（tag）——独立存在， 有时还可以选择或移除——因此需要按标签的方式处理。两者并不是一回事。

评审中的准确用词

规范写道：“加些间距，避免行距太挤。”

这个术语是 行距（leading）——行与行之间的垂直间距。最好明确写出这个术语， 以免与 字距（tracking，即水平字符间距）或 间隔（gap，即 flex/grid 子项之间的间距）混淆。

指南

• 引用 vocabulary.md 中的定义，而不是改述——措辞是经过刻意斟酌的。
• 如果存在对应的对比术语，务必一并说明。这份词汇表的价值在于词语之间的界限，而不只在于词语本身。
• 遵循用户的地区设置，并使用 vocabulary.md 中的拼写方式（其中使用了“centre”等英式拼写）。
• 不要杜撰术语。如果没有合适的已列术语，就如实说明，并用通俗语言描述这个概念，而不是生造行话。