A. 产品经理该不该画原型原型设计上谁负责
我作为10多年互联网行业的老鸟，从三个问题的回答来一次性解决你所有问题。
一、产品经理应不应该画原型？
题外话：作为产品经理，需要不断提升自己的能力，熟悉使用各类工具和在线设计平台，比如国外的软件Sketch、Axure、justinmind，以及国内的摹客在线产品设计协作平台。不管是交互还是技术甚至是UI审美方面，都要保持进步，这样才能应对更多的复杂急性事件。
B. 如何进行web页面原型图设计
最后半天心不在焉拖拖拽拽把各个部分都搭建好了，可是做出来的页面惨不忍睹，自己都没勇气打开。晚上回家后和邻居又讨论了三个小时，最后熬夜把原型图完成。虽然最后原型图也没有被采纳，但是这次原型图居然受到了表扬，领导说我的原型图有了提升。今天就写下这篇文章，为这段时间的工作做一个总结。原型设计前：①�0�2�0�2 重点突出内容：要清楚明了页面需要突出的内容是什么，这个在前期的讨论中一般就已经确定；②�0�2�0�2 第一功能目的：除了内容以外，功能方面需要突出的是什么？如引导注册或像下一级页面引导流量。③�0�2�0�2 如果是改版要考虑改版要解决的问题是什么？对于前一版页面存在什么问题 画原型图要考虑：④�0�2�0�2 内容板块如何划分，页面的内容主要分成几个模块，每个模块内存放的都应该是一些相近的内容；⑤�0�2�0�2 模块与模块之间的关联性：每个模块与其相近的模块之间应该有一些逻辑上的关联性，而不能随意的进行拼接；⑥�0�2�0�2 页面的流程：模块与模块的上下承接关系，模块与模块应该上下存在某些逻辑上的连接性。 页面完成后：完成原型图后一定要进行检查，主要从以下三个方面进行检查：⑦�0�2�0�2 内容是否完整：对比框架中的每一部分内容检查是否完整；⑧�0�2�0�2 第一屏是否把最重要的内容展现出来：页面第一屏以外的内容基本都是辅助内容，如果不能在第一屏就把内容全部展现，基本上就等于内容不完整；⑨�0�2�0�2 功能是否实现：想要表达的功能是否在明显的地方表现出来；⑩�0�2�0�2 流程是否顺畅：把相应的流程走一遍，看是否流畅。 注意tips：①�0�2�0�2 未完成的作品拿出来讨论页面不完整不代表思想不完整，即使是不完整的页面，里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有属于自己的清晰思路，对内容、功能和流程自己要先想明白，可以列举一些具体的问题来辅助理清自己的思路。③�0�2�0�2 坚持自己的想法每一个人都有自己的想法，只要你理清自己的思路，就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑，形成自己的思路。 关于工具和作图：之前花了很多时间去研究axure，是学会了一些作图的技巧，可是渐渐发现这些对页面的提高基本不大，我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法，等到想法成熟之后不妨慢慢的考虑工具的深入，太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓，前期的框架和流程思路想好后，后面的原型图也就水到渠成了。
C. 如何进行web页面原型图设计
最后半天心不在焉拖拖拽拽把各个部分都搭建好了，可是做出来的页面惨不忍睹，自己都没勇气打开。晚上回家后和邻居又讨论了三个小时，最后熬夜把原型图完成。虽然最后原型图也没有被采纳，但是这次原型图居然受到了表扬，领导说我的原型图有了提升。今天就写下这篇文章，为这段时间的工作做一个总结。原型设计前：①�0�2�0�2 重点突出内容：要清楚明了页面需要突出的内容是什么，这个在前期的讨论中一般就已经确定；②�0�2�0�2 第一功能目的：除了内容以外，功能方面需要突出的是什么？如引导注册或像下一级页面引导流量。③�0�2�0�2 如果是改版要考虑改版要解决的问题是什么？对于前一版页面存在什么问题 画原型图要考虑：④�0�2�0�2 内容板块如何划分，页面的内容主要分成几个模块，每个模块内存放的都应该是一些相近的内容；⑤�0�2�0�2 模块与模块之间的关联性：每个模块与其相近的模块之间应该有一些逻辑上的关联性，而不能随意的进行拼接；⑥�0�2�0�2 页面的流程：模块与模块的上下承接关系，模块与模块应该上下存在某些逻辑上的连接性。 页面完成后：完成原型图后一定要进行检查，主要从以下三个方面进行检查：⑦�0�2�0�2 内容是否完整：对比框架中的每一部分内容检查是否完整；⑧�0�2�0�2 第一屏是否把最重要的内容展现出来：页面第一屏以外的内容基本都是辅助内容，如果不能在第一屏就把内容全部展现，基本上就等于内容不完整；⑨�0�2�0�2 功能是否实现：想要表达的功能是否在明显的地方表现出来；⑩�0�2�0�2 流程是否顺畅：把相应的流程走一遍，看是否流畅。 注意tips：①�0�2�0�2 未完成的作品拿出来讨论页面不完整不代表思想不完整，即使是不完整的页面，里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有属于自己的清晰思路，对内容、功能和流程自己要先想明白，可以列举一些具体的问题来辅助理清自己的思路。③�0�2�0�2 坚持自己的想法每一个人都有自己的想法，只要你理清自己的思路，就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑，形成自己的思路。 关于工具和作图：之前花了很多时间去研究axure，是学会了一些作图的技巧，可是渐渐发现这些对页面的提高基本不大，我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法，等到想法成熟之后不妨慢慢的考虑工具的深入，太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓，前期的框架和流程思路想好后，后面的原型图也就水到渠成了。
D. 互联网产品经理画的原型和交互设计师画的原型有什么区别
我觉得产品经理画的更注重于功能的设计思路及创意，画出来的是具有根据意义的草图，而交互要做的是人机交互的体验，美工完了再根据视觉，产品调性进行视觉设计
E. 如何提高产品原型图的质量
1、AxureRP（RapidPrototyping）Axure（读音为Ack-Sure）无疑是目前最受关注的原型开发工具，其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型（流程、线框），并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。
Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。
然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得Axure能够生成十分接近于真实产品的原型。
另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。
但Axure仍然有一个让人头痛的问题：对于中文的支持不太友好。
在小部分元件上输入中午的时候，经常需要像碰运气似的反复切换输入法，破坏了咱们设计师的用户体验。
瑕不掩瑜，Axure仍然是交互设计师的首选原型工具。
2、MicrosoftOfficeVisioVisio在2000年被微软收购，并在2002年成为office2003套件中的一个组件，最新版本是2007。
Visio能够获得推荐的原因是因为Visio的适用性非常之广，从网站界面、数据库模型，到平面布置到工艺流程，Visio都提供了相应的元件库和模板来进行快速创建。
相较Axure而言，Visio更适合于传统行业的生产或流程设计，或者软件及互联网行业中的信息、数据和流程的说明，而不太适用于web界面。
因为其的基于web的元件库还是比较少，并且形式和结构也更类似于word中的形工具，因此在原型开发效率上都有所不足。
3、BalsamiqMockups这个基于AdobeAIRRuntime的工具实在是有让人眼前一亮的感觉，手绘风格的元件样式粗犷淋漓，能创建接近于纸上手绘的原型文件。
其提供了丰富的手绘风格的web常用元件，包括常用的html控件、以及一些组合控件，如多媒体控制器、标签页、列表、Iphone界面元件等。
Mockups最值得赞赏之处在于其提供的多数组件都可定制外观，对于中文的支持也不错（选择View>UseSystemFonts）。
4、MockflowMockflow和以上工具最大的不同在于Mockflow是一项基于AdobeFlex技术开发在线服务，提供了与BalsamiqMockups基本相似的功能，甚至更丰富的组件，虽然其元件定制化不够强大，但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。
有一个让爱不释手的功能是模板，可以设置基于任何页面的模板来进行新的页面设计。
与其他模板工具相比，mockflow有一个非常特色的功能，基于web的存储可以在任意电脑上联机打开，同时可以其他人进行快速的分享，并收集在线反馈意见，非常适合虚拟团队的原型设计交流。
虽然在线服务的基本帐号只能创建一个文件，但单个文件却没有限制页数，因此也基本上足够使用。
5、PencilsketchPencil是一款基于Firefox的扩展组件，安装之后即可在Firefox的工具菜单中打开Pencil的绘面板。
功能比较简单，仅能用以日常简单工作的辅助说明。
提供的默认元件都是基于软件工程，因此更适合用于windows桌面程序的简易界面搭建，或者是基本的页面功能说明，并不适用于严肃的原型开发，但好在体积小、又轻便，能够方便将网页中的元素直接拖到或者复制到当前的画布中，这也是Pencil安装在Firefox所带来的便利之一。
更多工具…在以上列举的原型开发工具都是较为常用的，也是在国内的交互设计师们比较常讨论的，但其实和Axure功能相似的软件还有很多，下面也就一些简单说明：
6、GUIDesignStudio这是一款真的非常强大的原型制作工具，没有在上面推荐的原因是因为还没有实际体验过，但冲着这工程级的界面设计就没有去尝试的冲动，但是从官方网站的截和视频演示来看，这款软件的操作模式和前面的原型工具大有不同。
Axure之类多是基于页面的原型设计，对于web网站尽管很实用，但是对于软件界面的流程设计却略显繁琐。
而GUIDesignStudio却另辟蹊径，直接以建立元素与元素之间的关联的方式来自动化的创建动作流程，而从视频演示来看，这样的确很大程度上提升了软件界面原型搭建的效率。
7、PrototypeComposerSerena公司免费提供的原型开发工具，功能确实强大，提供了基于项目管理主要流程的产出物文档模板、原型工具以及开发流程控制，这个软件的开发理念非常好，用这一款工具来满足项目开发流程中各个环节的沟通和决策。
但软件的学习和使用成本比较高，要了解其中的全部功能，貌似需要花不少时间。
另外软件的效率和稳定性还有待提高，试用的过程中多次出错及停止响应。
8、LucidSpec由Elegance科技推出的LucidSpec是一款很类似Pencil的原型工具，仅仅是提供了更多控件。
不过LucidSpec强调了生成干净的说明文档的功能，这可能是针对于多数原型工具的自动化生成规范的冗余而言的，不过老实说LucidSpec提供的原型界面太过简陋，并且生成的说明文档也未见优化有怎样的提升。
视频介绍
9、IriseProfessionalEditionIrise与其他原型工具相比其中一个特色在于提供了样本数据的功能，这是类似于excel表的一个样本数据库，可以通过界面元素直接获取样本数据库中的数据，这样所生成的原型甚至可以使动态数据更新的。
10、AdobeReaderAdobereader。
没错。
其实理论上任何可以创建形和文本的工具都可以用来原型开发，因为原型本身就是对于业务逻辑和功能界面的模拟或仿真，因此有何理由不能使用PDF格式。
BoxandArrow的这篇文章《PDFPrototype》提醒了，所有的原型工具都只是工具，而不是设计本身。
另外这里的也可参考一下但个人推荐：原型Axure7.0UIDesigner思维MindmanagerXmind流程Visio2013EDrawMax知识有道云笔记印象笔记时间TodolistWorktile形PhotoshopColorpix交互快现UIDesiger
F. 产品原型工具有哪些
产品原型工具有Pixso协同设计，PencilProject等，其中推荐选择Pixso协同设计，该工具不仅是一站式产品设计协作工具，更是一款专业的UI/UX设计工具。更多矢量网格、布尔运算、样式创建、智能排版等高阶功能，组件级自动布局，增加或删除内容都无需手动调整，智能排版，且自适应不同屏幕尺寸。使设计师真正专注于创造本身。
Pixso通过内网本地服务器部署，确保团队敏感数据和核心业务数据私有化，直接在原型基础上，快速邀请团队成员开启设计协作，自动生成切图标注，打开浏览器就能获取CSS、iOS、Android代码片段，还能根据团队配置，进行定制化功能开发，自定义管理权限，规避数据泄露风险。
想要了解更多关于产品原型工具的相关信息，推荐选择Pixso协同设计。该工具无缝衔接以往工作，支持Sketch、XD、SVG等文件导入导出，自由进行Sketch的文件格式转换。并且，文件自动保存到云端，一键回溯到任意历史版本，再也不用担心文件丢失。素材库集成众多大厂优秀的设计系统，所有UI设计师均可直接拖拽复用，从此省去大量模块化设计环节的重复劳动。
G. 产品经理画原型图哪些工具好用，求推荐～
对于产品经理来说，一个好用的设计（画）原型图工具是一个桥梁。它既能把自己的构思体现，又是与开发小哥哥的“交流”。
下面我来分享一些大众款的原型图设计工具，可以根据自己的需求来选择。
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组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。
H. 推荐下几款web原型设计工具，介绍下其各自的优缺点.
我们公司目前在用的是Axure RP Pro 6.5，这应该也是主流吧；我是测试人员，原型不是我设计，所以不好说优缺点
I. axure做web产品原型设计和javaweb有什么联系，可以直接用原型做吗
axure做web产品原型设计和javaweb可以说没有任何联系。
axure做出来的是html，也就是系统设计的一个初步页面模型。然后系统设计师根据这个模型来进行系统设计，美工也根据模型来做图片，程序员也还是根据模型来进行开发。也就是说，这个模型是一个基本中心，跟实现的编程语言没有关系，可以用javaweb、php、.NET等语言来实现这个模型。
而javaweb，只是一种编程语言应用。
J. 想问问有没有一种产品经理 是直接先让ui出设计稿 自己再照着设计稿出原型的
那么问题来了：为什么许多垂涎产品岗位的人，会第一个注意到界面的美丑呢？原因很简单：因为人类都是视觉动物，这是学习成本最低，且不需要深入了解其他东西就能说出个一二三的技能。既然刚入行，就要画图的命运改变不了，那么我们就要想着如何把他画出来，并且画好。
接到需求后，如何将他变成原型图？
这是很实际的问题。比较“笨”的人（其实在说自己）。在听到一个需求后就会立即画图，不知道有多少菜鸟会这样，可能聪明的人会更多吧。
为什么说这样做很笨？因为大部分情况下，你“听”到的需求都不是详细的具体的可执行的。在从产品经理或总监那边获得需求之后，以为自己理解了就开始动手画了，往往画好之后会推翻的可能性很高。不知道你是不是这样，我将这样的行为，称为“臆想”。
反思一下，站在需求或业务方，对于有价值的信息你收集了吗？你有跟需求方深入谈论这个需求了吗？真正了解他想要做什么？他想要达到什么效果？什么功能？哪些是他能想出来的规则、流程、逻辑？
收集完了信息，整理一下思绪，思考一下，他这样做合理吗？不合理的部分，你能想到更好的解决方案吗？如果有，你又该如何有理有据的说服别人？那么，整理好自己的思路，再去和需求方碰，直到敲定结果。
当你将需求基本明确后，请召集项目干系人，一起坐下来聊一聊？聊什么？一是告知干系人我们要做这样一件事情了？二是让各个职能的人了解一下具体的需求，是否可执行？
因为每个人站在的角度不同，所处的观察点就会不同，这时候不妨听取一下大家的意见，适当修改需求。但切记：可以砍的往往是边边角角不妨碍主流程的东西；有些产品喜欢紧握用户体验的金牌，这样做有时候会适得其反。如果产品在初期时，体验可以退居其次，让功能跑通才是重点。
这种算需求评审会吧，是种考验情商的东西。你需要说服大家，如果某个点需要调整，不会提高开发成本，那么你可以坚持一下；前提是你需要有站的住脚的理由。如果反之，就大度的放弃吧。
如果这一切的很顺利，需求、流程、规则都确定下来后，就开始动脑思考原型了。看过许多交互书，会做焦点小组，访谈，调查，可用性测试等等，说实话，不知道你们公司有吗？反正我这里没有。。
那怎么办？那就划船不用桨喽~业务流程、操作流程、功能模块都搞出来，再画图，画图的话，我会先看很多同类或有类似功能的产品，看看这样的形式是否适合用到我们的产品上，能否进行改良或是有无改进的空间。
接下来思考什么呢？简单的说就是，你的产品核心是什么？这样设计有没有突出你要突出的东西，有没有让用户的使用效率提升，用起来很“友好”。这些交互的文章，有很多，大家肯定平时也没少看啦。
要不要画高保真的原型图？
这个问题靠实践才真正获得真理，不过各个公司的状态可能有不同。
原型图是干嘛的？原型图是一种表达你想法的工具，它让你的想法图像化。那图像化给谁看？这个就决定了原型图是否要高保真。给投资人，需要。给技术，不是特别需求。给UI，你需要，尤其是经验不足的UI。给什么人看，决定了你要达到什么目的，有时候原型图只需要表述清楚，有时候原型图，需要传达给你下游你想表达的东西，哪里是重点，突出什么，想要如何引导用户使用和查看等等，这时候就要高保真起来。
再说一个类似的东西就是PRD，PRD是干嘛的，就是一种评判产品的标准，他不是特别能推进产品进度的东西，却是一种呈堂证供和历史存档，有时候我会将PRD与图形化的界面合并起来一起提交给下游。
不过如果我说以上都是扯淡呢，很多情况下高保真低保真PRD都冇用，最后都要靠嘴与勤快的双腿，文档什么的都不管事，多沟通，来避免信息上的不对称。
那么如何让原型看起来高保真起来？
见过有的画原型真是厉害，跟真的APP一样，我比较推崇一半一半吧。有些美观度，但一些特效交互我就偷懒了；这些就用嘴，网上的案例或是文字描述吧。
第一次画原型的时候，画的奇丑无比，这里就不贴出来吓人了。总结起来，如果想要提高你的画原型图水准，下面给几你几个方法，真的只是方法论，更多的还需要你不断的练习。
比例
布局
大小
关联
颜色
先说比例，无论是网络还是现实生活中，我们看起来很和谐的东西都是比例很好的东西，在做原型图的时候也是一样。如果你画的尺寸与真实网页相差无几的话，对一般的观者来说就有很好的效果；而且对于你的下游UI，也能在很快的时间，了解你的意图，不需要在为你调整比例。我只做过两次网页版的设计，经验寥寥，不过我在画WEB端的时候，会先确定整体页面的宽度是1200PX，还是1000PX；确定宽度后登录/注册的状态栏的高度，导航的高度等等；比例这东西渗透到整个原型制作的每个细节。
最后是颜色，颜色一样可以达到突出重点的目的，但是控制颜色也是件技术活儿， 控制不当就会“花”。比如上图，本来设计的时候在“服务地址”的地方，我是突出了“更改”；但是在与技术和接口方沟通后发现更改城市会改变价格，那么就给用户一些提示吧~突出一下，尽量弱化更改，避免用户做这个操作，所以我就用颜色来加重了提示。
基本上按照上面的思路去思考，就能画出能看到的过去的原型图了。但是经过UI的加工后，你才会发现：原型图果然还是原型图。人就是这样不容易满足，而且我们也确实不应该满足，当一个画图人。
那么该如何慢慢摆脱“画图人”的头衔
我很喜欢一个理论叫“用户体验五要素”；这个方法论很厉害，能让你在任何问答与思考中保持一个逻辑思路清晰的状态。
他包括以下五个层次：
战略层
网站的范围基本上是由网站的战略层（strategy）所决定的。这些战略不仅仅包括了经营者想从网站得到什么，还包括了用户想从网站得到什么。就我们的网上书店的例子而言，一些战略目标是显而易见的：用户想要买书，我们想要卖出它们。另一些目标可能并不是那么容易说清楚的。
范围层
结构层确定网站各种特性和功能的最合适的组合方式，而这些特性和功能就构成了网站的范围层（scope）。有些卖书的网站提供了一个功能，使用户可以保存之前的邮寄地址，这样他们可以再次使用它。这个功能——或任何一个功能——是否应该成为网站的功能之一，就属于范围层要解决的问题。
结构层
与框架层相比更抽象的是结构层（structure），框架则是结构的具体表达方式。框架层确定了我们的结账页面上交互元素的位置；而结构层则用来设计用户如何到达某个页面，并且在他们做完事情之后能去什么地方。框架层定义了导航条上各项的排列方式，允许用户可以浏览书籍的不同类别；结构层则确定哪些类别应该出现在那里。
框架层
在表现层之下是网站的框架层（skeleton）：按钮、表格、照片和文本区域的位置。框架层用于优化设计布局，以达到这些元素的最大效果和效率——使你在需要的时候，能记得标识并找到购物车的按钮。
表现层
在表现层（surface），你看到的是一系列的网页，有图片和文字组成。一些图片是可以点击的，从而执行某种功能。例如把你带到购物车里去。一些图片就只是图片，比如一本书的封面或网站自己的标志。
当他人让你介绍产品时你可以这么思考；当你在思考一款新产品时你可以这么思考；当你在做产品规划时候请思考一下。等等等等。。真的很厉害，大家可以经常拿出来做做练习。其实产品经理在“产品”方面的造诣，就是不断的深入这几个要素！越是深入产品的功力越的强，有表入里，层层递进。