刚入门的产品经理画产品原型图，有哪些好用的工具，求安利

首选建议不要直接用Axure,推荐国内80%产品经理都在用的墨刀，是在线原型设计工具，很多模板都可以直接复用，分享便捷，易上手操作很简单。

一是Axure对于新入门产品经理而言，Axure功能确实很多，但是对于初级而言主要是能把梳理的产品功能逻辑结构，用快速上手的原型设计工具落地成产品原型图即可，主要是跟领导、同事沟通时候，预览设备限制，极不方便。

二是墨刀提供很多行业产品原型图模板，除了可以直接复用外，将自己设计的产品原型图与其做对比，进行反思优化学习，同时，墨刀还可以把产品原型图直接分享成项目链接或二维码，特别方便领导和同事预览，更方便沟通~

产品经理画原型图哪些工具好用，求推荐～

对于产品经理来说，一个好用的设计（画）原型图工具是一个桥梁。它既能把自己的构思体现，又是与开发小哥哥的“交流”。

下面我来分享一些大众款的原型图设计工具，可以根据自己的需求来选择。

1.Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。

2.墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比***。

3.Invision: 可以说目前是国外发展***的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更惊喜的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）

4.Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。

5.POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。

6.Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

ui和画原型图的区别

一、主体不同

1、UI：是指对软件的人机交互、操作逻辑、界面美观的整体设计。

2、原型图：是交互设计师与PD、PM、网站开发工程师沟通的***工具。

二、定位不同

1、UI：好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

2、原型图：设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。

三、作用不同

1、UI：在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

2、原型图：系统分析员，用来了解用户界面如何影响系统分析；设计员，用来了解用户界面如何施加影响及它对系统“内部”的要求。

参考资料来源：百度百科-UI设计

参考资料来源：百度百科-原型设计

产品设计 | 6种原型图的优缺点

互联网产品设计过程中，原型图的常用格式，我见过6种以上。

它们的优点和缺点，介绍如下：

可以在另一台电脑上，阅读和编辑Axure原型图；

在Axure预览模式下，可以在浏览器左侧显示网页的目录；

Axure软件有Mac版本和windows版本。

如果接收文件同事的电脑，没安装Axure，就打不开了；

在手机微信聊天窗口上，不能直接阅读Axure原型图；

Axure低版本，不能打开高版本的Axure文件。

可以在另一台Mac电脑上，阅读和编辑Sketch原型图；

Ui设计师，可以直接在Sketch里面，把原型图，做成高保真的Ui设计稿；

可以导出PDF格式的多页面PDF原型图。

只能在Mac电脑上，阅读和编辑。暂时没有windows版本的Sketch软件，不支持windows电脑编辑；

不能在手机微信聊天窗口上，直接阅读Sketch原型图；

Sketch低版本，不能打开高版本的Sketch文件。

可以在Mac或Windows电脑上，阅读和编辑PPT格式的原型图；

在手机微信App聊天窗口上，直接阅读PPT格式的原型图；

可以通过其它软件，将画好的原型图，导入PPT里面。

ppt页面的面积太小，不支持表达多个页面之间的跳转关系；页面的缩放，难以操作；

PPT里面的画图控件太少，画图工具隐藏的比较深，操作起来，不方便；

可以在任何电脑上，用浏览器打开，直接阅读Html原型图；

不能在手机微信聊天窗口上，直接阅读Html压缩包的原型图；

可以先用Axure设计原型图，然后导出Html网页格式。

不支持网页的再次编辑，不支持在浏览器左侧显示网页的目录；

邮件接收Html原型图的压缩包，需要解压，然后还需要在众多网页文件中，一个个点开查看；

页面之间的跳转关系，难以表达清楚。

可以在任何电脑上，阅读和编辑jpg图片格式的原型图；

邮件发送图片格式的原型图，文件可以很小；

可以在手机微信聊天窗口上，直接阅读jpg格式的原型图；

可以先用其它软件设计原型图，然后导出jpg图片格式。

在电脑上，图片格式，比较难操作：比如：调整到100%大小，并左右移动查看页面跳转关系；

在手机上，微信发送的时候，具有流程关系的一大张图片格式的原型图，会压缩，导致微信接收后不清晰。

可以通过其它软件，将画好的原型图，导出为PDF格式；

可以在Windows或Mac上阅读；支持软件：Adobe Reader，福昕pdf，Acrobat；

可以在智能手机上，阅读pdf格式的原型图；支持手机APP软件：WPS，Acrobat，甚至微信app的聊天窗口，直接发送，对方直接打开。

