UI/UX 核心术语与概念速查表
目的：统一工程师、设计师与 Agent 的沟通词汇，消灭语义歧义。 涵盖人机交互（HCI）、界面视觉秩序、现代设计系统与无障碍合规的 20+ 个核心概念。
交互心理与人机认知
1. Affordance（可供性 / 示能）
- 定义：物理或数字对象与人之间存在的潜在行为可能性（由 J.J. Gibson 提出，Don Norman 引入人机交互领域）[S1]。
- 通俗解释：事物“看起来能做什么”。例如，物理世界中椅子的形状天然具备“可坐性”；屏幕上的输入框天然具备“可打字性”。
- 常见误区：可供性不是设计师添加的属性，而是对象与使用者之间的客观关系。
2. Signifier（示标）
- 定义：任何能够向用户明确传达操作意图、地点与方式的感知信号 [S1]。
- 通俗解释：可供性说明“能做什么”，示标则提示“在哪里做、怎么做”。例如：按钮上的微投影、蓝色高亮、或是推拉门上的“推/拉”文字铜牌。
- 反例：一个看起来像静态纯文本的纯色矩形，其实可以点击（缺少示标）；一个长得极像按钮的装饰横幅，点了毫无反应（虚假示标）。
3. Mental Model（心智模型）
- 定义：用户在头脑中根据过去的经验，对“某个系统应该如何运作”所形成的内部心理认知画像 [S1][S2]。
- 设计推论：界面的系统映像必须匹配用户的心智模型。当界面行为违反心智模型时，用户会感到沮丧并犯错（如购物车图标默认认知是结账，若点开弹出设置页面，则彻底摧毁心智）。
4. Mapping（映射）
- 定义：控制器（操作介质）与被控制对象（结果）之间的空间或逻辑对应关系 [S1]。
- 最佳范式：灶台上的四个旋钮如果排成直线，对应矩阵分布的四个炉头，这就是糟糕映射；如果旋钮同样以矩阵排布，这就是自然映射（Natural Mapping）。在 UI 中，音量滑块向上滑动音量增大，也是自然映射。
5. Gulf of Execution & Gulf of Evaluation（执行鸿沟与评估鸿沟）
- 执行鸿沟：用户想达成目标，但不知道该按哪个按钮、该走哪一步（“怎么做？”）[S1]。
- 评估鸿沟：用户执行了操作，但系统没有任何明确反馈，用户不知道刚才的操作到底成功了没有（“刚才发生了什么？”）[S1]。
- 设计任务：用直观的示标消除执行鸿沟，用及时的反馈消除评估鸿沟。
6. Information Scent（信息气味）
- 定义：源自信息觅食理论（Peter Pirolli & Stuart Card）。用户在浏览界面寻找目标信息时，根据链接文本、图标等视觉线索对“这条路径能否找到食物（目标）”所做出的直觉预测 [S3]。
- 设计推论：链接和按钮文案必须具体明确（如“查看详细报价表”优于“点击这里”）。当信息气味微弱或产生歧义时，用户会立即放弃当前路径。
视觉、排版与空间
7. Visual Hierarchy（视觉层级）
- 定义：通过大小、字重、颜色反差、间距与位置，引导用户眼球按设计预期的先后顺序获取信息的视觉组织体系。
- 合格标准：用户扫视界面的前 3 秒，能准确指出哪个是主标题、哪个是主要操作按钮、哪些是辅助元数据。
8. Negative Space / White Space（负空间 / 留白）
- 定义：界面元素周围未被占用的空白区域（不一定是白色，包含背景纯色或深色区域）。
- 设计本质：留白不是“被浪费的空间”，留白是界面的呼吸节奏与隔离线。足够的留白能直接降低认知负荷，提升内容可读性 [S4]。
9. Type Scale（字阶 / 字体比例尺）
- 定义：通过固定的数学比例（如 Major Third 1.25、Perfect Fourth 1.333）生成的一组和谐的字号阶梯序列。
- 常见工程字阶（单位 px）：
12 (Caption) -> 14 (Body) -> 16 (Lead/Subhead) -> 20 (H3) -> 24 (H2) -> 32 (H1)。页面中绝不应出现随机无规则的字号（如 13px, 17px, 21px）。
10. Measure & Leading（行长与行高）
- Measure（行长/行宽）：一行文本包含的字符数。中文单行理想行长为 30~45 个汉字（西文 45~75 个字符）。过长容易串行，过短频繁换行。
- Leading（行高 / line-height）：中文网页正文的推荐舒适行高为 1.7 ~ 1.8（遵循 W3C 中文排版需求 clreq）[S5]；标题字号大时行高应收紧至 1.2 ~ 1.3。
系统、工程与架构
11. Design Tokens（设计令牌 / 变量）
- 定义：将界面视觉属性（颜色、间距、字体、动效、圆角等）抽象并存储为跨平台、跨框架的最小原子键值对 [S6]。
- 三层架构：
- 全局 Token（Global Token）：
--blue-500: #3b82f6; - 语义 Token（Alias/Semantic Token）：
--color-primary: var(--blue-500); - 组件 Token（Component Token）：
--btn-primary-bg: var(--color-primary);
- 全局 Token（Global Token）：
12. Atomic Design（原子设计）
- 定义：Brad Frost 提出的设计系统构建方法论，将界面自底向上划分为五个层级：原子（Atoms）（按钮、输入框、颜色）→ 分子（Molecules）（搜索表单：输入框+按钮）→ 生物（Organisms）（导航顶栏、商品卡片）→ 模板（Templates）（页面线框骨架）→ 页面（Pages）（填充真实数据的最终实体）[S7]。
13. Safe Area（安全区）
- 定义：屏幕上保证内容不会被物理边框、设备圆角、前置摄像头挖孔（Notch / 灵动岛）或系统手势导航条遮挡的有效可见区域。
- Web 规范：使用 CSS 环境变量
env(safe-area-inset-top)、env(safe-area-inset-bottom)等进行动态避让。
可用性、合规与评估
14. A11y（Accessibility / 无障碍）
- 定义：确保所有人（包括视力受损、色盲、听力障碍、运动受限或使用屏幕阅读器的残障群体）都能平等访问和使用数字产品的设计与技术规范。A11y 是“Accessibility”首尾字母加中间 11 个字符的缩写。
15. Contrast Ratio（对比度）
- 定义：文本或图形与其直接背景之间的相对亮度比值（计算公式源自 CIE 相对亮度模型）。
- WCAG 2.2 AA 硬标准：
- 正文小文本（< 18pt / 24px）：≥ 4.5:1。
- 大文本（≥ 18pt 或 ≥ 14pt 粗体）：≥ 3:1。
- 非文本关键 UI 控件边界与图标：≥ 3:1 [S8]。
16. Dark Patterns（暗黑模式 / 欺骗性设计模式）
- 定义：经过刻意设计的用户界面，利用认知偏差诱导或迫使用户做出违背其初衷的决定（如订阅默认自动续费且取消按钮极难找到、虚假的“仅剩最后 1 件”倒计时）。
- 设计伦理：专业设计与合规走查中应坚决排斥并标记此类反模式。
信源合集
| 编号 | 来源 | 层级 | 出处 / URL | 取用日期 | 核心贡献 |
|---|---|---|---|---|---|
| [S1] | 《设计心理学 1：日常的设计》 | L4 权威著作 | Donald A. Norman (Basic Books) | 2026-09-10 | Affordance、Signifier、Mental Model、执行与评估鸿沟 |
| [S2] | The Elements of User Experience | L4 权威著作 | Jesse James Garrett | 2026-09-10 | 五层模型、用户心智与概念模型 |
| [S3] | Information Foraging Theory | L0 行业研究 | Peter Pirolli & Stuart Card (Xerox PARC) / NN/g | 2026-09-10 | Information Scent 概念起源与定义 |
| [S4] | Refactoring UI | L4 权威著作 | Adam Wathan & Steve Schoger | 2026-09-10 | 留白与间距尺度系统、视觉层级实践 |
| [S5] | Requirements for Chinese Text Layout (clreq) | L0 国际规范 | W3C (w3.org/TR/clreq/) | 2026-09-10 | 中文网页正文排版行高 1.7~1.8 与行宽建议 |
| [S6] | Design Tokens Community Group Format | L0 规范草案 | design-tokens.github.io/community-group/format/ | 2026-09-10 | 跨平台 Token 定义格式与三层架构 |
| [S7] | Atomic Design | L4 权威著作 | Brad Frost (atomicdesign.bradfrost.com) | 2026-09-10 | 原子设计方法论五层模型 |
| [S8] | WCAG 2.2 规范 | L0 国际标准 | w3.org/TR/WCAG22/ | 2026-09-10 | 4.5:1 / 3:1 对比度计算标准 |