原型图是产品从“idea”走向“落地”的第一步，也是产品经理最基础、最容易被低估的技能。
它不只是简单画几个页面，而是帮助团队统一产品结构、交互逻辑和用户流程的重要工具。本文章将系统讲清楚：原型图是什么、和UI图有什么区别、有哪些常用工具、流程及注意事项，让你一次性搞懂原型图！
原型图，简单来说，就是在产品正式进入UI设计和开发之前，用来展示产品页面结构、功能布局、操作流程和交互逻辑的设计草图。
按
保真度
划分，原型图可分成低保真原型和高保真原型：
最粗糙的那种，方块加文字，有时候是手绘草图，核心目的是快速验证页面结构和功能逻辑是否成立。这个阶段不需要好看，只需要让看的人理解"这个页面大概放哪些东西、用户从哪进来从哪出去"。
适用场景：需求还没想清楚、团队内部头脑风暴、快速出多个方案做横向对比。
接近最终视觉效果，有真实的颜色、图片、字体，交互细节完整。那它和设计图有什么区别呢？事实上，高保真原型仍然属于原型图，其高保真度的主要目的是为了提高项目的美观程度，更有利于项目宣讲、展示等目的。
而UI设计稿对于产品界面有着更加严格的规范与要求，其尺寸、布局都是像素级的，配色也需要精确到色值。因此绝大部分的高保真原型离UI设计稿还有着相当大的差距，也是不能直接投入前端开发的。
适用场景：对外演示（投资人、客户）、开发交付前的最终确认、需要精确还原设计意图。
指只展示功能界面或信息，不带或带有少量交互效果的原型。这一类原型比较适用于信息类产品或交互比较简单的产品原型。
指带有完善交互动效的原型图，此为最常见的类型。动态的交互效果，可以呈现出更逼真的产品效果，能够帮助团队成员更好地理解交互需求。并且，如果需要将原型图用于可用性测试，则动态交互是必不可少的。
指除了原型界面和交互外，还带有流程图等其他的文档内容。这一类原型图，是以原型为载体，将产品相关的所有内容进行整合，可以将信息传递的效率最大化。
虽说原型图的制作并不拘泥于形式，只要能够高效地进行表达和阐述皆可。但专业的设计工作肯定需要专业的工具来提供支持，而原型设计工具正是专门用于绘制原型图的。
选择一个适合自己的原型设计工具犹如选择作战时的武器，非常重要。这里为大家推荐几款主流的原型设计工具，供大家选择。
摹客3是新一代AI全能产品设计平台，集原型设计+ UI 设计 + 团队协作 + 开发交付于一体，产品经理用原型模式画原型图，设计师用 UI 模式画高保真设计稿，原型和UI数据原生互通、资源可直接复用。对需要跨角色深度协同的团队来说，是目前最值得考虑的一款产品设计工具。
摹客3最大的特色和创新是：支持原型设计和UI设计双模式，能让产品经理和UI设计师各自在最贴身、最熟悉的模式中工作，最大程度提升创造力和工作效率。
支持 AI 一键生成设计稿，输入需求描述直接出原型骨架；AI 设计检查自动发现对齐、间距、规范问题；图层树智能重整一键清理杂乱图层结构；一键汇总设计规范，省去重复的手动整理工作。
支持多人实时协同编辑、图钉评论、开发模式交付，开发可以直接在平台内取标注和切图，不需要额外的交付工具，减少跨工具流转带来的信息损耗。
提供私有部署版本，信创全栈适配，适合对数据安全有明确要求的中大型企业和 B 端团队。
Axure是较为老牌的原型设计工具。其最大的特点是交互功能相当全面，能够实现非常完善的交互效果。不过相对的，因功能复杂，Axure的学习成本及上手难度都比较高。如果你对原型项目的复杂度、完成度有较高的需求，它是一个不错的选择。
Axure的交互功能是其最突出的优势。不仅支持各项交互事件及命令，条件判断、变量、函数、中继器等相关功能，还能够帮助用户制作复杂精细的动态交互效果。不过这些高阶功能的上手难度都比较高，导致其使用频率较低，也提高了整个产品的学习成本。
Axure本身没有向用户提供多少预设组件，但其有不少自身用户制作各类组件、页面及项目进行分享或售卖，一定程度上也为用户提供了素材选择。
Axure编辑界面的各个界面模块都可以进行拖动，并放置在不同的位置，甚至将不常用的功能模块删除掉。通过相关的操作，可以个性化地自定工具界面。
Figma是一款在线的矢量设计工具，其在较强的UI设计能力的基础上，对也提供了原型工具所需的交互能力。整个工具的侧重点目前还是更偏向于视觉层一些，但如果你对界面设计有较高要求，或者熟悉矢量编辑，Figma也是一个可以考虑的选项。
Figma的矢量编辑功能及属性支持，能够帮助用户更精细地完成图层编辑、界面布局以及色彩搭配。并且在Figma中绘制图标、插图等元素也完全不在话下。
组件及其变体功能是Figma的一大特色。它可以帮助用户制作及管理设计项目中常用的组件，并通过多层嵌套、覆盖等操作来制作满足各类场景的变体，还可以通过变体来制作交互效果及动态组件。
Figma的全球用户与开发者为其官方社区共享了大量的插件及素材。插件可以满足用户的个性化需求，弥补工具本身的不足；而素材则为用户提供了大量的参考及复用的内容，方便用户更快速地完成设计工作。
有些PM画原型靠直觉，想到哪画到哪，结果评审时才发现漏了一半场景，改起来一团乱。按下面这个步骤，能让整个绘制更高效实用：
画这张原型是给谁看的？给开发评审、给用户测试、还是给老板汇报？受众不同，侧重点完全不同。
给开发看的原型要注重逻辑完整和边界场景；给用户测试的要注重主流程可点击；给老板汇报的要注重视觉效果和核心价值呈现。搞清楚这一点，才知道该花多少精力在哪。
在动手画页面之前，先把整个功能模块的页面层级和核心用户路径梳理出来。可以用思维导图或简单的树状结构表示。哪些是一级页面、哪些是弹窗、哪些是状态变化，先想清楚再画，比边画边想少走很多弯路。
从页面的主结构开始，先把导航、内容区、操作区这些大版块定位好，再逐步细化到每个模块里放什么内容。这个阶段不要纠结元素的样式，先把"放什么"和"放哪"确认清楚。
骨架完成后，加入页面跳转、弹窗触发、状态切换等交互逻辑。同时给关键元素加上注释，说明这个按钮点击后的业务逻辑、这个字段的校验规则、这个状态的触发条件。注释是原型图里最容易被偷懒跳过的一步，也是减少开发理解偏差最有效的一步。
原型不是画完就完了，要拉上设计师、开发、测试一起过一遍。评审的重点是逻辑是否完整、场景是否覆盖、边界情况有没有考虑到。评审后根据反馈迭代，直到大家对这张原型的理解一致为止。
很多 PM 花大量时间调原型里的颜色、字体、图标，这些工作本来应该由设计师来做。原型画得太精细，还会让设计师陷入"按图临摹"的被动状态，失去设计空间。
而且如果需求本身有问题，越精细的稿子越难推翻，团队改起来也越痛苦。低保真存在的意义就是用最低成本发现方向性问题。
一张只有图没有文字说明的原型，开发拿到后要么反复追问产品经理，要么直接按自己的理解实现，两种结果都不理想。每个涉及业务逻辑、异常状态、边界条件的地方，都应该有对应的文字注释。
原型评审会最常见的跑偏，是大家开始讨论颜色好不好看、按钮要不要换个位置。这些不是原型评审该解决的问题。评审会的主持人要把讨论拉回到"逻辑对不对、场景全不全、需求有没有理解偏差"这些核心问题上。
需求会变，原型也要跟着变。很多团队的原型在第一版评审后就再也没动过，后续需求迭代只在口头或文字里说，原型和实际开发的版本越差越远，最终变成一份没有参考价值的历史文档。
原型应该和需求文档一样，作为一份持续维护的活文档。
原型图画得好不好，最终体现在一件事上：团队所有人看完这张图，对同一个需求的理解是否一致。
对刚开始系统画原型的产品经理来说，建议先把流程跑通、注释写清楚。当然，更重要的还是自己上手制作，才能把对原型图的理解变成自己的储备，快快动手试试吧！
