文章目录

从原型图到UI设计稿的交接,应在核心流程、内容层级和必要状态已经明确后开始。交接不是把一组线框图发给UI设计师,而是同步已确认的决策、未定问题、界面状态、业务规则和本轮不处理的范围。

如果需要先分清两类交付物的职责,请查看原型图和UI图的六维区别。本页只解决一个更具体的任务:已有原型如何交给UI设计并组织后续评审。

1. 交接准入条件:先确认哪些内容已稳定

检查项可交接标准未通过时的动作
核心任务入口、主路径和成功结果已确认回到原型层继续验证
内容层级标题、按钮、表单和列表有可靠样本先补关键真实内容
页面状态正常、空白、加载、错误和权限已列出建立状态清单并标记优先级
未决问题责任人和最晚确认时间明确不把假设隐藏在UI图中
本轮范围要设计、保留原型和暂不处理的页面均已标注先锁定范围再安排设计
交接前的原型图展示核心流程与页面关系

原型不必所有页面都达到同一精细度。已稳定的核心路径可以先进入UI设计,仍在快速变动的分支继续保持低保真。不确定是否应该提高细节时,可根据原型保真度的选择标准进行判断。

2. 产品侧需要交付什么

  • 任务说明:目标用户、触发场景、成功条件和业务价值。
  • 页面与流程:主路径、必要分支、返回逻辑和终止条件。
  • 真实内容:会影响布局的标题、按钮、字段、列表与提示文案。
  • 业务规则:输入校验、权限、排序、数据来源和异常处理。
  • 范围标记:已确认、待确认、仅示意和不在本轮内的页面。
原型交接文件标明交互、规则和页面状态

产品侧不应只交付一条“正常演示”链路。如果异常状态未确定,应明确记录为待决策项,不要由UI设计师根据单个页面推测。

3. UI设计师需要确认和补充什么

UI设计师收到原型后,应先检查内容是否足以支撑视觉决策,而不是立即进入页面精修。需要确认的包括内容优先级、品牌与设计系统、设备范围、响应式规则、可访问性需求和页面状态。

UI设计交接中的iOS组件与界面规范
UI设计交接中的HarmonyOS组件与界面规范

对于原型中没有明确的变动范围,UI设计师可以先制作一个代表性页面和一组核心组件,评审通过后再扩展到其他页面,避免在方向未确认前批量精修。

4. 用三轮评审完成从原型到UI的转换

  1. 交接评审:产品、UX/UI设计共同走查核心任务,标记遗漏的状态与未决问题。
  2. 方向评审:只审查代表性页面、信息层级和核心组件,确认视觉方向。
  3. 完整性评审:对照原型检查页面、分支、组件状态和设计规范,再进入研发交付。
通过代表性APP页面复核原型与UI设计一致性

每轮评审要预先说明要做的决定。交接评审不讨论阴影和色彩,方向评审不要被所有边缘页面拖慢,完整性评审则需要逐项回看交付清单。

5. 交付研发前的验收清单

验收对象检查标准
页面范围原型与UI图的页面数量、名称和版本对得上
主任务入口、操作、反馈和结果在两套交付物中一致
页面状态正常、加载、空白、错误、成功和权限均有定义
组件命名、状态、变体和使用边界与设计系统一致
真实内容关键文案与数据密度足以验证布局
未决项每个未决问题都有责任人、影响页面和截止时间

验收不是比较两套图的像素是否完全相同,而是确认流程决策、内容层级、状态和实现规则没有在转换过程中丢失。

6. 常见返工问题与处理方式

  • 真实文案放不下:先确认内容优先级,再调整布局,不要为了保留原型尺寸而随意删减关键信息。
  • 业务流程在UI阶段变更:先更新原型和变更说明,再标记受影响的UI页面。
  • 组件状态遗漏:用状态矩阵检查字段、按钮、弹窗、列表和导航,不只检查默认状态。
  • 两套文件版本不一致:为每轮评审保留版本名称和结论,避免只靠口头同步。

7. 用Pixso组织原型与UI交接

在Pixso中,团队可以通过原型设计与评审确认页面跳转、交互事件和任务路径,再在UI设计协作环节补齐组件、视觉规范与状态。评论应指向具体页面和版本,便于后续追溯。

在Pixso中组织原型流程、交互与团队评审
在Pixso中补齐UI组件、页面状态与视觉规范

准备开始实际项目时,可以进入Pixso建立一份可追溯的交接文件,先放入核心任务、状态清单和未决项,再开始UI精修。

交接时必须所有页面都定稿吗?

不必。核心路径可以先交接,但必须明确标出未定分支及其影响范围。

原型改了,UI图怎么同步?

先记录流程或规则变更,再建立受影响页面列表,由产品与UI设计共同确认是否需要重新评审。