第2章 原型说明的受众分析

原型说明不是一份“写给所有人看的通用文档”——不同角色在阅读同一份原型说明时，关心的信息维度完全不同。如果忽略受众差异，往往导致UI设计师拿到缺少像素级规范的原型、前端开发找不到交互状态、后端开发抓不到数据字段、测试人员遗漏边界条件、项目经理无法评估进度。本章从真实业务场景出发，梳理五大核心受众的关注焦点及对应的说明表达策略。

2.1 五大受众关注点矩阵

2.2 UI设计师：像素级与状态级

UI设计师需要直接从原型说明中提取可落地的视觉规则，避免反复沟通“这个颜色到底用#还是色值”。重点关注以下信息：

• 组件状态枚举：默认态、悬停态、点击态、禁用态、加载态、空数据态等，每个状态必须给出截图或标注。
• 间距与尺寸：组件内边距、外边距、最小/最大宽度、圆角半径、字体行高。
• 层级与 z-index：模态框、弹窗、下拉菜单的层级关系。
• 多端适配：手机端、平板端、桌面端各自对应的布局差异。

2.3 前端开发：逻辑与动效

前端开发最怕“我以为”的隐藏逻辑。原型的交互说明需要明确：

• 状态流转：列表加载、刷新失败、重新尝试等流程的状态机。
• 动效参数：时长（ms）、缓动函数（ease-in, cubic-bezier）、位移距离。
• 响应式断点：768px、1024px、1440px等断点下的布局重组规则。
• 反馈与异常：接口超时、无权限、数据为空时的前端展示。

// 示例：动效参数配置（建议作为原型说明附件）
{
  "toast_show_duration": 3000,
  "toast_animation_duration": 300,
  "modal_overlay_opacity": 0.6,
  "collapse_duration": 400,
  "collapse_easing": "ease-out"
}

2.4 后端开发：数据契约

后端开发需要的是与前端协商好的“数据接口契约”。原型说明中应包含：

• 字段定义：每个输入项/展示项对应的字段名、类型、长度、是否必填。
• 请求与响应示例：POST/GET请求的完整JSON结构。
• 错误码映射：后端返回错误码时，前端如何展示（弹窗/提示条/字段高亮）。
• 权限校验逻辑：哪些页面需要登录、哪些操作需要特定角色。

// 请求示例（API：POST /api/order/create）
{
  "userId": 1001,
  "productId": "SKU-20240301",
  "quantity": 2,
  "couponCode": "SAVE10"
}

// 响应示例（成功）
{
  "code": 0,
  "message": "success",
  "data": {
    "orderId": "ORD-2024-0001",
    "status": "pending_payment",
    "totalAmount": 199.00
  }
}

2.5 测试人员：边界与异常

测试人员根据原型说明编写测试用例，必须覆盖：

• 输入边界：字符数上限、数值上下界、特殊字符、空值。
• 操作边界：连续点击、快速滑动、设备旋转、后台切回前台。
• 异常流程：网络超时、服务端500、权限不足、数据不存在。
• 兼容性清单：支持的最低iOS/Android版本、浏览器类型。

2.6 项目经理：版本与验收

项目经理关注的是“这个版本做完没有”。原型说明应提供：

• 版本范围清单：哪些页面/功能属于当前版本，哪些延期。
• 功能依赖图：哪个功能必须等后端接口就绪。
• 验收检查项：每个页面/流程通过/不通过的标准。
• 交付物模板：原型链接、标注文档、动效规范、接口文档等文件清单。

2.7 受众关系全景图

下方SVG图展示了原型说明作为信息枢纽与五大受众之间的核心关系，以及每个角色最关心的关键信息流向。

2.8 分角色检查清单

在每份原型说明定稿前，建议逐个角色检查是否已覆盖以下要点：

1. UI设计师：□ 色值表 □ 字号行高 □ 组件状态截图 □ 间距标注 □ 多端差异说明
2. 前端开发：□ 状态机图 □ 动效参数表 □ 断点规则 □ 空/错误态截图 □ 反馈文案
3. 后端开发：□ 接口字段表 □ 请求/响应示例 □ 错误码映射 □ 权限角色矩阵
4. 测试人员：□ 边界值清单 □ 异常流程列表 □ 文案对照表 □ 兼容性范围
5. 项目经理：□ 版本范围声明 □ 依赖关系 □ 验收标准 □ 交付物清单