外观
单元七 · 流程⑧ · 交付迭代
标注与交付
交付设计稿给开发，最怕一句话："跟你画的怎么不一样？"——因为你在设计稿里"看得见"的尺寸、间距、色值、圆角，开发在代码里看不见。标注就是把你看见的、用代码能认的精确值，一项项"说"给开发听。你不标注，开发就靠猜；你一标注，开发就照抄。
为什么做了标注才"一样"
自动布局、样式、圆角、阴影——这些信息你在设计稿里看得见，但开发在代码里看不见。你的气泡是 12px 圆角，不标他就不知道，只能猜个大概；标了 12px，他直接照抄值。这就是"交付 = 给开发一张施工图"：盖房子不能只给工人一张效果图——墙多厚、门多宽、漆什么颜色不标清楚，工人全靠猜，盖出来肯定不一样。设计交付同理：把尺寸、间距、颜色、圆角标清楚，开发才能原样实现。
交付的本质：不标靠猜，标了照抄。
标注什么：七类关键值
七类该标注的值：
| 要标注的 | 具体指什么 | 微信里的例子 |
|---|---|---|
| 尺寸 | 元素的宽、高、位置 | 头像 44×44、气泡宽 240 |
| 间距 | 元素之间的空隙、内边距 | 消息行距 16、气泡内边距 12 |
| 色彩（色值） | 每个颜色精确的十六进制值 | 微信绿 #07C160 |
| 字体 | 字族、字号、字重、行距 | 正文字 17px、标题 600 |
| 圆角 | 圆角的半径 | 气泡 12px、按钮 8px |
| 阴影 | 投影的方向、模糊、颜色 | 转发卡片投影 |
| 状态 | 正常/按压/禁用/未读等不同情形 | 按钮按下变深、未读红点 |
标注不是越细越好，而是标开发代码里看不见的关键值。一整套标注覆盖七类：尺寸（元素宽高位置）、间距（元素间空隙与内边距）、色彩（精确十六进制色值）、字体（字族字号字重行距）、圆角（圆角半径）、阴影（方向模糊颜色）、状态（正常/按压/禁用/未读等不同情形）。这些多数你已在知识点 12（样式）、13（Auto Layout）设过——标注不是重新做，而是把这些值"说出来"给开发看。
标注七类：尺寸、间距、色彩、字体、圆角、阴影、状态。
交付什么：完整交付四件套
微信首页一次完整交付的四件套：
| 交付物 | 具体内容 | 微信例子 |
|---|---|---|
| ① 设计稿 | 各屏画板分类整理 | 首页 / 聊天 / 发现 / 我的各一屏 |
| ② 标注 | 每个关键元素的尺寸、间距、色值、圆角、字号 | 头像 44×44、行距 16、气泡 12px |
| ③ 规范说明 | 状态、交互、边界用文字补 | 按钮按下变深、长文字省略号 |
| ④ 组件 / Tokens | 样式、组件、Token 引用 | 开发沿用 --space-md、--color-brand |
一次完整交付不是导出一张图，而是一整套：① 设计稿（你的画板各屏）；② 标注（每个关键元素的尺寸、间距、色值、圆角）；③ 规范说明（文字补状态、交互、边界——图里标不出的用文字写清）；④ 组件 / Tokens 引用（你建过的样式、组件、Token，开发直接沿用，而不是每个值重新抄一遍）。
完整交付 = 设计稿 + 标注 + 规范说明 + 组件/Tokens 引用。
标注规范：标什么、不标什么
标注 → Token 映射（衔接知识点 12、23）：
| 设计稿里的标注 | 对应的 Token | 开发代码里的用法 |
|---|---|---|
微信绿 #07C160 | color.brand | background: var(--color-brand) |
| 消息行距 16px | space.md | gap: var(--space-md) |
| 气泡圆角 12px | radius.md | border-radius: var(--radius-md) |
| 正文字 17px | font.body | font-size: var(--font-body) |
标注不是越细越好，要标"会变的"和"关键的"：① 标精确值不标约数——圆角写 12px 不写"差不多 12"，绿色写 #07C160 不写"微信那种绿"；② 标语义不标巧合——间距标 --space-md（16px）、字色标 --color-text，而不是写死一个偶然的数字，让开发知道"这是有体系的、跟着 Token 走"；③ 不标一眼看得出来的——标的是开发代码里看不见的精确值；④ 状态和边界用文字补——图里标不出的（按压变色、文字超长省略、空状态）写进规范说明。
标注的最高级形态是引用 Token 而非写死数值——改 Token 一处，所有用它的一起变：标注从"告诉开发写死"升级成"告诉开发归到哪"。
Penpot 开发模式 + 微信消息列表交付
把微信首页消息列表交付给开发，标注这些并告诉开发它对应代码里的什么（不懂 CSS 也没关系，只看"设计稿标注 → CSS"的映射）：
css
.msg-item { gap:16px; padding:12px 16px; border-radius:12px } /* 行距/内边距/圆角 */
.msg-nickname { font-size:17px; font-weight:600 } /* 正文字号/标题字重 */
.send-btn { background:#07C160 } /* 微信绿色值 */Penpot 专门为交付做了开发模式，不用手动一个个量：选中元素，在右侧面板切到开发模式（"代码/开发"标签），即可看到精确尺寸、坐标、圆角、填充色值（如 #07C160）；选中两个元素可看间距，点选文字可见字号、字重、行距。导出信息视图能把当前画板整理成一份开发可读的清单。组织交付稿时把画板分组整理——首页、聊天、发现、我的各成一屏，关键状态（正常/按压/未读）放一起，再配一段"规范说明"放画板旁，开发拿到的就是"一整套"，不是"一堆散的图层"。
你标 #07C160，开发就写 #07C160——你标得准，开发就写得准。验收标准一句话：交付完问"开发能不能不猜就做出来？"能，就交对了；要靠猜，就回去补标注。
深度
原理：为什么"标 Token"比"写死数值"高级？ 写死数值，每个用 #07C160 的地方都得单独改；标 Token，只改 color.brand 一处，所有引用一起变。标注因此从"告诉开发一个值"升级成"告诉开发归到哪"。这也是为什么本知识点放在流程⑧收尾、依赖前面的成果——样式系统（12）让色值有名字、Auto Layout（13）让间距有体系、组件让界面可复用。没有前面打好底，标注就会变成一堆乱码数字。
边界：标注是最后一步，不是最重一步。 它是"验收"而非"起点"——前提是前面每一步都做好了。没有体系时被迫一个个手抄数字，才需要靠标注救场；有体系时，标注只是把已有名字的属性"说出来"。
实例：微信首页完整交付自查清单（验收标准在最后一条）：
□ 1. 设计稿：各屏画板（首页/聊天/发现/我的）分类整理
□ 2. 标注：每个关键元素的尺寸、间距、色值、圆角、字号（开发模式可查）
□ 3. 规范说明：状态（按压变色/未读红点）、边界（长文字省略号/空状态）写成文字
□ 4. 组件/Tokens：样式、组件、Token 引用，开发沿用以代替手抄
□ 5. 自查：开发照着标注能"原样"做出界面，不靠猜误区
| 误解 | 正解 |
|---|---|
| 交付 = 导出一张图片给开发 | 只给图不给标注，开发靠猜，出来还是不一样；交付要带标注 + 规范 |
| 标注是开发的事，设计师不用管 | 设计师要确保交付稿可读——可读是设计师的职责 |
| 标注要标得越细越好 | 标关键的精确值（尺寸/色值/圆角/间距/字号），不标废话；状态和边界用文字补 |
| 开发照着我的图做，自然就对 | 开发看不到设计稿里的自动布局、样式、Token，你不标他就得猜 |
| 标注要一个个手动量、手动写 | Penpot 开发模式/导出信息视图自动给出尺寸/色值/圆角，不用手动量 |
练习
即时题 Q1：为什么开发照着你的设计稿做，出来的界面却"不一样"？
答案
因为交付稿没有标注。设计稿里的间距、色值、圆角、字号，开发在代码里看不见，你不标他就靠猜。即时题 Q2：一次完整的交付，应该包含哪四样东西？
答案
① 设计稿；② 标注（尺寸/间距/色值/圆角/字体）；③ 规范说明（状态、边界）；④ 组件/Tokens 引用。即时题 Q3：在 Penpot 里，怎么看一个元素的精确色值和圆角？
答案
选中元素，切到右侧面板的**开发模式**（代码/开发标签），即可看到尺寸、坐标、圆角、填充色值。即时题 Q4（边界题）：标注是"标得越细越好"吗？为什么？
答案
不是。要标**关键的精确值**（尺寸/色值/圆角/间距/字号），不标一眼看得出的废话；状态和边界用规范说明文字补。模块题 你要把微信首页的"发送"绿按钮交付给开发。请写出：① 这个按钮你要标注哪些关键值（提示：尺寸、圆角、色值、字号）；② 每个值对应代码里的什么写法；③ 除了按钮本身，你还应该在规范说明里补哪一句跟"按压"有关的话？
参考思路
① 标注：按钮宽高、圆角（如 8px）、背景色（微信绿 `#07C160`）、文字（白色 17px 600）。 ② 映射：`background: #07C160`、`border-radius: 8px`、`font-size: 17px; font-weight: 600`。 ③ 规范说明补："**按下时颜色变深（或加一层按压态）**"——这是图里标不出的交互状态，要用文字写清楚开发才知道做。迷你案例：把微信首页"交付"给开发 在 Penpot 里，把你之前搭的微信首页做一次完整交付自查：
- 选中首屏的"消息列表"，切到开发模式，记下每条消息的间距、圆角、字号。
- 选中"发送"绿按钮，记下它的色值（应是
#07C160）和圆角。 - 选中一个聊天气泡，记下它的圆角和内边距。
- 用导出信息视图，把当前画板整理成一份开发可读的清单。
- 写一段规范说明文字放在画板旁：状态（按压变色）、边界（长文字省略号、空聊天时显示"暂无消息"）。
- 检查：这些值是不是都来自你 12 建的样式、13 的 Auto Layout——没有体系，这里就得一个个抄乱数字。
- 自查验收：开发照着这份交付能不能不猜就做出来？ 能，交付成功。
做完你就懂了：标注不是麻烦事，是让设计"能落地"的验收动作。设计→开发的对接，靠这一张"施工图"完成。
素材
- Penpot 开发模式（Developer mode）：Penpot 官方文档的「开发/导出」章节，看如何查看元素尺寸、色值、间距，以及导出信息视图。
- Figma Dev Mode：Figma 的开发模式（同样的概念，界面稍不同），可对比着看"标注交给开发"的通用做法。
- 设计交付规范：搜索 "design handoff checklist"（Assets / Optimizely 的交付清单，讲完整的交付应包含哪些）。
- 概念解析：搜索 "design tokens"（作衔接，理解标注如何升级为 Token 映射，衔接知识点 23）。
- 工具联动：本知识点是流程⑧交付收尾，依赖知识点 12 样式系统（色值/字体有名字）和 13 Auto Layout（间距有体系）。前面打好底，交付的标注才是有体系的，而不是一堆乱码数字。