外观
单元一 · 导读：APP 设计要素与流程全景
设计要素与工作流程全景图
设计一个 APP，就是把"一段模糊的需求"加工成"一套能复用的设计系统"。产出不是一件成品，而是一整套可复制的产品——既有一件能上线的 APP，又有能照着它做出无数个界面、改了其中一处就全局生效的设计系统。
为什么先看全景图
拿到设计任务，最常见的感觉是一头雾水：需求很模糊——这 APP 到底要做什么？先画界面还是先想别的？怎么才算做好？从哪下手？所以先看全景图：它是一张总图，把"5 要素 × 8 环节"刻进脑子。这套流程只用 5 种要素（内容、结构、视觉、交互、系统），分 8 个环节推进，每环节解决一个问题、交出一份可验收的半成品。后面每个知识点，你都能在图上找到自己的位置，不迷路。
5 类设计要素
用朋友圈对号入座：
| 要素 | 回答的问题 | 具体内容 | 微信例子 |
|---|---|---|---|
| 内容 Content | 要传达什么？ | 文字、图片、数据、功能 | 一条朋友圈的文字 + 9 张图 |
| 结构 Structure | 怎么组织？ | 布局、网格、间距、信息层级 | 朋友圈卡片怎么排、几张图怎么排布 |
| 视觉 Visual | 什么气质？ | 色彩、字体、图形、图标 | 微信绿、克制配色、头像圆形 |
| 交互 Interaction | 怎么操作？ | 导航、状态、反馈、动效 | 点赞 / 评论怎么点、发送中的转圈 |
| 系统 System | 怎么复用？ | 组件、Token、规范 | 头像、气泡做成可复用组件 |
一个 APP 在"设计些什么"？答案浓缩成 5 类要素：内容（要传达什么）、结构（怎么组织）、视觉（什么气质）、交互（怎么操作）、系统（怎么复用）。看清这 5 类，你就知道设计不是"画个好看的界面"那么简单，而是从"放什么"一路管到"怎么重复用"。
"内容视频（内容+结构）体（体=视觉）交系统"——一个 APP 就是"放什么、怎么摆、长啥样、怎么按、怎么重复用"。
8 环节工作流程
8 环节全景表：
| # | 环节 | 核心要解决的问题 | 主要交付件 | 一句话评价标准（怎么算好） |
|---|---|---|---|---|
| ① | 理解需求 | 用户/业务到底要解决什么？ | 需求简报 | 痛点真实可感，范围边界清晰 |
| ② | 定义目标 | 怎么做算"成功"？边界在哪？ | 目标 + 指标 | 指标可量化，与业务目标挂钩 |
| ③ | 调研洞察 | 用户是谁？对手怎么做？ | 用户画像 / 旅程 / 竞品 | 有数据支撑，能指导每个决策 |
| ④ | 信息架构 | 内容怎么组织？用户怎么找？ | 结构图 / IA 图 | 用户 3 步内能找到目标 |
| ⑤ | 流程线框 | 用户从哪进到哪？每步做什么？ | 流程图 / 线框 | 主路径清晰，步骤最少 |
| ⑥ | 视觉设计 | 什么气质？好看又可用？ | 情绪板 / 高保真稿 | 层级清晰、对齐、间距一致 |
| ⑦ | 设计系统 | 怎么保证一致、可规模化？ | Tokens / 组件 / 规范 | 改一处全局生效，可复用 |
| ⑧ | 交付迭代 | 开发照着做吗？上线怎么改？ | 标注稿 / 复盘 | 开发零歧义，指标对得上 |
设计不是一步到位，而是分 8 个环节推进，每步解决一个问题、交一份交付件、用一句话判断好坏。从"理解需求"到"交付迭代"，前 5 环决定"画得对不对"，⑥ 视觉设计才真正动手画，⑦ 把它沉淀成系统，⑧ 交给开发并上线验证。
"需求目标调研，架构流程视觉，系统交付"——先想清楚"为什么做、做给谁、怎么组织、怎么走、长啥样、怎么复用、怎么上线"。
交付件与评价标准主线
8 个环节的每一环都交出一份"半成品"，而这份半成品好坏，用一句话就能判断。这条"交付件 → 评价标准"是全书验收主线：后面每个知识点都会回指这张表。它不是走形式，而是让"这步做得好不好"有客观判断，不靠感觉。
每环交付件 + 一句话验收：
| 交付件 | 一句话验收 |
|---|---|
| 需求简报 | 目标用户明确 · 痛点真实可感 · 范围边界清晰 · 成功指标可量化 |
| 项目目标 + 指标 | 指标可衡量可追踪 · 与业务目标挂钩 · 无需求膨胀 |
| 用户画像 Persona | 有真实数据支撑 · 具体可代入 · 能指导每个设计决策 |
| 用户旅程地图 | 覆盖完整体验 · 标出情绪起伏 · 暴露机会点 |
| 竞品分析 | 覆盖主要对手 · 有洞察非罗列 · 差异化明确 |
| 信息架构图 IA | 分类符合用户心智 · 层级不过深 · 用户 3 步内找到目标 |
| 用户流程图 | 覆盖核心任务 · 步骤最少化 · 考虑异常/中断路径 |
| 线框图 Wireframe | 结构清晰无视觉噪音 · 焦点明确 · 标注交互行为 |
| 情绪板 Moodboard | 气质方向明确 · 与品牌一致 · 有依据 |
| 高保真设计稿 | 对比度达标(WCAG AA) · 排版层级清晰 · 对齐 · 间距一致(8pt) · 状态齐全 · 图标/字体统一 |
| Design Tokens | 覆盖色/字体/间距/圆角/阴影 · 命名规范 · 有引用关系(非一次性值) |
| 组件库 | 状态齐全 · 可复用 · 有变体 |
| 设计规范文档 | 开发能照做 · 有示例 · 版本管理 |
| 标注设计稿 | 尺寸/间距/色彩标注完整 · 无歧义 · 开发能直接实现 |
| 上线复盘 | 指标对比目标 · 迭代优先级明确 |
上环节产出 = 下环节输入
用真实微信"发一条朋友圈"完整走一遍 8 环节，感受"从需求到设计系统"：
| 环节 | 微信做了什么（交付件） | 怎么验收 |
|---|---|---|
| ① 理解需求 | 需求简报：用户想"记录生活、分享给熟人看" | 痛点真实（记录 + 被关注） |
| ② 定义目标 | 目标：提高发布率、互动率 | 指标可量化（日活发布占比） |
| ③ 调研洞察 | 画像：熟人社交、怕生人围观；竞品：微博公开流 | 差异化：半封闭朋友圈 |
| ④ 信息架构 | IA：发现页 Tab 里的"朋友圈"入口 + 个人页"相册" | 用户 3 步内找到"发"按钮 |
| ⑤ 流程线框 | 线框：首页→发现→朋友圈→右上角相机→编辑→发布 | 主路径清晰，步骤最少 |
| ⑥ 视觉设计 | 高保真：卡片流、9 宫格图、点赞/评论条 | 对齐、间距一致、层级清晰 |
| ⑦ 设计系统 | Token + 组件：头像、气泡、按钮、9 宫格做成组件 | 改名/换色一处改全局生效 |
| ⑧ 交付迭代 | 标注给开发 + 上线看发布率数据 | 开发零歧义，指标对得上 |
全链路的发动机是接力：每一环节的输出，正是下一环节的输入——② 的"目标指标"是③"调研谁"的方向；④ 的"IA 图"是⑤"画出几条流程"的依据；⑤ 的"线框"是⑥"上什么色"的画布；⑥ 的"高保真稿"是⑦"抽哪些组件"的来源；⑦ 的"组件库"是⑧"交付给开发时他用什么"。只要一步的交付件不合格，后面每一步都在错误的基础上推进——这就是为什么评价标准要贯穿全程。
全链路接力链：需求简报 → 目标指标 → 画像/竞品 → IA图 → 流程图/线框 → 高保真稿 → Token/组件/规范 → 标注/复盘（①→②→③→④→⑤→⑥→⑦→⑧）。
深度
原理：为什么"全链路"比"马上画图"更重要？ 新手最常见的误区：接到需求就打开工具画界面。结果画得再漂亮，也是"没对准需求"的漂亮——用户不要、业务不认。全景图的价值在于先对准再动手：每一步都先问"这一步要解决什么问题、交什么、怎么算好"，再往下走。这样每一步都有验收，不会一路偏到最后一刻才发现方向错了。
边界：全景图不是"必须死守的顺序"。 8 环节是"理想主线"，现实会来回跳：
- ③ 调研发现没人要 → 回 ①/② 重新定义需求（回退是正常的）
- ⑤ 画流程发现架构太深 → 回 ④ 改 IA（相邻回退最便宜）
- ⑦ 组件化时发现拐角太多 → 回 ⑥ 统一视觉（越早回退越省）
所以全景图给你的不是"铁律"，而是方向感：知道自己在哪一步、下一步该做什么、出了问题往哪回退。
实例：体会"发朋友圈"走全链路。 微信"发朋友圈"不是一次性画个界面就完了，而是从它到底满足什么需求一路走到能复用的组件（完整逐环节表见节拍「上环节产出 = 下环节输入」）。你以后重建微信界面，也要走这条链路。类比：设计 = 工厂流水线，需求是原料，8 环节是工序，产出是"一件产品 + 一套设计系统"；回退 = 越早越省，发现方向不对越早回退成本越低，等交付后再返就亏大了。
误区
| 误解 | 正解 |
|---|---|
| 设计 = 画界面 | 不只是。画界面只是 ⑥ 视觉设计一步；前面的 ①~⑤（需求/目标/调研/架构/流程）决定它画得对不对。 |
| 设计系统 = 一堆组件 | 不只是。组件只是 ⑦ 的"零件层"；真正的系统是 Token + 命名 + 规范，让零件能拼、能改、能维护。 |
| 流程必须严格按 ①→⑧ 走 | 不一定。现实会回退；地图给你的是"知道在哪、往哪回"，不是死顺序。 |
| 做完了界面才算有交付件 | 不对。每一步都有交付件（简报/画像/IA/线框），界面只是其中一份。 |
| 评价标准是走形式 | 不对。它是全书验收主线，让"这步做得好不好"有客观判断，不靠感觉。 |
练习
即时题 Q：微信"发朋友圈"的 ⑥ 视觉设计环节，交出的"高保真稿"在 ⑦ 设计系统环节里，会被用来做什么？（提示：想一想头像、点赞按钮会被怎么处理）
模块题 Q：下图是微信"发朋友圈"的 8 环节简化链。请在其中任意相邻两步之间画一个箭头，并说明"上一环节的交付件，具体是下一环节的什么输入"。
①理解需求 → ②定义目标 → ③调研洞察 → ④信息架构 → ⑤流程线框 → ⑥视觉设计 → ⑦设计系统 → ⑧交付迭代（例如：⑤ 的"线框"是⑥ 的"画布"——没有线框，视觉设计不知道在哪上色。）
迷你案例：把"发朋友圈"做成设计系统的最小闭环 假设你要在 Penpot 里重建微信朋友圈，只做 ⑤→⑥→⑦ 三步看最小闭环：
- ⑤ 线框：先在页面上摆几个灰框（顶栏、头像、9 宫格、点赞评论条），不管颜色。
- ⑥ 上高保真：给灰框填上微信的绿、黑、灰、间距，得到一个能看的卡片。
- ⑦ 抽组件：把"头像"和"9 宫格图"抽成可复用组件，并在另一屏复用它们。
做完你会观察到：一旦 ⑥ 的高保真稿里"头像"做成了组件（⑦），后面所有用到头像的地方都自动一致、改一处全变。这就是"从需求到设计系统"在设计工具里最直观的一瞥。
答案 即时题：⑥ 的"高保真稿"是⑦"抽哪些组件"的来源——头像、点赞/评论条、9 宫格等会被抽成可复用组件，改一处全局生效。模块题：任意相邻两步均可，关键是说出"上一环节交付件 = 下一环节输入"，例如 ② 目标指标 → ③ 调研谁；④ IA 图 → ⑤ 画哪几条流程；⑤ 线框 → ⑥ 在哪上色；⑥ 高保真稿 → ⑦ 抽哪些组件；⑦ 组件库 → ⑧ 开发直接用。
素材
- 👉 打开交互演示：设计流程全景图 — 逐步点亮 5 要素 × 8 环节，看上一环节产出如何成为下一环节输入（流程地图 / 逐步动画：高亮该环节的"输入"与"输出"、展示微信小卡片、底部浮动一行"一句评价标准"）。
- 先把本知识点的全景图存成笔记图，后续每个知识点都回来对照定位。
- 在 Penpot 里打开微信朋友圈界面，数一数你能认出几种"要素"（内容/结构/视觉/交互/系统）。
- 后续每学一个知识点，回看它属于 8 环节中的哪一步、对应哪份交付件与评价标准。