从设计到开发，原型标注图全流程标准化

一、原型标注图是什么？

原型标注图（Annotated Prototype）是设计原型（Prototype）的详细说明书，通过图文结合的方式，将设计稿中的视觉样式、交互逻辑、适配规则等技术细节转化为开发可理解的标准化文档。
它如同“设计的工程蓝图”，是设计师与开发者之间的核心沟通桥梁，确保设计意图被精准还原。

二、原型标注图的核心组成

1. 视觉标注（UI Specs）

尺寸与间距：元素宽高（如按钮尺寸）、内外边距（如卡片间距）。
颜色与字体：色值（HEX/RGBA）、字体字号/字重（如标题H1-24px/加粗）。

图标与图片：图标尺寸、格式（SVG/PNG）、图片压缩规则。
示例：

[登录按钮]  
- 尺寸: 200x48px  
- 颜色: 正常态 #2F80ED / 悬停态 #1A66CC  
- 字体: 16px 常规 #FFFFFF

2. 交互标注（Interaction Notes）

状态规则：悬停、点击、禁用、加载、错误态样式变化。
动态反馈：动效参数（时长、缓动曲线）、数据加载规则（如骨架屏显示条件）。

触发逻辑：用户操作与系统响应的映射（如点击弹窗关闭按钮→弹窗消失）。
示例：

[搜索框-错误态]  
- 触发条件: 输入为空时点击搜索  
- 反馈样式: 边框变红（#FF3B30）+ 提示文案“请输入关键词”

3. 适配规则标注（Responsive Rules）

断点定义：不同屏幕尺寸下的布局变化（如移动端隐藏侧边栏）。
弹性布局：元素拉伸/收缩逻辑（如输入框宽度随容器100%变化）。

4. 组件化标注（Component Specs）

复用组件（如导航栏、表单）的独立标注，包括尺寸、状态、交互规则。
与设计系统（Design System）的关联（如组件库命名规则）。

三、原型标注图的分类

1. 低保真标注图（Lo-Fi Annotations）

适用阶段：需求确认初期、框架设计阶段。
标注重点：
- 页面布局优先级（如核心功能区域）。
- 基础交互逻辑（如跳转路径）。

2. 高保真标注图（Hi-Fi Annotations）

适用阶段：视觉设计完成后、开发启动前。
标注重点：
- 像素级视觉参数（色值、间距）。
- 复杂动效参数（如Lottie动画JSON文件）。
- 多端适配规则（如响应式断点）。

四、为什么需要原型标注图？

1. 对设计团队

减少沟通成本：避免开发者反复询问基础问题（如“这个按钮多大？”）。
设计自检工具：通过标注发现逻辑漏洞（如未定义错误态）。

2. 对开发团队

提升代码准确性：直接获取可量化的设计参数，减少猜测性编码。
加速开发流程：标注清晰的组件可直接复用，减少重复劳动。

3. 对产品团队

需求落地可控：通过标注验证设计是否完整覆盖需求文档。
降低返工风险：标注版本与需求变更同步更新，避免因理解偏差导致返工。

五、原型标注图 vs. 普通原型图

对比维度	普通原型图	原型标注图
核心目的	展示界面布局与流程	传递设计细节与开发规则
使用者	产品经理、客户、设计师	开发者、测试工程师
内容重点	视觉与交互演示	参数化标注（尺寸、颜色、逻辑）
工具依赖	Figma/Sketch/Quant-UX	Figma+标注插件/Zeplin/蓝湖