vocabulary

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Vocabulary

设计词汇表

A reverse dictionary for design and UI work. The goal is to go from a fuzzy description of a concept to the precise, agreed-upon word — and to know the difference between words that look interchangeable but aren't.

These are the terms from

index.how/to/articulate

: "the words designers use when they know what they're looking at."

这是面向设计与UI工作的反向词典。目标是从模糊的概念描述，找到精准、通用的术语——并区分看似可互换但实际不同的词汇。

这些术语来自

index.how/to/articulate

：“设计师在明确所见内容时使用的词汇”。

Source of truth

权威来源

The authoritative list of terms and definitions is bundled next to this file:

vocabulary.md

Always pull the exact definition from there — it is the canonical content.

terms-index.md

(also next to this file) is a flat list of every term name grouped by category, for fast scanning when you don't yet know which word you're looking for. If the index and

vocabulary.md

ever disagree,

vocabulary.md

wins.

术语及定义的权威列表与本文件捆绑在一起：

vocabulary.md

请始终从该文件中提取准确定义——这是标准内容。

terms-index.md

（同样与本文件同目录）是按类别分组的所有术语名称的扁平列表，方便你在尚未确定要找哪个词汇时快速浏览。若索引与

vocabulary.md

出现不一致，以

vocabulary.md

为准。

How to use it

使用方法

Reverse lookup (the main job — "what's the word for…?")

Read the user's loose description of the concept.
Scan
```
terms-index.md
```
to find candidate terms, narrowing by category (the description usually points at one: spacing between letters → Typography, empty area on a page → Layout, a label attached to an element → Components).
Open
```
vocabulary.md
```
and read the matching definition(s).
Answer with: the term, its definition, and — critically — any contrasting term the definition names, so the user learns the boundary, not just the word.

Forward lookup ("what does X mean / am I using it right?")

Find the term in

vocabulary.md

, give the definition, and surface the nearest confusable term so the user can confirm they mean the right one.

Disambiguation ("is this a badge or a tag?")

Pull both definitions and state the distinguishing rule plainly. Many definitions in

vocabulary.md

are written specifically to draw these lines — quote that line.

Encouraging precise usage

When reviewing copy, specs, PR descriptions, or commit messages, swap vague phrasing for the exact term where one exists ("the spacing between the letters" → "tracking"; "make the empty space bigger" → "more negative space"). Don't force jargon where plain language is clearer — precision is the goal, not density.

反向查询（核心用途——“……的术语是什么？”）

阅读用户对概念的模糊描述。
浏览
```
terms-index.md
```
找到候选术语，按类别缩小范围（描述通常指向某一类别：字母间距 → Typography，页面空白区域 → Layout，附加在元素上的标签 → Components）。
打开
```
vocabulary.md
```
阅读匹配的定义。
回答内容应包含：术语名称、定义，以及关键的——定义中提及的对比术语，让用户不仅了解词汇，还能掌握其边界。

正向查询（“X是什么意思？我用对了吗？”）

在

vocabulary.md

中找到该术语，给出定义，并列出最易混淆的相近术语，帮助用户确认是否使用正确。

歧义消除（“这是Badge还是Tag？”）

提取两个术语的定义，清晰说明区分规则。

vocabulary.md

中的许多定义专门用于明确这些界限——可直接引用相关内容。

倡导精准表述

在审核文案、规格说明、PR描述或提交信息时，若存在精准术语，可用其替换模糊表述（例如“字母之间的间距” → “Tracking”；“增大空白区域” → “更多Negative Space”）。不要在平实语言更清晰的情况下强行使用行话——目标是精准，而非堆砌术语。

Near-synonyms worth disambiguating

需明确区分的易混淆同义词

These pairs are the ones people reach for the wrong half of. When a request touches one of them, name the distinction proactively:

Kerning vs Tracking — kerning is between two specific characters; tracking is uniform across a run of text.
Badge vs Tag — a badge is attached and informational; a tag is standalone, selectable, or removable.
Tooltip vs Popover — a tooltip can't hold interactive content; a popover can.
Opacity vs Visibility — opacity zero still occupies space and receives pointer events; visibility hidden keeps the space but removes interaction.
Ease-in vs Ease-out — ease-out for things entering the screen; ease-in for things leaving.
Modal vs Sheet vs Drawer — overlay that interrupts vs panel sliding from a side edge vs panel pulling up from the bottom.
Voice vs Tone — voice is the constant personality; tone shifts with the moment.
Chroma vs Saturation — chroma is the OKLCH, perceptually-accurate equivalent of saturation.
WCAG vs APCA — WCAG is the established contrast standard; APCA is the newer model that accounts for font size and weight.
Variables vs Tokens — variables are named values; tokens are design decisions both design tools and code can reference.

这些词汇对常被误用。当请求涉及其中一组时，应主动说明区别：