在电脑上，页面容易调整到100%大小，并且左右移动查看页面的跳转关系；

Mac电脑自带的预览pdf软件，可以合并多个pdf，旋转pdf的某一张内页；

电脑版的福昕pdf软件，可以给pdf内页添加标注文本，可以在多页面的pdf左侧添加目录链接。

如果需要重新编辑pdf里面的某一页，那么就要提取多页pdf文件中的某一页，待修改好之后，再合并到多页PDF文件里；

电脑阅读和手机阅读pdf，***是已经安装了专业的PDF阅读器。

APP产品设计的原型图，重在表达意思，只要意思传达到位了，那么格式可以不必在意。

原型图的格式，属于“道”，“法”，“器”，这3个层次中的“器”。

如果想在用户体验上，走的更远；那么就需要在“道”，“法”，这2个层次上，积累更多的项目经验，以及不同岗位的思维方式和沟通思路。

产品经理必备技能 | 如何画原型

产品经理当然要会画原型啦~

聊聊怎么画原型吧！

在画原型之前，更重要的事情，就是画 页面流程图 和 信息架构图 ！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。

页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。

为什么要画页面流程：

（1）是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本

（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。有了页面流程图，你可以设身处地想象用户在使用产品时的操作流程，发现其中可能出现的问题

（3）突出页面重点元素与逻辑关系，提升原型的设计效率。很多页面不是全新页面，而是在原有页面做一些修改，如果你知道页面流转顺序，那么会给你画原型减轻很多工作量

页面流程图包含：

（1）四方形：业务流程中的四方形部分，异常流程或弹层通常用菱形表示

（2）流向：主干流向和辅助流向

（3）重点元素：每个流程中，重点要体现和表达的内容是什么

画页面流程图的工具：

（1）Axure：画了页面流程图可以紧接着画原型

（2）ppt：方便讲解

需要注意的地方：

（1）回归业务流程，明确主线：页面流程一定来自于业务流程，一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好，页面流程就简单。

（2）明确页面中的重点元素：功能在页面中，有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点（按钮/链接/滑动...)。

（3）沟通与优化：首先要尽可能穷举涉及的页面，然后做减法，有些页面合并或删除。通过原型草图，优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。

页面流程图一般规则：

页面流程图例：

一个具体案例：

业务流程：

页面流程：

主要是分离出了普通用户的操作流程，加异常处理。

对于普通用户的关键页面和关键流向：

页面流程图：

（1）分离出5个页面，确定流程流向

（2）固定元素，例如在“1购物车”中，“提交订单”就是下游触发点，点击后流向下一个页面；在“2输入优惠码”中有关键元素“填写优惠码”，另外还有下游触发点“确认订单”...

（3）针对每个页面去画对应的原型图

信息架构图，以产品视角，看包含多少功能点。适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等。

信息架构图例1：

有了页面流程图或信息架构图，现在终于可以开始画原型啦。首先，什么是产品原型设计？

产品原型 ，俗称 线框图 ，大概就是草图的意思吧。它是产品落地的关键点，是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容，上传下达，上给老板，下给UI、UE同事。

产品从原型到上线的流程：

大公司的产品经理只需要做手绘和低保真的部分，小公司可能还要***交互设计...

案例：

好的原型有什么特点：

（1）整体：页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求

（2）独立页面：功能元素明确有序、位置关系清晰、不同状态变化清晰

（3）交互设计：清晰的交互逻辑、一致交互方式、界面统一

常用工具：

（1）纸笔：自己画画，快速学习和定位

（2）白板：多人讨论

（3）软件Axure/Sketch/墨刀：产出正式文档

案例：

（1）研究流程：业务流程-页面流程

（2）确定页面框架：大概确定页面布局和大的框架

（3）画原型：画模块，确定交互细节

注意事项：

（1）尽可能用真实比例、真实文案，使元素更真实，也避免在需求评审时被之一。尽可能真实模拟极端情况，并示例清楚。

（2）紧扣需求主体，不横生枝节。如果原型需要增加新功能，一定要是来源于需求，并且要考虑后端数据来源。

（3）不要上颜色！原型就用黑白灰，不要给UI、UE挖坑

（4）目录树清晰，阅读流畅

（5）保存修改记录，关键修改重新保存文件

画/改原型的时间尽量控制在20%工作时间之内，否则就要问问自己是不是哪里出问题了哦。

产品需求想明白了没？？？

产品流程理清楚了没？？？

手绘草图画了没？？？

手绘草图和Boss确认了没？？？

关于产品原型图和原型图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。