标注交付基础：什么是UI视觉稿标注、标注的目的与价值、常见交付物类型
UI视觉稿标注，是设计师与开发工程师之间最核心的“翻译语言”。它指的是在完成视觉设计稿后，设计师通过特定的符号、尺寸、颜色代码、间距数值和交互说明，将视觉稿中的非代码信息（如字体大小、颜色色值、组件状态、间距规则）转化为开发人员可以直接用于编码的精确数据。简单来说，标注就是给视觉稿“上尺寸、定颜色、写规则”的过程。它不仅是设计稿的附属说明，更是设计意图得以像素级还原的工程保障。本章将系统拆解标注的定义、核心价值以及交付物的常见类型，帮助学员建立标准化的标注交付认知框架。
2.1 标注的核心原理：从“视觉语言”到“工程语言”的转译
标注的本质是信息转译。设计师使用视觉语言（颜色、留白、字号、层级）表达美学与体验，而开发工程师使用代码语言（px、dp、sp、hex、state）实现功能与布局。两者之间存在天然的“语义鸿沟”。例如，设计师说“这个标题要醒目一点”，开发无法直接编码；但如果说“标题字号 28px，字重 Bold，颜色 #1A1A1A，行高 36px”，开发就能精准实现。标注就是填补这一鸿沟的桥梁。
在实际操作中，标注需要遵循“四维标注法”：尺寸维度（宽高、间距、内边距、外边距）、视觉维度（色值、字体、圆角、阴影、透明度）、状态维度（默认态、悬停态、点击态、禁用态、加载态）、资源维度（切图命名、倍率、格式、使用位置）。四个维度缺一不可，任何一个维度的缺失都可能导致开发返工。
2.2 标注的目的与价值：为什么不能“凭感觉”开发
标注的价值可以从四个层面来理解：沟通效率、还原精度、协作成本、规范沉淀。没有标注的交付，开发只能“猜”设计意图，轻则间距偏差几个像素，重则整个组件交互逻辑错误。根据行业统计，一个中型项目（50个页面）因标注缺失导致的沟通成本约占项目总开发时长的15%-20%。
| 价值维度 | 无标注交付（痛点） | 有标注交付（收益） |
|---|---|---|
| 沟通效率 | 反复确认尺寸、颜色、状态，每次约10-20分钟 | 开发直接读取数值，零确认，节省80%沟通时间 |
| 还原精度 | 视觉还原度仅70%-80%，细节偏差多 | 还原度可达95%以上，像素级对齐 |
| 协作成本 | 设计-开发互相扯皮，返工率高 | 责任边界清晰，返工率降低60% |
| 规范沉淀 | 每次项目从零开始，无积累 | 形成设计令牌（Design ），跨项目复用 |
以一个实际场景为例：某电商App首页改版，设计师交付了未标注的视觉稿。开发在实现“商品卡片”时，将图片与文字之间的间距设为12px，而设计师原稿为16px。开发认为“差不多”，设计师坚持“差很多”。双方各执一词，最终由产品经理介入协调，耗时30分钟确认，并额外花费20分钟修改代码。如果最初有标注，这个问题根本不会发生。
2.3 常见交付物类型：三类标准输出物
标准化的标注交付通常包含三类文件：开发标注图、切图资源包、设计规范文档。三者各有侧重，互为补充。开发标注图解决“怎么布局”的问题，切图资源包解决“用什么素材”的问题，设计规范文档解决“为什么这样设计”以及“异常情况怎么处理”的问题。
2.3.1 开发标注图（Redline / Specs）
开发标注图是最直观的交付物，通常以视觉稿为底图，在四周添加红色或蓝色的测量线、数值标签和说明文字。标注图需要覆盖以下关键信息：
- 布局尺寸：元素宽高、外边距、内边距、边框宽度、圆角半径。
- 字体规格：字号、字重、行高、字间距、字体颜色。
- 颜色规格：背景色、文字色、边框色、分割线色，使用HEX或RGBA格式。
- 状态说明：按钮的默认/悬停/按下/禁用状态，输入框的默认/聚焦/错误状态。
- 特殊说明：阴影的X/Y偏移、模糊半径、透明度；渐变的方向、起止色值。
2.3.2 切图资源包（Assets）
切图资源包是开发直接使用的图片素材。切图并非简单地把图层导出为PNG，而是需要遵循严格的规范：
- 倍率适配：iOS需要@1x、@2x、@3x三套图，Android需要mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五套图。现代开发中常用SVG矢量图或WebP格式以减少体积。
- 命名规范：采用“模块_组件_状态_尺寸”的格式，例如
home_btn_search_normal_24x24.png。命名必须全小写，用下划线分隔，避免中文和特殊字符。 - 格式选择：图标类优先SVG或PNG（透明背景），照片类用JPG或WebP，动图用GIF或APNG。
- 空心/实心：同一图标的不同状态（如普通/选中）需要分别导出，不能只导出一张让开发自己变色。
2.3.3 设计规范文档（Design Spec / Style Guide）
设计规范文档是面向整个项目团队的“宪法”，它定义了设计系统中的通用规则。对于没有单独设计系统团队的中小型项目，标注交付时至少应包含以下内容：
| 规范模块 | 包含内容 | 示例 |
|---|---|---|
| 色彩系统 | 主色、辅助色、功能色（成功/警告/错误）、中性色 | 主色 #2563EB，错误色 #DC2626 |
| 字体系统 | 标题/正文/辅助文字的字号、字重、行高 | H1: 28px/Bold/36px，Body: 14px/Regular/22px |
| 间距栅格 | 基础间距单位（4px/8px/12px/16px/24px） | 卡片内边距 16px，卡片间距 12px |
| 组件状态 | 按钮、输入框、列表项的各种状态样式 | 按钮禁用态：背景 #E2E8F0，文字 #94A3B8 |
| 异常边界 | 文字过长截断规则、图片加载失败占位图、网络错误提示 | 标题最多两行，超出省略号 |
2.4 实战场景拆解：一次完整的标注交付流程
我们以“登录页面”的标注交付为例，完整走一遍流程。假设项目背景：一款金融App的登录页改版，设计已完成，需要交付给两位开发（iOS和Android各一人）。
第一步：整理标注图。在Figma中打开登录页设计稿，使用标注插件（如Figmato或Measure）生成尺寸标注。重点标注：输入框高度（48px）、输入框左右内边距（16px）、输入框与上方Logo间距（40px）、登录按钮高度（48px）、按钮与输入框间距（24px）、页面左右安全边距（24px）。同时标注字体：输入框文字16px/Regular/#1A1A1A，按钮文字16px/Medium/#FFFFFF，提示文字12px/Regular/#6B7280。
第二步：导出切图。登录页需要切图的资源包括：Logo图标（SVG格式）、手机号输入框图标（默认态和聚焦态各一张PNG）、密码可见/隐藏切换图标（两张PNG）、登录按钮背景（使用代码绘制，无需切图）。命名如下：login_logo.svg、login_icon_phone_default.png、login_icon_phone_focus.png、login_icon_pwd_show.png、login_icon_pwd_hide.png。
第三步：编写规范文档。在文档中补充说明：输入框聚焦时的边框颜色变化（从#E5E7EB变为#2563EB），密码输入框的键盘类型（数字键盘），登录按钮在未输入手机号时的禁用状态（背景#E2E8F0，文字#94A3B8），以及加载中的转圈动画效果。
第四步：组织交付会议。用15分钟向开发团队过一遍标注图，重点说明异常状态和交互细节。会议中开发提出：密码可见切换图标在Android上需要不同尺寸，设计师当场确认并补充导出xxhdpi规格的图标。
复盘总结：本次交付中，由于提前准备了规范文档，开发在实现时没有询问任何颜色或间距问题。唯一一次返工是因为iOS开发误将输入框高度设为48pt（实际应为48px，在2x屏幕上为96pt），但通过标注图上的明确数值，10分钟内即完成修正。整个登录页开发周期从预估的2天缩短为1.5天，效率提升25%。
2.5 常见误区与总结复盘
在标注交付中，设计师常犯以下错误，需要特别警惕：
- 误区一：只标尺寸不标状态。很多标注图只写了静态尺寸，忽略了hover、点击、禁用等动态状态。开发只能自己猜测，导致交互效果与设计不符。
- 误区二：切图命名随意。使用“未命名-1.png”、“最终版2.png”这类命名，开发无法识别用途，只能逐个打开查看，严重降低效率。
- 误区三：忽略多倍图适配。只导出一套1x图，开发在Retina屏幕上会模糊，需要重新向设计师索要，打断开发节奏。
- 误区四：规范文档与标注图不一致。标注图上写的是16px间距，规范文档里写的是12px，开发无所适从。
- 误区五：不标注异常态。例如列表数据为空时显示什么、图片加载失败时显示什么、文字超长时如何截断。这些不标注，开发只能自行发挥。