主题
04 设计术语
产品经理和设计师是最紧密的合作伙伴。懂设计术语，不是为了替代设计师，而是为了更好地与设计师协作、更准确地评估设计方案。
为什么 PM 要了解设计术语？
| 场景 | 如果你不懂设计术语... | 如果你懂... |
|---|---|---|
| 设计评审会上，设计师说「这个组件不符合 Design System 的规范」 | 你不知道什么是 Design System，无法参与讨论 | 你理解规范的意义，能帮助判断是否需要破例 |
| 设计师提出「需要做无障碍适配」 | 你觉得这是「锦上添花」可以砍掉 | 你知道无障碍设计是法规要求也是用户需求，支持优先级提升 |
| 设计走查时发现实现和设计稿不一致 | 你看不出差别，说「差不多就行」 | 你能指出具体的间距、颜色、字号问题，推动高质量还原 |
| 需要做多端适配（手机、平板、PC） | 你不了解响应式和自适应的区别，提不出合理需求 | 你能和设计师讨论适配策略，做出合理的取舍 |
术语详解
一、设计角色与分工
UI vs UX
| 对比项 | UI 设计 | UX 设计 |
|---|---|---|
| 英文全称 | User Interface (用户界面) | User Experience (用户体验) |
| 关注点 | 产品「长什么样」 | 产品「用起来怎么样」 |
| 核心工作 | 视觉设计：颜色、字体、图标、布局、动效 | 体验设计：用户流程、信息架构、交互逻辑、可用性 |
| 类比 | 房子的装修（好不好看） | 房子的户型设计（住着方不方便） |
| 输出物 | 高保真视觉稿、图标、插画 | 用户旅程图、线框图、可用性测试报告 |
| PM 关注点 | 视觉是否符合品牌调性、信息层级是否清晰 | 用户流程是否顺畅、痛点是否被解决 |
PM 为什么要理解这个区别？ 因为一个「好看」的产品不一定「好用」，反之亦然。PM 需要同时关注 UI 和 UX，确保产品既美观又易用。
交互设计
| 项目 | 内容 |
|---|---|
| 英文 | Interaction Design (IxD) |
| 是什么 | 设计用户与产品之间的「互动方式」：点击什么会发生什么、滑动的效果是什么、状态之间如何转换。关注的是动态的用户行为和系统响应。 |
| 核心内容 | 点击反馈、页面跳转逻辑、手势操作、加载状态、错误提示、空状态设计、动画过渡 |
| 实际举例 | 用户点击「收藏」按钮 → 按钮变色 + 爱心动画 + 底部弹出 Toast 提示「收藏成功」。这一连串的响应就是交互设计的范畴。 |
| PM 为什么要了解 | PM 在写 PRD 时需要描述交互逻辑（点击后发生什么、异常情况怎么处理），这就是在做交互设计。理解交互设计原则，你的 PRD 质量会更高。 |
视觉设计
| 项目 | 内容 |
|---|---|
| 英文 | Visual Design |
| 是什么 | 通过颜色、字体、间距、图标、图片等视觉元素来传达信息、建立品牌感和情感连接。是用户对产品的「第一印象」。 |
| 核心要素 | 配色方案、字体排版（Typography）、图标风格、插画风格、间距与留白、视觉层级 |
| PM 为什么要了解 | (1) 能参与设计方案的讨论和决策；(2) 能判断设计方案是否与产品定位匹配（比如金融产品应该稳重，社交产品可以活泼）；(3) 在没有设计师的情况下，能做出基本的排版判断。 |
二、设计系统与规范
设计系统 / Design System
| 项目 | 内容 |
|---|---|
| 是什么 | 一套完整的设计标准和组件库，包含颜色规范、字体规范、间距规范、组件（按钮、输入框、卡片等）及其使用规则。保证产品在不同页面、不同端上的一致性。 |
| 类比 | 乐高积木套装。每一块积木（组件）都是标准化的，可以自由组合，但整体风格统一。Design System 就是产品的「乐高积木套装」。 |
| 典型代表 | Google 的 Material Design、Apple 的 Human Interface Guidelines、Ant Design（蚂蚁金服） |
| PM 为什么要了解 | (1) 有 Design System 的团队做新功能更快（直接复用组件），PM 在评估排期时应考虑这一点；(2) 新功能如果「突破」了 Design System 的规范，需要谨慎评估；(3) PM 应该推动团队建立和维护 Design System。 |
Design System 的典型组成：
| 层级 | 包含内容 | 示例 |
|---|---|---|
| 设计原则 | 指导设计决策的核心理念 | 「简洁」「一致」「高效」 |
| 视觉基础 | 颜色、字体、图标、间距等基础规范 | 主色 #1890FF、正文字号 14px、间距 8px 倍数 |
| 组件库 | 可复用的 UI 组件 | 按钮、输入框、下拉菜单、弹窗、表格 |
| 模式/模板 | 常见页面布局和交互模式 | 列表页模板、详情页模板、表单页模板 |
| 使用指南 | 每个组件的使用规则和最佳实践 | 按钮何时用主色、何时用灰色、何时禁用 |
Design Token
| 项目 | 内容 |
|---|---|
| 是什么 | 设计系统中最小的视觉决策单元，以变量的形式定义颜色、字体、间距等设计属性。相当于设计系统的「原子」。 |
| 为什么有用 | 当需要修改品牌色时，只需要修改一个 Token 的值，所有使用这个 Token 的地方都会自动更新，而不是一个个页面去改。 |
| 实际举例 | 定义一个 Token color-primary = #1890FF。按钮背景色、链接颜色、选中态颜色都引用这个 Token。哪天品牌升级要换主色，只需要改 Token 值为 #722ED1，全站自动切换。 |
| PM 为什么要了解 | (1) 理解换肤/主题切换功能的实现原理（切换的就是 Token）；(2) 在与设计和开发沟通「全局颜色调整」时，知道技术上是通过 Token 实现的，工作量不一定很大。 |
Design Token 示例：
Token 名称 Token 值 使用场景
─────────────────────────────────────────────────────
color-primary #1890FF 主按钮、链接、强调色
color-primary-hover #40A9FF 主按钮悬停态
color-danger #FF4D4F 错误提示、删除按钮
color-text-primary #262626 正文文字
color-text-secondary #8C8C8C 辅助说明文字
color-bg-base #FFFFFF 页面背景
spacing-xs 4px 组件内部紧凑间距
spacing-sm 8px 组件内部常规间距
spacing-md 16px 组件之间间距
spacing-lg 24px 区块之间间距
font-size-body 14px 正文字号
font-size-heading 20px 标题字号
border-radius-base 4px 组件圆角设计规范
| 项目 | 内容 |
|---|---|
| 英文 | Design Guidelines / Design Specification |
| 是什么 | 一份规定产品视觉和交互标准的文档，定义了颜色、字体、间距、组件样式等的使用规则。比 Design System 更轻量，通常是 Design System 的文档化表达。 |
| PM 为什么要了解 | (1) 在设计走查时，设计规范是判断「实现是否正确」的依据；(2) 新人设计师或外包设计师入场时，需要按设计规范来出图；(3) PM 提需求时，应该了解现有规范，避免提出与规范冲突的需求。 |
组件化
| 项目 | 内容 |
|---|---|
| 英文 | Componentization |
| 是什么 | 将 UI 拆分为可复用的独立单元（组件），每个组件有明确的功能和样式。和写代码的「函数封装」类似——写一次，到处复用。 |
| 实际举例 | 电商 App 中的「商品卡片」组件：包含商品图片、标题、价格、购买按钮。首页、搜索结果页、收藏页都会使用同一个「商品卡片」组件，保证样式一致。 |
| PM 为什么要了解 | (1) 组件化意味着新功能可以复用已有组件，开发更快、一致性更好；(2) 如果你的需求需要一个「全新的组件」，设计和开发成本都会更高；(3) 讨论需求时可以直接用组件名称沟通，效率更高（「用标准的 Card 组件」）。 |
Auto Layout
| 项目 | 内容 |
|---|---|
| 是什么 | Figma 等设计工具中的自动布局功能。设置好规则后，当内容增减时，布局会自动调整。类似于前端的 Flexbox 布局。 |
| 实际举例 | 设计一个按钮组件，设置了 Auto Layout 后：文字变长时按钮自动变宽，文字变多时按钮自动变高，内边距始终保持一致。不需要手动调整。 |
| PM 为什么要了解 | (1) 使用了 Auto Layout 的设计稿更容易还原为代码，开发效率更高；(2) 如果设计师没有使用 Auto Layout，可以建议使用，减少设计和开发的沟通成本；(3) 理解 Auto Layout 有助于 PM 在画原型时做出更规范的布局。 |
三、适配与多端设计
响应式设计
| 项目 | 内容 |
|---|---|
| 英文 | Responsive Design |
| 是什么 | 同一套页面根据屏幕尺寸自动调整布局和排版。手机上显示一列，平板上显示两列，PC 上显示三列。用的是同一套代码。 |
| 核心技术 | 通过 CSS 媒体查询（Media Query）检测屏幕宽度，动态调整布局 |
| 适用场景 | Web 网站、H5 页面、需要兼容多端的场景 |
| 实际举例 | 打开一个电商网站，在 PC 上商品一行显示 4 个，缩小浏览器窗口后变成 2 个，再缩小到手机宽度变成 1 个。这就是响应式设计。 |
自适应设计
| 项目 | 内容 |
|---|---|
| 英文 | Adaptive Design |
| 是什么 | 针对不同设备/屏幕尺寸，分别设计不同的页面版本。服务器检测设备类型后，返回对应的页面。 |
| 与响应式的区别 | 响应式 = 一套代码，自动调整；自适应 = 多套代码/设计，按设备分发 |
| 适用场景 | App 内的不同端（手机版 App 和平板版 App 界面完全不同）、对体验要求极高的场景 |
响应式 vs 自适应对比：
| 对比项 | 响应式设计 | 自适应设计 |
|---|---|---|
| 设计稿数量 | 一套，包含断点变化 | 多套（手机版、平板版、PC 版） |
| 代码数量 | 一套代码 | 可能多套代码 |
| 开发成本 | 较低 | 较高 |
| 体验精细度 | 通用较好，但极端尺寸可能妥协 | 每个端都可以做到极致 |
| 维护成本 | 较低（改一处生效多端） | 较高（每端都要改） |
| 典型场景 | Web 网站、博客、文档 | 原生 App、平板专用版 |
PM 为什么要了解？ 做新产品时，PM 需要参与「做响应式还是做多端适配」的决策。这直接影响设计工作量、开发工作量和用户体验。
四、无障碍与包容性设计
无障碍设计 / Accessibility (a11y)
| 项目 | 内容 |
|---|---|
| 英文 | Accessibility（常缩写为 a11y，因为 a 和 y 之间有 11 个字母） |
| 是什么 | 确保产品对所有人可用，包括视觉障碍、听觉障碍、肢体障碍、认知障碍等用户群体。不只是「给残障人士用的」，也包括在极端环境下使用的正常人（如强光下看手机、嘈杂环境下看视频）。 |
| 核心要求 | (1) 文字和背景的色彩对比度达标（WCAG 标准至少 4.5:1）；(2) 图片有替代文字（alt text）供屏幕阅读器读取；(3) 可以纯键盘操作（不依赖鼠标）；(4) 视频有字幕；(5) 表单有清晰的标签和错误提示 |
| 为什么重要 | (1) 全球约 15% 的人口有某种形式的障碍，这是一个巨大的用户群体；(2) 许多国家和地区有法律要求（如美国 ADA、欧盟 EAA）；(3) Apple、Google 等平台都会审核无障碍合规；(4) 无障碍设计通常也能改善所有用户的体验。 |
| PM 为什么要了解 | (1) 在产品规划中要为无障碍设计预留时间和资源；(2) 了解基本的无障碍标准，在设计评审时能提出相关问题；(3) 国际化产品必须考虑无障碍合规，否则可能面临法律风险。 |
WCAG 色彩对比度标准参考：
| 级别 | 正文文字对比度 | 大号文字对比度 | 说明 |
|---|---|---|---|
| AA（推荐标准） | >= 4.5:1 | >= 3:1 | 大多数场景需要达到的标准 |
| AAA（最高标准） | >= 7:1 | >= 4.5:1 | 对视觉障碍用户最友好 |
五、设计协作
设计走查
| 项目 | 内容 |
|---|---|
| 英文 | Design QA / Design Review |
| 是什么 | 在开发完成后、正式上线前，设计师（有时 PM 也参与）逐一检查产品的实际效果是否与设计稿一致。发现不一致的地方，提出修改意见。 |
| 检查内容 | 颜色是否准确、间距是否正确、字体字号是否一致、图标是否对齐、动画效果是否流畅、各种状态（空状态、错误状态、加载状态）是否都实现了 |
| PM 为什么要了解 | (1) PM 通常是设计走查的组织者或参与者；(2) PM 需要在「完美还原」和「排期压力」之间做取舍——哪些差异必须修、哪些可以接受；(3) 建立设计走查的流程和标准，是保证产品质量的重要环节。 |
设计走查 Checklist 示例：
| 检查项 | 具体内容 | 优先级 |
|---|---|---|
| 颜色 | 主色、辅助色、背景色是否与设计稿一致 | P0 |
| 字体 | 字号、字重、行高、字色是否正确 | P0 |
| 间距 | 元素之间的间距是否符合规范（上下左右） | P1 |
| 图标 | 大小、颜色、对齐是否正确 | P1 |
| 对齐 | 文字、图片、按钮等是否对齐 | P1 |
| 状态 | 加载态、空态、错误态、禁用态是否实现 | P0 |
| 动画 | 过渡动画、加载动画是否流畅 | P2 |
| 多端 | 不同屏幕尺寸下的显示是否正常 | P1 |
标注 / 切图
| 项目 | 标注 (Annotation) | 切图 (Export / Slicing) |
|---|---|---|
| 是什么 | 在设计稿上标注尺寸、间距、颜色、字号等具体数值，供开发参考 | 将设计稿中的图片、图标等素材导出为开发可用的格式（PNG、SVG 等） |
| 类比 | 建筑施工图上标注的尺寸和材料 | 把施工图中的预制件加工出来 |
| 现状 | 现代设计工具（Figma、Sketch）可以自动生成标注，不需要手动标注 | Figma 等工具支持一键导出切图，设计师会设置好导出配置 |
| PM 为什么要了解 | (1) 如果开发问「这个间距是多少」，PM 应该知道去 Figma 查看标注；(2) 如果切图质量有问题（模糊、尺寸不对），PM 需要能识别并推动解决。 |
六、设计理念
情感化设计
| 项目 | 内容 |
|---|---|
| 英文 | Emotional Design |
| 是什么 | 通过设计让产品不仅「能用」「好用」，还能引发用户的情感共鸣（开心、惊喜、信任、安心等）。由唐纳德·诺曼（Donald Norman）在《情感化设计》一书中提出。 |
| 三个层次 | (1) 本能层：产品第一眼的美感（好看的界面）；(2) 行为层：使用过程中的愉悦感（流畅的交互）；(3) 反思层：使用后的满足感和认同感（品牌价值观） |
| 实际举例 | (1) 邮件发送成功后的纸飞机动画——让「发邮件」这个动作有了仪式感；(2) 支付宝年度账单——让冷冰冰的消费数据变成有温度的回忆；(3) 404 页面的趣味设计——把错误变成一个小惊喜。 |
| PM 为什么要了解 | 好的产品不只是功能完整，还要有情感温度。PM 可以在需求中提出情感化设计的建议（如成就系统、仪式感动画、个性化问候），提升用户的情感连接和品牌忠诚度。 |
信息架构
| 项目 | 内容 |
|---|---|
| 英文 | Information Architecture (IA) |
| 是什么 | 组织和结构化产品中的信息，让用户能高效地找到所需内容。包括导航结构、内容分类、标签体系、搜索策略等。 |
| 类比 | 图书馆的分类系统。书按照文学/科技/历史等分类，每个分类下有子分类，书脊上有索引标签。信息架构就是产品的「图书馆分类系统」。 |
| 核心产出 | 站点地图（Sitemap）、导航结构、分类体系、标签体系 |
| 实际举例 | 淘宝的商品分类：服装 > 男装 > 外套 > 羽绒服。这个层级结构就是信息架构的一部分。如果分类混乱（外套和羽绒服同级），用户就很难找到想要的商品。 |
| PM 为什么要了解 | 信息架构是 PM 的核心能力之一。做一个新产品或新功能模块时，首先要做的就是规划信息架构——有哪些内容、怎么分类、怎么导航、用户怎么找到他想要的东西。 |
术语关系总览
设计工作的层级关系：
战略层 信息架构 → 内容组织和导航结构
│
▼
框架层 Wireframe → 交互设计 → 页面布局和操作逻辑
│
▼
表现层 视觉设计 → UI 设计 → 颜色/字体/图标
│
▼
系统层 Design System → Design Token → 组件化
│
▼
适配层 响应式设计 / 自适应设计 / 无障碍设计
│
▼
交付层 Prototype → 设计走查 → 标注/切图PM 与设计师协作的实用技巧
| 场景 | 不好的做法 | 好的做法 |
|---|---|---|
| 提需求 | 「把按钮改成红色，字放大一点」（直接指定具体方案） | 「这个按钮用户不太注意到，能不能让它更醒目？」（描述问题，让设计师给方案） |
| 设计评审 | 「我觉得不好看」（主观感受，没有依据） | 「这个方案和我们的 Design System 不一致，而且目标用户以中老年为主，字号是不是偏小了？」（有理有据） |
| 设计走查 | 「差不多就行了」（放水） | 「这几个 P0 的差异需要修复，P2 的动画效果可以下个版本优化」（分优先级） |
| 方案分歧 | 「听我的，我是 PM」（拉权力） | 「我们各自的理由都有道理，不如做个 A/B Test 让数据说话？」（用数据解决分歧） |
| 排期紧张 | 「设计太慢了，不等了，开发直接做」（跳过设计） | 「能不能先给一个低保真方案开始开发？高保真方案后续补充细节。」（灵活协作） |
常见面试问题
UI 和 UX 有什么区别？PM 更应该关注哪个？
- UI 关注「好看」，UX 关注「好用」。PM 应该两者都关注，但如果必须取舍，优先 UX（好用比好看更重要，但最好的产品两者兼备）。
什么是 Design System？对产品开发有什么好处？
- 标准化的设计语言和组件库。好处：保持一致性、提高效率（复用组件）、降低沟通成本、方便新人上手。
如何判断一个设计方案的好坏？
- (1) 是否解决了用户问题（UX）；(2) 是否符合设计规范（一致性）；(3) 是否考虑了无障碍（包容性）；(4) 是否可实现（技术可行性）；(5) 是否有数据支撑（可以通过 A/B Test 验证）。
你遇到过和设计师意见不一致的情况吗？怎么解决的？
- 先确认分歧的本质（是目标不一致还是方案不一致），如果目标一致方案不同，可以通过用户测试或 A/B Test 来验证。
什么是无障碍设计？PM 需要关注到什么程度？
- 确保产品对所有用户可用。PM 至少要了解基本的无障碍标准（色彩对比度、键盘可操作性），在 PRD 中提出无障碍要求，在设计走查时检查无障碍合规。
小结
| 你想知道... | 看这个术语 |
|---|---|
| 界面好看和好用的区别 | UI vs UX |
| 用户怎么和产品互动 | 交互设计 |
| 产品的视觉风格 | 视觉设计 |
| 怎么保持设计一致性 | Design System、设计规范 |
| 怎么实现全局样式切换 | Design Token |
| 怎么适配不同屏幕 | 响应式设计、自适应设计 |
| 怎么让所有人都能用 | 无障碍设计 (a11y) |
| 怎么确保开发还原度 | 设计走查、标注/切图 |
| 怎么高效复用设计元素 | 组件化、Auto Layout |
| 怎么让产品有温度 | 情感化设计 |
| 怎么组织产品信息 | 信息架构 |
恭喜！ 你已经完成了第二章「核心概念与术语」的全部学习。现在你已经掌握了商业、产品、技术、设计四大领域的核心术语，可以在日常工作中与各方角色高效沟通了。
建议回到 模块概览 复习本章结构，然后前往第三章继续学习。