Kerning vs Tracking —— Kerning是两个特定字符之间的间距；Tracking是一段文本中统一应用的字符间距。
Badge vs Tag —— Badge是附加在其他元素上的信息标识；Tag是独立的、可选择或移除的标签。
Tooltip vs Popover —— Tooltip不能包含交互内容；Popover可以。
Opacity vs Visibility —— Opacity为0时仍占据空间并接收指针事件；Visibility设为hidden时保留空间但移除交互。
Ease-in vs Ease-out —— 元素进入屏幕时使用Ease-out；元素离开屏幕时使用Ease-in。
Modal vs Sheet vs Drawer —— Modal是中断操作的覆盖层；Sheet是从侧边滑入的面板；Drawer是从底部向上拉起的面板。
Voice vs Tone —— Voice是恒定的品牌人格；Tone会随场景变化。
Chroma vs Saturation —— Chroma是OKLCH色彩模型中感知更准确的饱和度等价指标。
WCAG vs APCA —— WCAG是已确立的对比度标准；APCA是考虑字体大小和权重的新型模型。
Variables vs Tokens —— Variables是命名值；Tokens是设计工具和代码均可引用的设计决策。

Categories at a glance

概览分类

Use these to jump straight to the right slice of

terms-index.md

Category	Covers
Typography	How text is set, spaced, and read
Color	How color is defined, mixed, and applied
Iconography	How icons are drawn and balanced
Layout	How space and structure organise a page
Interaction	How elements respond to input
Motion	How things move and transition
Accessibility	How interfaces work for everyone
Information Architecture	How content is structured and found
Copywriting	How words guide and reassure
Tools	How design is made and shared
Analysis	How design decisions are measured
Components	The building blocks of an interface

使用以下分类直接跳转到

terms-index.md

的对应部分：

分类	涵盖内容
Typography	文本的设置、间距与阅读方式
Color	色彩的定义、混合与应用
Iconography	图标的绘制与平衡
Layout	空间与结构如何组织页面
Interaction	元素如何响应用户输入
Motion	元素的移动与过渡方式
Accessibility	界面如何适配所有用户
Information Architecture	内容的结构与查找方式
Copywriting	文字如何引导与安抚用户
Tools	设计的制作与协作方式
Analysis	设计决策的衡量方式
Components	界面的构建模块

Examples

示例

Reverse lookup

User: "What do you call the little gap between two specific letters that you nudge by hand?"

Read Typography in

vocabulary.md

. Answer:

That's kerning — the space between two specific characters, adjusted manually. Don't confuse it with tracking, which is letter-spacing applied uniformly across a whole word or block.

Disambiguation

User: "Should this little 'New' label be a badge or a tag?"

If it's attached to another element and just informational, it's a badge. But the moment it carries a word like "New" or a status, it starts behaving like a tag — standalone, and sometimes selectable or removable — and needs that treatment instead. The two aren't the same thing.

Precise usage in review

Spec says: "add some space so the lines aren't too cramped."

The term is leading — the vertical space between lines. Worth naming it explicitly so it's not confused with tracking (horizontal letter-spacing) or gap (space between flex/grid children).

反向查询

用户：“手动调整两个特定字母之间的小间距，这个叫什么？”

查阅

vocabulary.md

中的Typography分类。回答：

这是 Kerning——两个特定字符之间的间距，需手动调整。不要将其与 Tracking 混淆，后者是应用于整个单词或文本块的统一字符间距。

歧义消除

用户：“这个‘New’小标签应该用Badge还是Tag？”

如果它附加在其他元素上仅用于展示信息，那它是 Badge。但一旦它带有“New”这类词汇或状态标识，就开始具备 Tag 的特性——独立存在，有时可选择或移除——此时需按Tag的规范处理。二者并非同一概念。

审核中的精准表述

规格说明：“增加一些间距，避免行间距过密。”

对应的术语是 Leading——行与行之间的垂直间距。明确命名该术语很有必要，以免与 Tracking（水平字符间距）或 Gap（Flex/Grid子元素之间的间距）混淆。

Guidelines

指南

Quote definitions from
```
vocabulary.md
```
rather than paraphrasing — the wording is deliberate.
Always surface the contrasting term when one exists. The value of this vocabulary is in the boundaries between words, not the words alone.
Match the user's locale and spelling in
```
vocabulary.md
```
(it uses British spellings like "centre").
Don't invent terms. If no listed term fits, say so and describe the concept plainly rather than coining jargon.

引用
```
vocabulary.md
```
中的定义，而非自行改写——措辞经过精心考量。
若存在对比术语，务必一并列出。该词汇体系的价值不仅在于词汇本身，更在于词汇之间的界限。
匹配
```
vocabulary.md
```
中的区域设置与拼写（使用英式拼写，例如“centre”）。
不要创造术语。若现有术语均不适用，应直接说明并清晰描述概念，而非编造行话。