原型图和UI图有什么区别？

原型图和UI图的核心区别是所承担的决策任务不同。原型图优先说明产品的页面结构、任务流程和交互规则，用来验证“能不能顺利完成任务”；UI图优先说明视觉层级、色彩字体、组件样式和界面状态，用来确认“界面应该如何呈现”。

两者不是互相替代的文件。完整流程通常是先用原型图稳定结构与交互，再将已确认的内容、状态和优先级交给UI设计。需要执行交接时，可继续查看从原型图到UI设计稿的交接检查清单。

1. 先看结论：原型图和UI图不是同一份交付物

“原型图就是低保真，UI图就是高保真”只是常见情况，不是严格定义。原型可以做到高保真以验证交互，UI图即使视觉完整，也不一定包含可点击的交互链路。

2. 原型图解决流程和交互问题

原型图把需求转化为可看、可走通的任务路径。它要说清页面从哪里进入、用户做什么、系统如何反馈，以及成功、失败、空状态和返回路径如何处理。

它的完成标准不是画面多精美，而是评审者能否在少量讲解下理解业务范围并完成核心任务。如果还在判断细节应做到什么程度，可以用低保真与高保真原型选择方法匹配当前决策目标。

3. UI图解决视觉与规范问题

UI图把已确认的内容结构转化为可实现的视觉界面。除了颜色、字体、图标和间距，它还应表达组件的默认、悬停、选中、禁用、加载和错误等状态。

UI图不应自行改变已确认的业务流程。当真实文案或组件尺寸暴露新问题时，团队需要把问题回传到原型或规则层，而不是只在单个页面上做视觉补丁。

4. 六个关键区别：不要只看画面精细度

1. 目标不同：原型图验证产品逻辑，UI图确认视觉呈现。
2. 阶段不同：原型更早介入，UI图在结构和核心内容较稳定后开始。
3. 信息密度不同：原型可使用有限样本，UI图需要更接近真实的文案和数据。
4. 交互表达不同：原型强调触发与路径，UI图强调反馈形式和界面状态。
5. 评审问题不同：原型评审问“流程是否成立”，UI评审问“内容是否清楚且一致”。
6. 交付用途不同：原型提供功能与交互依据，UI图提供视觉与组件实现依据。

5. 两者如何衔接：把决策依据交给下一环节

1. 在原型阶段锁定核心任务、页面顺序、分支和业务规则；
2. 用真实或可靠样本替换会影响布局的占位文案；
3. 列出正常、空白、加载、错误和权限状态；
4. UI设计根据内容层级与设计系统完成视觉方案；
5. 最后联合复核UI图是否遗漏原型中的交互和状态。

衔接的核心不是“把文件发给下一个人”，而是传递已确认的决策、未解决的风险与不在本轮范围内的内容。

6. 常见混用误区

• 用精美UI图代替原型验证：视觉完整不代表任务流程已经成立。
• 把高保真原型当成最终UI图：高保真只表示更接近真实体验，不自动意味着规范已完成。
• 只交付正常页面：开发还需要理解异常、加载、空状态和权限边界。
• 两套图各自修改：任何流程或视觉变更都应同步影响范围，否则交付物会互相矛盾。

7. 在Pixso中连接原型与UI设计

Pixso的在线原型设计功能可用于组织页面流程、交互事件和评审评论；确认结构后，再通过UI设计协作流程统一视觉组件和页面状态。

需要在同一文件中梳理原型和UI设计时，可以进入Pixso建立一条核心任务链路，先标明页面、状态和交互，再逐步补齐视觉规范。

原型图可以直接给开发吗？

可以作为功能和交互依据，但若需要还原最终视觉，还应提供UI图、组件状态和相关规范。

UI图必须等原型全部完成吗？

不必。已稳定的核心路径可以先开始UI设计，但需明确哪些分支仍在变动，避免误用。