A. axure怎么做web页面高保真
一般来说，axure的原型分成两种，低保真和高保真。低保真就是线框图，主要作用是给研发交付，做开发的参考，只要能能实现讲清楚页面的功能和逻辑就可以了，特点是高效、快速；而高真原型主要是在产品初期给公司领导、用户演示，除了要完成低保真的功能，对于原型的界面风格和交互都有要求，高保真的原型特点是效果好、更接近真实的产品，但是开发起来很费事件。这两种原型适用与不同的需求场景。
对于高保真来说，主要要实现以下几个方面：
1、页面布局尺寸要准确，最好能够实现自动适应屏幕；
2、页面风格，包括颜色、字体、行间距等，都要按照规范设计，这个阶段，往往需要UI的介入；
3、交互要能够实现，至少要实现所有的菜单功能，并且要实现主要细节页面；
按照上面的要求，高保真的原型除了基本的原件之外，一般都要使用到动态面板、中继器、内联框架等元件，需要产品经理能够对这些元件掌握的比较好。
总得来说，实现一个高保真的原型是比较复杂的，对于新手来说，还是比较困难的。
不过也有一些现成的pc端的高保真原型框架，可以下载直接使用。
B. 绘制线框原型图的10个要点，做与不做
线框图是设计过程中的第一步，也是整个设计流程中最重要的步骤之一。线框图是你想法开始成形的时候。尽管线框图看起来很简单，但也可以做得很好或很差。相框图的好坏可能对最终产品产生重大影响。下面将介绍正确的与错误的线框图。这些技巧可以帮助打造更好的Web和移动端体验。
线框图是用户界面布局的基本框架。线框图使用使用占位符，而不是使用真实的界面元素。线框图被用于早期阶段设计和开发过程中，验证信息架构和用户流程。
相框图有助于确定移动端程序或网站的界面功能与视觉框架，所以说线框图是设计产品过程中的关键步骤。线框图还可以作为产品文档，指导设计师快速搭建移动端程序或网站。
设计师如何充分利用线框图，以及应该注意什么？
如果想绘制好的线框图，你必须研究用户需要什么和他们想要什么。考虑两个重要的目标：业务目标和用户目标。这两个目标对产品是否成功起着至关重要的作用。线框框架之前的研究将帮助您设定明确的期望，即您想要使用线框图实现的目标。
绘制线框图与设计其它步骤的主要区别是要简单、快速。其中速度尤为重要。你需要快速的用线框图尝试很多不同的方案，在为问题提出适当的解决方案之前。线框图尽可能的保持简单是至关重要的，因为这可以帮助你避免分心，并且可以清晰地传达你的想法。
在绘制线框图框架时，要尽可能多地提出方案。一般而言，提出的设计方案越多，就会越有机会朝最佳解决方案进行迭代。如果能够在一个想法上产生多种想法和变化，可以让您看到每个想法的优点和缺点。
线框图可以说是项目前期的一种沟通工具，它可以帮助其他人理解你的想法。当你与其他童鞋对接时，请确保任何人都可以轻松的看懂并使用线框图。如果只有一个人能够理解你的线框，这么说，你的线框图就是不ok的。
a.向一个与你的项目无关的人展示你的线框，并向他提出一些关于工作的问题。这将有助于你理配汪解应该做些什么来提高理解力。
b.为你的线框图进行注释，使其更易于阅读和理解。阅读某些元素或交互的描述要比过看静态图像来理解事情要容易得多。
切勿单独思考。当你与其他人一起集思广益时，能收获更多及培神仔更好的解决方案。在设计过程的早期应该多向团队成员展示线框图，这有助瞎扮于验证和改进你的想法。
团队成员的反馈有助于您改善方案 - 听取其他成员对你的设计的看法，根据反馈进行重复性修改。
例如：我们电子商务网站的产品中，有结账页面，这与许多其他网站类似的。如果你觉得因为一样可以选择不绘制产品这个部门的线框图，而是专注于应用程序中不太明显的部分。其实这样会导致你遗漏交互内容，影响用户体验。所以请避免这样的误区，确保应用程序的每个部分都有线框图。
当你准备绘制线框图时，直接使用你最喜欢的电脑软件工具绘制，这看来是没有什么问题的。虽然像 Mockplus 这样的现代原型开发工具可以在几分钟内创建出功能完整的原型，但在最好先用笔和纸勾勒出你的想法，然后才使用电脑软件。
你有没有想过为什么线框经常以灰度创建？灰色防止颜色对你造成的分心，帮助你快速完成绘制。线框图的主要目的是搭建用户界面内容并描述应用程序的功能。添加多种颜色可能会导致分心，因此最好避免在线框中使用颜色（除非要突出显示某些特定元素）。
不要过分关注线框的外观。线框不是最终设计稿。它们不需要看起来感觉像成最终产品。请记住，线框图是一种工具，帮助了解界面中视觉或交互设计元素的层次结构。当你过分关注美观度，你可能会绘制特别精美的线框图，但可能不会产出真正的解决方案。因此，绘制线框图要努力让它们能用，可以轻松传达你的想法。视觉和交互设计应留在产品设计过程的后期阶段。
不要依附于你的个人想法。可能你很难放弃一些你花费了很多时间的某些东西上（特别是当结果本身并不坏时，但却不符合你设计的产品概念）。但重要的是，线框图被绘制出来前。你需要尝试很多不同的选择（可能10种、50种、甚至100种方案），然后选择最适合问题的一个（或两个）方案。
绘制线框图是用户体验设计师的基本技能。时间就是一颗良药，任何技能都可以慢慢熟练掌握。同样熟练掌握绘制线框图技巧的关键也在于练习。你做得越多，你就会越好。因此，你平时需要投资更多的时间在相框图上，这样在下一次个项目开始时，可以节省大量时间。
原文链接：https://medium.com/mockplus/10-dos-and-don-ts-of-wireframing-8a6d0b3429d8
C. 产品界面原型设计排版规则
01字体：类型&字号
在原型页面的文字设计中，字体的选择方面建议使用苹方（macOS）或是微软雅黑（Windows），以便达到更好的显示效果。
字号我个人比较常用的是12、13、14、15、17，偶尔会用9、10、20。
02配色：色彩&界面
在原型页面的色彩设计中，最好保持一致，无论是文本还是其他图形、图片不要使用太多非黑灰白以外的色值。
如果用于演示的产品原型稿件中需要配图标，则需要保持图片的一致性，大小及样式。但在实际的工作中，除了一些指示性比较强的图标，比如搜索、设置、分享等等，其他的尽量不要使用图标素材。
组成原型界面的素材也要尽可能的避免混搭，比如从成熟产品中截图然后应用到自己的产品原型当中。
在Axure9中新增了AdjustColor【颜色调整】，可对图片可以进行色值调整。
03排版：对齐&间距&留白
在派带原型页面的结构设计中，要灵活的枯野使用参考线、对齐、分布等功能，使页面内容具有良好的可读性。
从个人习惯来讲，无论是间隔还是留白，我会按照5像素的倍数进行设置。留白一般在Style样式面板中调整Padding值，很多时候，Padding值也能辅助我对组件进行对齐操作。文本之间的行间距偶尔会调整，但会以默认为主。
04案例
以下是一些规范原型页面示意：
05结束语
对于想要从事产品经理或是交互设计师的新人来讲，建议大家在熟悉工具的使用过程中有意识的培养自己的设计规范。在绘制线框图，或者临摹其他成熟产品创建高保真原型（实际工作中并不需要创建高保真原型，这边需要特别注意）的时候，一定要注意以下2点：
线框图：不建议完全按照苹果或是安卓，设计规范进行页面设计没羡喊。
高保证：不建议像素级临摹。
D. 网站交互设计：线框图，原型和视觉稿的区别
首先，他们都是网站的界面和交互方面的模型，但完成度各不相同。
线框图 —— 更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系。一目了然的了解网页设计的大致情况。
原型图 —— 原型添加更多的界面细节以及交互，已然是相当真实的网页设计模型，能够进行初略的产品演示和测试。
视觉图 —— 更进一步丰富视觉、细节以及交互，与最终产品十分接近，方便演示和迭代。
当然，设计师设计过程中，使用的工具也会有所不同。例如，线框图和原型图，一般原型设计工具，例如摹客Mockplus, 几分钟就能快速完成。它新出的在线全新升级版本，提供更多模板、组件、交互以及状态设计选择，高还原度原型设计，轻松打造。
E. web端及移动端原型设计规范
第一次绘制原型图的时候觉得主要功能表达清晰即可，尺寸大小、元件间距全凭感觉，因此一开始也挨了不少骂。后来慢慢摸索出规律，大概总结如下：
端口类型：
目前长需设计的端口分为：web段（即网页）、移动端（APP、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸），智能设备（例如智能电视、智能手表等等）
由于我更多接触的是网页端已经小程序端口，后面会以这两个为主。
网页端：
目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面的时候，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。
因此在做产品设计的时候，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。（PS：内容区域的矩形需与底部容器左右间隔10px，作为留白）
可能有人会问，为什么要底部容器上面划出一块内容区域？
首先，我们要知道， 容器决定产品的边界 ：
我的理解是：
按照市面上显示器的分辨率，前端页面可展示的内容区域，平均宽度在1200px，预留出来的空白部分，是为显示器较大的人群考虑的：屏幕越大，可展示的区域也越大，超过产品本身内容可展示区域的话，会自动留白。
另一方面，为保证开发团队的成员可查看完整的原型图，我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。
稍稍总结下，就是跟随大多数人的屏幕尺寸大小，以及方便开发团队查看。
给大家看我电脑上查看大的原型图大小，是不是很清晰的看到内容呢？当然，这也是我个人的看法，如果有别的看法的，可以互相交流交流 （我算是个野路子的产品） 。
至于高度的问题，这个是没有要求的，一般都是根据需要展示的内容来决定的，也就是高度自适应。
讲完容器的宽度，接下来讲讲字体。正常情况下，字体大小都是14px，最小字体12px（字体太小可能就不方便查看）。
字体上，我所在的企业并没有太多要求，只要求能看懂主要功能就行，所以上面的字体是来自一位B站的up总结的。
移动端：
说明之前，给大家感受下刚入门时候，画的线框图，话不多说，先上图。
（OS：简直惨不忍睹，当然这并不是给开发的图纸，而是草稿。由于各种问题，我需要兼顾产品跟UI设计，所以都是输入高保真原型图的）
虽然最终效果跟第一版草稿的差距特别大，但这样让我知道原型尺寸的重要性。但凡在自己随手画的容器上觉得觉得间距大小差不多了，可以了。有这样的想法，那你离被开发揍一顿就不远了。
以自己一开始的惨痛经历说了这么多，接下来聊一聊移动端的设计规范。
常见的移动端多是手机，基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px，最小字体一般是12px（你懂的，手机屏幕小，字体太小用户也很难看清的）
上图是我个人画线框图的习惯，并不是标准，只是提供个参考给大家。各个区域的底色，也只是为了便于自己区分，实际上底色并没有什么特别多的要求。至于字体，一般都是使用14px的字体。
产品在原型设计上还是有很多规范的，只不过我就职的企业并没有太多要求，但基本也算通用了，具体情况还是看看自己企业内部有没有什么特别的要求。
上述的设计规范仅限于个人习惯，也是非常基础的部分。如果有别的见解也可以一起分享。像容器内，各类原件的一些规范，后续也会慢慢整理出来。
F. 用案例帮你厘清原型：草图、低保真以及高保真之间的区别
最近有个朋友向我咨询：产品设计流程中原型、交互和视觉之间孰先孰后问题，并由此引出了原型低保真、高保真以及视觉稿之间的差异的思考。先解决我朋友的问题，交互是存在原型之中的，即设计原型的过程中也包含着添加交互的过程；而视觉稿呢，则是在原型通过评审之后，再进行设计的产物。三者的前后顺序可以大概理解为：原型-交互-视觉。
从建筑学的角度来看，大家可以将原型和蓝图（施工方案）对比理解，两者的区别在于应用场景不一样：前者应用在移动/互联网、后者应用到实体施工现场。而接下来是要探讨则是原型的三种形态——草图、低保真原型（线框图）、高保真原型之间的区别。
手绘草图
手绘草图一般应用于产品概念的形成阶段。这个阶段可能发生的场景颇多：可以是团队成员之间的头脑风暴，也可以是个人在收集及整理需求时诞生的灵思妙想，还可以是你在某个明媚阳光下漫步看到树影婆娑突然萌发的灵感。
在这个美妙的moment，兴许你会马上拿笔把它画出来，也可能立刻用电脑记下来，还有可能立即停下脚步散落在脚边的石子划开来。但无论画的怎么样，都没关系，因为这个只是灵感发生变化的开始，也就是产品原型的最初样子——草图。
手绘草图是由产品经理来给产品需求描绘出的一个雏形，主要用于梳理及向项目负责人证实产品需求是否确实存在。手绘草图，不仅可以避免对产品需求的片面理解，在一定程度也可以提高产品经理本人的思维拓展能力。
低保真原型（线框图）
与草图相比，线框图显得更加完整、饱满，它明确地表达：内容大纲（什么东西、信息结构（在哪）、用户的交互行为描述（怎么操作）。主要应用在产品需求已经成型无需改动阶段，这个时候，产品的业务流程、信息架构都已经确定。产品经理在设计原型时也会遵循一定的规则，比如遵循栅格系统的布局规则、运用格式塔原理进行排版和设计。但这时的原型还是呈现为灰度图，这也是和高保真原型最大的区别。
线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员（开发工程师、视觉设计师、文案作者和项目经理），开辟了一条辅助理解设计的通道。说得再明白点，你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无法一览城市的美感。
一般情况下，低保真原型可以适用了大部分场景：包括向UI解说布局排举纳版字体图标，向前端、后台攻城狮解说功能实现以及交互效果，还可以作为产品样本对接业务部门，通过沟通确保产品满足需求。当然，原型到低保真，基本可以作为展示产品经理的能力的参考之一。
高保真原型
与低保真原型相比，高保真原型的最大不同之处在于配色。不是毫无规则的五颜六色，而是符合一定规范的用色。例如上面讲到的格式塔原理：接近、相似、封闭、连续、简单。但是涉及到用色，一般会由专业的UI设计师来设计，产品经理需要做的是把已完成的视觉效果图按照交互逻辑重新制作。这样制作出来的高保真原型视觉效果棒，容易传播并且评判。
但是在很多大公司小公司，根本就不会考虑制作高保真原型，因为耗时太卜答历长，人力成本也高。在我接触的项目中，只有给建设银行的系列产品（如商城、手机银行等）做用户体验测试时有用到。
通常来说，高保真原型常应用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资；或者邀请真实（潜在）用户来测试，在正型搜式介入开发阶段前，以最接近最终产品的形式考量产品可用性。
以上通过案例帮对原型设计感兴趣的同学厘清了草图、低保真原型（线框图）、高保真原型之间的区别。
G. 什么是Axure及产品原型
axureRP是一款快速原型设计工具，它不需要任何编程或写代码基础，就可以设计出交互效果良好的产品原型，常用于互联网产品设计、网页设计、UI设计等领域。
作为一款热门的原型设计工具，它可以完成很多纸和笔画不出来的事情，特别是高交互的页面，用动画效果展现让人瞬间清楚你要表达的内容。
原型：用线条、图形描绘出的产品框架，也称线框图。
原型设计在整个产品流程中处于最重要的位置，有着承上启下的作用。何出此言？原型设计之前需求或是功能信息都相对抽象，原型设计的过程就是将抽象信息转化为具象信息的过程，之后的产品需求文档（PRD）是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行描述和说明。所以说，原型设计的重要性无可替代，产品经理应当要对此有绝对的控制和驾驭能力。
话说回来，原型设计虽然很重要也应当是有限度的，原型设计的作用有以下几点：
1、因为是原型是需求和功能的具象化表达，所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。
2、因为原型相较于UI稿来说修改更方便，所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。那axure和腾讯cdc的uiddesigner，还有在线的fluii也可以考虑。其他好像敬蠢指没有了吧。但除了axure，后两者所谓的交互其实都是不同的界面截图之间的切换，说白了就是多节点式结构的ppt，不是真正的交互。axure的思想更接近实际开发，比如通过master实现界面元素的封装复用，条件判断，函数，变量。这些功能除了开发工具，原型工具还有谁能比得上axure吗？
app原型相比网页，界面结构简单，但交互复杂得多。界面上的div也不是平铺的，为了有效亮配利用空间会用到很多层叠，卡片式之类的展示方式。要做这类高保真可交互原型，我觉得非auxre莫属。比如一个tableview滑动到顶部刷新，底部回弹，不借助开发只有axure能做出来。
我从07年开始用axure，曾经一度认为做网站原型，axure已经不需要再怎么改进了。自从做app之后，觉得axure有点根不上时代，但试了其他工具，还是觉得auxre最合适。仔细做过几个以后，我觉得axure还是完全适合做app原型的。做好以后分享也方便。放到内网，或者axshare上，或者有一个htmlruntime的app，可以在设备上直接浏览axure输出的html。
当然axure作为一个工具，不可能每个环节都是最好的。比如我希望axure能借鉴一下其他工具和开发思想，把ui和素材分离出来，就像换皮肤一样，一个控件可以随便更换图片素材。这样pm或者交互用最简单的线框设计，确定交互以后，可以把设计师的图贴上去，这样就100%保真了。
axure对app设计不友好或者说最落伍的地方，就是支持的事件类型太少。交互上无法模拟出多点触摸，无法模拟设备运动，无法模拟各类传感器或许对一个原型工具来说，要求太高了。AxureRP是美国AxureSoftware
Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理
产品原型是将抽象的想法、需求转化为具象产品的过程。同时它可以直观的呈现给团队中的其他成员，甚至早期用户，用于验证产品的合理性，通过高效、低成本的方式来表达、测试并验证产品。Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。
产品原型的定义：
1.用线条、图形描绘出的产品档滚框架，也称线框图。
2.交互设计的结果输出，可能是一张纸上的几张图；原型代表着交互设计的结果，当最终实现的时候，交互流程会和原型保持一致；可以理解为草稿或者叫做参照物
3.原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言，原型是一种沟通工具。
另外，目前比较好用的在线原型设计工具有Marvel，Invision，墨刀等等。
希望对您有帮助！有疑问欢迎追问~在界面设计初级或中期，为了能够方便和其他设计师讨论、测试产品相关的设计想法，需要利用各种原型工具将产品模型做出来，一个个界面修改和迭代，必要的时候，还可以制作成动态的模型，直接测试，看看可能会有哪些问题或不足等。
Axure是一款老牌原型设计工具，是目前为止，市面上使用比较普遍的工具，全面支持原型、交互和分享功能。但是，对一些原型设计小白来说，学习难度还是蛮大的，上手较慢。目前国内也有许多优秀的原型设计工具，比如摹客Mockplus，可以说是一款简化版的Axure。原型制作快速、简单、高效。原型项目类型全面、交互丰富、拖拽即可实现、团队分享、协作和评论功能也能实现。适合初期快速绘制原型图，中期和后期快速协作、迭代和测试。
H. 产品经理必备技能 | 如何画原型
产品经理当然要会画原型啦~
聊聊怎么画原型吧！
在画原型之前，更重要的事情，就是画 页面流程图 和 信息架构图 ！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。
页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。
为什么要画页面流程：
（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确认了没？？？
I. 产品原型总返工掌握3个基础能力，高质量输出“好看”的原型
原型策划时，具体的产出物虽然无法用统一的标准去衡量，也无法一概而论规定使用何种规格，但是产品经理们还是可以具体场景具体输出。
业内通识，画原型是产品经理的基本功，但是又有多少人思考过，产品经理为什么需要画原型。同时也正是很多人因为意识不到画原型的目的，所以往往就会忽略这个基本功的积累。
根据产品经理的工作内容和岗位职责，先说说需要画原型的三种场景：
描述需求： 产品经理通过客户调研或发掘，又或者是老板or领导直接向下传达的需求，此时需要产品经理将对方口中所说、心中所想的需求概述可视化，需要形象地描绘出来，以便对方可直观理解、快速达成共识；
设计协作： 在产品开发流程中，对于确定的需求和功能策划，需要在进入UI设计阶段之前将原型稿确认，便于在正式投入精美的设计之前可以先把产品的方向以及功能结构确定下来，避免因为设计返工造成的内耗；
客户展示： 对于一些外包服务型公司，在跟甲方或者客户爸爸确定需求后，需要第一时间将双方理解的内容快速展示出来，以便快速发现问题然后沟通调整，为之后交付正确的解决方案做准备，也同时尽量避免因前期客户信息不同步造成的项目风险；
针对以上三个场景，就诞生了三种典型的原型稿绘制形态：草绘线框图、低保真原型、高保真原型；
草绘线框图： 三种形态中最为“简陋”的一种，只展示大概的原型界面框架、关键内容和核心的页面流，可以是手绘或使用软件工具。该种形态多用于上述第一种场景，更多是内部协作时需要，快速绘制快速调整，以便尽快得到正确的反馈；
低保真原型： 相较于草绘线框图要完整一些，属于工作中常见的一种，尤其是在产品职责分工较细的公司，也是经常使用的一种方式。可展示完整的界面框架、页面内容和页面流，绘制时多采用黑白灰的视觉风格。该种形态多用于上述第二种场景，多用于在工作流程中的交互、设计协作，在保证原型基础的规范性基础上，还可以让专业的交互、视觉设计师有一定的发挥空间；
高保真原型： 顾名思义，原型的保真度较高，要求原型页面细节、交互完整且原型视觉饱和，近乎于已开发完成的线上界面，可以亲自示范点击，就像在浏览线上产品一样，只是里面大多为静态数据而非真实的线上实时动态交互。该种形态多用于上述第三种场景，即在向客户交付方案前的成果展示，为了便于趋近真实的产品，方便客户可以快速理解和决策是否要直接投入开发成本，甚至有时会为了更加逼真，会快速开发一个产品demo以供测试和体验。
了解了绘制原型的场景，就可以知道自己在实际工作中的原型，到底需要画到什么程度了。
当然有些公司会制定规则，要求统一使用某个保真度，还有一些比较规范的公司会有通用的原型规范，可以直接拿过来稍加改动，变成符合业务设计的内容即可复用。 总之，很多时候其实“画”不是最重要的，而是先搞明白为什么画、为谁画才可以输出匹配任务场景的成果。
产品经理在日常工作中输出产品原型时，也应该时刻清晰一点：画只是过程，不是目的。
从产品创意诞生到产品开发上市，原型在其中的作用堪比承上启下。承上可描述顶层需求，启下通过绘制的原型，可以帮助在产品开发流程中下游的设计、技术同事们快速理解、高效开发。
那么既然想要提高效率，就必须在承上启下的中间形成标准和规范，因此就需要思考如何能够在基于公司规范下，快速实现目的以及交付。
产品经理岗位的天然属性就是协作能力，既然要协作就会有协作对象，在工作中经常需要拿坦培自己的输出与上下游进行对接，并争取达成共识。
按照日常的工作内容来讲，产品经理的协作对象无非就是市场/销售、设计/开发，因此产品经理画的原型也应该既要让市场运营、销售人员看得明白，也要让设计、开发理解的清楚。
通过简单拆解协作方的需求，就会明白：
市场/销售人员： 更看重解决方案，需要验收你晌春画的原型是否达到他们的需求要求。但因为他们大多属于非产品相关专业人士，让谨唯因此就要求你的原型需要形象、直观，功能逻辑简洁明了，直接图形化表述方案即可；
设计/开发人员： 经常和产品经理打交道，对产品的日常输出也比较清晰，甚至不乏有相关从业经历的同事，因此如果要满足他们的要求，你的原型还需要经得起复杂逻辑的推敲和梳理，除了具备主业务流程之外，异常场景的逻辑也理应充分表示；
对设计来讲，可能更关注原型的交互样式和体验，专业的设计会考量你的原型交互是否符合系统、平台规范，是否还有其它更加符合用户体验的设计方式；
对技术来讲，可能更关注原型的交互逻辑和性能，会考量功能设计的逻辑性和耦合性，对于正常、异常的边界阈值是否都定义清晰，甚至还会要求你决定技术方案。
为满足协作方的需求，或许可以整理出一个完整的、通用的原型标准： 结构可视化、交互高质量、技术可读性。
与此同时，还可在交付时针对不同交付对象体现对方关注的点，比如前期给市场、销售验收时，界面美观整洁，页面流转逻辑清晰，在取得认可的基础上完善功能设计规范细节以及交互说明，便于后续工作跟进。
如果具备了这些要求，再结合具体的公司规范，你的原型就可以匹配协作方的的价值点，也就会是一个“好看”的原型了。
一份高质量的原型产出，通常要求产品经理们首先要具备相关专业能力，同时还需要有较高的执行力、审美能力、逻辑能力，恰好这些能力也是可以在工作中培养的。
较高的执行力是职场人应具备的通用能力和职业素养。在需求任务传达后，基于对需求的准确理解，可以快速产出合格的原型，同时在任务前期不必执着于细节，快速将完整的流程、逻辑跑通，然后在完善细节内容，这样可以有效减少任务延迟的风险；
审美能力的提升虽然不需要像设计人员那样经常临摹高质量的作品，但是也需要经常体验行业标杆产品，通过多次、深度体验别人的家产品为何如此设计，从而感受产品优良体验的细腻之处。如苹果系列的产品，不论是硬件还是软件界面，都倾注了无数经典的设计原则，是值得我们去思考和体验的。
逻辑能力在原型上主要表现在描述交互说明方面，一个是书面化的逻辑能力，另一个是业务逻辑能力，这两个缺一不可。书面化的逻辑能力欠缺，产品想法再完美也会因为别人看不懂而来回扯皮；业务逻辑能力欠缺，书面化能力再强，业务逻辑跑不通、异常场景缺失，直接导致技术无法开发也会来回扯皮。因此为了提高协作效率，减少扯皮内耗，就需要产品经理们提升自己的综合能力，同时也体现自己对工作负责任的态度。
专业输出直接体现对当前所从事工作的态度和能力。如果基本的原型产出不合格，很容易被认为是工作态度或者能力不行。能力不行，如果有合适的平台也可以培养，但是态度不行就说明不适合从事相关工作，无法为工作负责，也就很难让别人信服你可以为他们设计出人人都喜爱的产品。
原型的概念意义和价值不仅体现在互联网产品上，最早也体现在硬件产品的建模设计、影视剧的分镜稿等，此类工作场景都是运用“先粗后细”、不同阶段交付不同程度成果的思路，通过及时协作来达到最终的目的。
上述的三种程度的原型，其实也是在策划需求时不同阶段的产物，随着需求的确认，原型也会逐步丰富起来，因此在多数公司也并不是明文规定只允许输出某种规格的原型文件，还是需要产品经理们根据实际需要、任务周期以及交付目标综合考量，同时秉承着“先完成、再完美”的绘制思路，在正式交付前可以输出一份高质量的产品原型。
这里所谓的高质量并不是要求原型有多好看、配色多饱满，而是在具备上述原型标准的基础上，在交付时体现出来的理想态，交付时的输出越贴近理想态，你的原型就越合格，当然也就越“好看”。
由此思考下来，产品经理的原型基本功也就并没有想象的那么轻松了，自然也不会只是打开axure、墨刀随便拖几个矩形、图标就可以的，而是 需要产品经理在明确原型的场景、交付对象以及需求业务后，通过专业的图形设计来清晰的表达解决方法的过程。
J. 推荐下几款web原型设计工具，介绍下其各自的优缺点.
我们公司目前在用的是Axure RP Pro 6.5，这应该也是主流吧；我是测试人员，原型不是我设计，所以不好说优缺点