如何做好产品原型

① 产品交互原型用什么做

国内外很多制作产品交互原型的软件，下面我分享几个比较常用的制作原型软件，希望对你有帮助~

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

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

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

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

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

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

有疑问可以追问，满意请采纳，谢谢~

② 产品新人如何做原型图

作为一个产品新人最急于表现的应该是原型，最薄弱的应该是对需求的整理。因为需求的整理过程是一个去伪辨真的过程和权衡利弊的过程，而这个过程恰恰是新人没有的工作经验和容易忽略的部分。而产品原型时有章可循的，可以借鉴的，所以为了打发无聊的时间或尽快出成绩和成果，产品新人往往会先从原型下手。那么什么是原型，都包括哪些部分？

互联网行业的产品原型是将需求转化成产品的一个过程示意图，通过原型来表达需求点和流程逻辑，同时向UI和技术去表达产品的概念和实现的内容。

产品原型包括规划总览、版本规划、产品目的和目标、业务说明、功能分类、规范文档、业务逻辑、结构布局、细节说明和逻辑判断等方面。

这么多的节点需要完成就需要提前对行业和企业有很深入的了解，知道战略规划，业务方向和公司的执行层面的能力。最重要的是需求的封闭，一定要知道一个版本的产品无法满足所有需求，一定要分期分阶段来规划，而且每个阶段的重点肯定是不一样的，不要企图一口吃个大胖子。

再把需求转化成产品原型的过程中，一定要注意行业风格、用户体验、业务流程、业务逻辑和实现难度方面的配合和平衡，不提倡风格特立而丧失行业特性，也不提倡太过炫酷而提高开发难度和拉长开发周期。

产品原型理论上给企业做，哈哈，废话。产品原型应该是作为产品生命周期中一个重要的环节和参考标准，通过对产品原型的理解去开展工作，那么谁需要产品原型呢？1-自己需要，产品需要通过输出成果来升职加薪，而原型正是成果的体现，另外通过原型传递自己对产品的理解和表达，为下一个版本规划提供参考依据，更是为了日常沟通的需要。2-运营和提出需求的人，对于提需求的人一定要给人家反馈，让人家看看自己是不是词不达意，是不是真正的抓到了需求的核心意思。3-UI需要，UI需要根据原型去判断自己的工作量和大体的结构布局，然后评估自己的工作量和寻找素材。4-开发需要，开发根据原型的设计来评审业务流程是不是正确，结构是不是完整，实现难度大不大，大体的人员配置和开发周期的评估。5-测试需要，测试根据原型做测试用例和测试参考。6-企业需要，铁打的营盘流水的兵，总有新人换旧人，企业需要留档案留下资料，来避免换人的成本过高。

说到为什么这么做，我觉得有两个原因吧，一个是好记性不如烂笔头，一个是避免背锅。产品的很多东西都是细节上的面对面沟通，千万不要以为沟通过了就不用体现在书面材料上，往往是这些细节的东西最后会给你惹上麻烦。所以，为了自己能快速有效的和同事沟通和交流，一定要把沟通的内容更新下，保证你这个环节是最新最准确的信息存储。另外，很多时候很多环节是衔接不紧密的，如果不做书面更新，相互之间是可以扯皮和背锅的。尤其是开发和产品在工作上简直是天生的对手，而双方无论争吵的多激烈，最终都逃不过需求不明确和通知不到位两个问题，而这两个问题其实就是没有书面化并及时的传达给对方手里的问题。所以，为了避免给你事业上找不要的麻烦，还是要懂得记录下产品原型和更新需求。

一般情况下会在人和事上遇到困难。

在事情上，比如，自己对需求的目标和量化没搞明白就着急上手，需求的变更和原来的预测变化很大，老板会突然加活进来导致自己的节奏被打乱都会形成一定的困难。这个时候一定要稳住，分析问题出在了哪里。如果是需求的了解不明确，则一定要提高自己对需求分析的能力和基本功。如果是加大了工作量，则按照优先和紧急的二维象限去分析该怎么调整自己的节奏。如果是需求的变动挺大，一定要通知到所有需要通知的人，把新的需求和新的做法通知到位避免信息不畅而按照原来的做法去实现。

在人的原因上，一般是沟通不畅和配合度不够。无论是老板还是其他部门，一定要充分沟通，了解他们的真实想法，也传递给他们你现在的工作状态和工作内容，做到有的放矢。关于配合度的问题，就涉及到工作排期，先看工作排期是不是合格，新的排期的优先级和原来的计划的对比程度，该怎么做才能衔接好，只有给别人把工作衔接好，别人才能舒服的配合你做事情。

产品的工作也是需要KPI考核的，但是产品的工作一般是定性的，很难量化。我们有几个维度可以参考，1-对需求的理解程度，2-产品完成进度，3-测试指标量化，4-内部评价，5-市场反馈等来取考虑产品，所以一定要把握好自己的考核标准，根据考核标准去分配时间和精力。

想知道更多关于产品和互联网行业新鲜事的粉丝，可以搜索微信公众号“”“宅力宅力说”来了解更多信息

③ 如何做好原型图和prd

相信做产品的对原型图和prd都是再熟悉不过的了，虽然说这两个“技能”不能说是做产品中最重要的两项，但是一定是做的最多的两项之一。这两点虽然非常基础，但是也不是那么容易做好的。来到公司之前我自己做过两个产品的prd和原型图，第一次是在学校团队做的社交软件。那时候写prd的时候没有模板，竟然也没有想过去找一个模板参考一下，当时就凭着感觉自己摸索了一套逻辑先写着，然后给团队里的研发小伙伴看，他们说能看懂我表达的意思就是OK的。那时候的原型图更是简陋，直接用墨刀整了个“草图”，虽说是草图，但是基本上整个风格和UI的图都是我找的，然后就直接用上了。后来去公司实习了，公司规模不大，prd有一个模板参考，但是不是很详细，我硬是把自己觉得更详细的prd（就是我自己摸索出来的那一套，现在看来就是“根本不能用！”）给带我的人看，可能他也觉得我写的比公司的详细，于是让我比对着公司的模板加入了自己的想法。当时我去之前是一个程序员画了原型草图，大家可想而知，那效果！然后我就在程序员面前摆弄了一番墨刀原型，在他眼里，我画的可美了（说明一下，那个部门第一次做APP，所以当时只有程序员，还没有产品）。就这样，自我感觉原型和prd做的还不错的我就来到了现在的公司.......整天被师父说“prd写的不全面，加，加，加！！！！”“原型图画的太丑了，改，改，改！！！”在此，我还是非常感谢师父的高要求，让我学到了不少（刚刚还在喷我文章写的，啧啧啧）。那接下来就来说说自己学到的如何写好prd和画好原型图。

Prd篇

一份完整的prd要做到全面：除了让程序员，UI和UE能完全看懂要做什么，要怎么做（逻辑要非常清晰），还得考虑到和产品，功能相关的所有边缘情况。说的通俗一点，就是让人在能找到所有与需求相关的东西的情况下还找不到任何可以拉出来扯皮的。因为产品狗要对自己的产品负责，你不做好就等着背锅吧。

一，首先从整体来看，要按功能模块来写。我以前自己摸索的是按页面来写，就是先描述这个页面是什么，有什么，有哪些控件，用户场景的使用流程是什么。一直以来我都觉得自己描述的又有逻辑又详细，一来就直接被师父否了。然而我并不是那么容易妥协的人，我得知道为啥我的逻辑有问题，你的好在哪。于是师父拿出了他经常说的“你居然敢质疑我！”说完之后就开始详细解释了：按照页面来写，如果不同页面功能有重合怎么办；其次按功能写是一个逻辑流，如果按页面来就会漏掉一些关键点，因为它没有一条清晰的线；最后很多控件不是我们设计的，是UE设计的，我们只需要把逻辑说清楚，不要抢别人活。好吧，我觉得说的很有道理，但是打翻自己的逻辑重新树立一套逻辑还是不容易的，所以当时琢磨了好久才能按照师父教我的逻辑梳理文档。

二，从细节来看，主要记录三个重要的方面

1，需求说明/修改：说明为什么做/修改这个功能。最开始写这部分的时候我很容易就写成了这是什么功能，为了让用户怎样怎样。后来在师父的点拨下才了解到是站在公司产品的角度上写为什么要做。知道为什么吗？因为程序员总是质疑产品，这个功能为什么做，意义是什么。（潜台词是：能不做就不做吧，我们事多着呢）

例子：当前防蹭网功能只能对已经连接过路由的设备进行“加入黑名单”的操作，并不能对尝试攻击网络的设备进行真正的预防。

2，功能描述：说明用户可以做什么操作以及可以看到哪些内容

例子：

（1）进入到防蹭网的已连接页面可以查看已连接设备的信息：①设备名称，②接入时间，③接入网络类型，④接入次数，⑤总陌生设备数和总接入次数

（2）点击对应设备进入详情页面；

a.可以查看信息：①设备使用历史流量曲线图，②设备上下线时间，③设备使用总流量，④设备总连接时长。

b.可以进行的操作：①标记为家庭设备，②加入黑名单。

（3）进入黑名单列表，可以查看/移除已被加入黑名单的设备。

3，约束性描述：说明整个功能描述里面相关的规则，主要有显示规则，字段规则，防呆规则。这部分相对来说比较难，因为很多点都不容易想到。除了这些，还有很重要的：异常情况怎么处理，极值是怎样的，显示内容及其格式应该是怎样的。

例子：

1.设备列表显示规则：

a.已连接的设备列表为已连接的陌生设备，即不包括本机和家庭设备。

b.可显示/编辑在线设备和离线设备。

c.列表页最多有50台设备，当设备数超过50台以后，按时间顺序自动删除。

d.当前无陌生设备接入时显示：无陌生设备接入网络。

2.设备列表字段规则：

a接入次数：每次下线后再上线连接为1次。

b.接入次数超过99次显示为99+。

3.总陌生设备数和总接入次数：

a.按接入设备和设备接入次数的总和计算。

b.接入设备最多为50台，接入次数超过99次显示为99+

在开始写的时候很容易犯的错是将功能描述和约束条件弄混淆，但是弄清楚功能描述主要是站在用户的角度写的，约束条件站在开发的角度写的，多写几次修改修改就会好很多。

原型图篇

关于原型图其实能说的不多，因为每个人的审美不同，但是有些细节需要提一下。

1，这个也要根据公司的情况而定，比如公司有UI和UE的就不用特别注意美观，重点就应该放在重要的元素，完整度，逻辑清晰。反倒应该以简洁的界面为主（不要加入自己的设计想法，会误导别人的）。因为这时候我们的“用户”是UI，UE和开发，让他们理解有什么元素，怎样看的清楚最重要。如果在公司没有UI和UE的情况下，就需要注意界面的美观和交互了。

2，细节，比如去掉Axure里面那些控件的边框，对齐，颜色统一。

3，标注，prd里面很多重要的约束条件标注在对应的页面会更方便程序员开发。

4，没有时间就不要做酷炫的交互了，因为没用，没人看。甚至可以不用做交互，只需要有逻辑的把页面画全就好了。

其实不同的公司有不同的架构，所以对需求文档和原型图的要求是不同的，不过不管要求如何，都一定想清楚自己写文档的逻辑。还有逻辑也是可以优化的，不能死守自己的那一套逻辑，不好的就要改，让自己一直有进步。都说新人得踏踏实实做好手头上的事，所以看似很简单的文档和原型图就需要我们多用心做好，做好这一步了，基础就打踏实了，然后朝着寻找更好的需求努力！

④ 如何提高产品原型图的质量

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

⑤ 初级产品经理-如何高效绘制AXURE原型

      原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多，我们公司大多的产品用的都是Axure。用这个软件，高保真或者低保真原型都能做的很好。那么，怎样的原型才适合团队交流？

      毕竟绘制出来的原型并不是只给自己看的，还要讲解给团队里的成员，UI/前端/开发。特别是进行小组内评审的时候，通过演示原型，需要向他们讲解产品内部的逻辑、具体的页面、动效等，还要向他们询问设计是否合理，能否实现等，静心倾听他们的意见。这时候，原型就是一个思维传达的工具，将你的想法，翻译并灌输给你的团队成员。同样，原型是也团队的交流工具，针对绘制出来的原型，每个人都可以谈谈自己的看法，交流思想，完善原型不足的地方。

      所以原型绘制出来，必须要有基本的交付标准。

一、原型设计的基本交付标准

1.清楚------让他人能明白产品是干什么的，包括什么功能，有哪些页面。

需要清楚地表达页面有哪些内容模块

需要清楚地表达模块内部的构成元素

2.清晰------让队友知道具体有哪些要求，指导他们如何做

【1】功能操作

  某一个功能可以进行哪些操作，点击/鼠标悬浮/拖动等操作，以及页面会有什么反应。（方便开发的工作）。

【2】操作路径

       有一些操作是要跳转页面，跳转的路径需要标清楚，跳到哪去了，涉及哪些页面，页面之间是如何联系的。防止用户迷失。

【3】点击状态

一些链接，按钮，需要标明它初始的时候是什么样，鼠标悬浮有什么效果（颜色/下划线/提示语等），点击的样式变化，以及点击后的样式。（这些可以为前端的工作提供方便）

【4】信息组合

相关的信息需要组合在一起，比如一些基本信息，姓名/性别/年龄等最好放一块，不要分开。不相关的保持距离。

【5】位置排序

页面的布局应该适应用户的习惯，浏览方式、工作任务。突出强调重点，方便用户的工作。一些数据可以思考一下它们的排列方式，按什么排序，能方便用户查找，仍旧是“以用户为中心”。

3.周全-----产品的各种细节，不能疏忽

【1】交互状态

     某些重要的操作，交互样式是怎样的，效果如何，最好单独抽出来做成高保真，演示给他人看，让他们对产品有深入的体验和感受。

【2】数据显示

原型上涉及的相关数据做好有真实的案例，将需要获取的关键数据全部展示出来，比如一篇文章，需要的数据：作者、发布时间、浏览量、喜欢数、收藏数等，方便开发准备必要的数据接口。

【3】异常考虑

需要考虑一些突发情况的应对，比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。

【4】配套页面

产品里的一些功能可能和其他产品有关联，需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。

4.基本审美

【1】对齐

【2】间距

【3】颜色

【4】字体

推荐大家看看《写给大家看的设计书》这类易上手的书籍。

5.基本规范

【1】页面尺寸

       web的宽度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要与已有的产品保持统一的尺寸。

【2】字体大小

     标题可以是18px或者16px，内容可以是14px。既要考虑用户是否看到清，又要考虑美观。

【3】颜色

     原型不要有太多的颜色，坚持黑白灰，除非要突出，可以用其他的颜色。

【4】弹窗

     弹唱的样式最好做统一，弹窗名+内容+操作按钮+关闭

【5】元件

   不在原型正文添加过多的截图、图标样式，会对UI的设计造成干扰。

二.Axure的快捷使用技巧

       工欲善其事必先利其器，工具使用的越娴熟，才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷操作：

      首先在顶部菜单栏中找到<视图>，把需要的部件显示，就可以设置了。

1.组件库的建立（能提高效率，保证产品层面的统一一致）

2.母版的使用（适用于多页面通用的部分，修改后，集体自动更新）

3.设置页面样式（页面的字体、背景能一次性设置好）

4.元件的交互样式

5.元件组合

       把要组合的原件用鼠标框在一起，按住ctrl+G，成为组合后就可方便复制拖动了。许下按住ctrl+shift+G，也可以点击选中后，点击下图的两个图标来组合和取消组合。

6.对齐、居中、平均分布

选中要对其的内容，选择一种分布样式，就能快速得到整齐的原型样式，而不用一个个手动调整。

7.输入框类型的设置（预设好类型）

一些输入框，可能需要设置默认文字，可以直接选中了输入框后，在原件属性里设置提示文字和一些限制。

8.元件的提示语

        有些文字需要有鼠标悬浮显示提示语的动作，可以直接在原件的属性里设置“原件提示”，输入要显示的内容，即可。

三、制作原型的过程

1.梳理功能点-------------------将需求转化为功能清单，标出重要等级（前提是需求已经梳理清楚）

2.规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面，每个页面包含哪些元素

3.整理原型目录----------------用Axure添加原型的几个页面，考虑页面之间的跳转关系

4.设计页面的布局（打格子）-----用不同的色块，方框来表示这部分将要表示什么板块，设计好页面的布局

5.填充各模块的细节----------在方框里把具体的信息和数据填充完整

6.增加少量的交互动作--------------体现在一些涉及到任务的操作

7.页面注释-------------完善交互说明

8.审查自检------------------功能是否覆盖完全；页面有没有缺失；流程是否明确；状态是否完备

四、原型应用中的经验

      因为我多是负责后台系统的优化，所以是直接和开发打交道，如果涉及前台页面，就需要UI先将原型做成图片，再由前端制作含有动效的demo，开发再按照demo开发。但是不论哪种，绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。

      第一次负责项目的时候，我用的是高保真，画完整的原型就花了一星期多，各种动作和交互，恨不得做个虚拟的产品。但是和开发讲了原型后，等来验收项目的时候，才发现，开发大部分都没有按照原型上的动作来，甚至连细节都有遗漏。一个个催着补上后，我开始思考这种方式是不是不太划算，太费事费力，结果又不太好。

       后来我看了我上级绘制的原型，都是以静态页面为主，可以说是低保真，但是每一种情况都详细地用图文描述清楚，点击之后是什么样子，将要获取什么数据，失败了会怎么样都有。而且这种方式，完成的特别快。于是我就选取低保真模式的开始画原型，结果发现，开发有时候并不能将一些动作做好。

       于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开，将整个产品的逻辑都直接呈现出来，再在某些需要重点描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说，低保真模型足够了 。

       每个产品绘制原型的习惯和风格都有所不同，但关键还是需要进行小组会议来向队友们讲解原型和逻辑，在开发的过程中，需要多沟通。

       另外，分享大家关于AXURE学习的网站，可以在里面找到免费的软件安装包和教学课程。

https://www.axure.com.cn/

如果对文章感兴趣，欢迎评论留言，坚持喜欢的事情，加油~

⑥ 原型设计产品应该符合哪些原则标准

你好，原型设计要符合以下原则标准：

• 用户中心：原型设计应该从用户的角度出发，考虑用户的需求和体验。

• 简洁明了：原型设计应该简洁明了，避免过多的冗余信息。

• 交互设计：原型设计应该考虑用户和产品之间的交互，提供易于操作的界面。

• 可测试性：原型设计应该具有可测试性，方便进行用户体验测试。

• 可扩展性：原型设计应该具有可扩展性，能够适应未来的变化。

• 美观大方：原型设计应该有良好的视觉效果，美观大方。

• 规范化：原型设计应该遵循设计规范，保证产品的一致性和可维护性。

也不仅限于此，在这里推荐一本书《用户体验要素：以用户为中心的产品设计（原书第2版）》

⑦ 反思产品原型到底什么最重要

两个关键点让我反思这个问题：

1.之前用墨刀原型做用户调研的时候，我觉得一个日期写的不准确不影响测试结果，跟被调研者解释一下就好了。后来发现用户在不清楚产品设计的时候，会根据这些细节来理解产品，信息点不能高度还原的话影响测试效果；

2.最近出产品设计的时候，发现沟通起来特别的费劲，仅从我自身找原因：（1）文案不够细致；（2）没有标注信息优先级；因为没有设计需求评审这个环节，所以对方在不看需求文档，无法理解需求；导致出来的设计需求层级不清楚；（3）自身不了解设计规范；导致反工；

总之，1、产品原型突出信息层级要比画的好看重要；2、文案准确性要比画的好看重要；3、需要设计需求评审。

多改进，最近状态不够好～精力有限，不贪心，像我这样碌碌无为的人，一点都不够酷～～～

⑧ 如何快速进行网站/App产品原型设计

方法/步骤
1、对用户需求进行文字描述。
用文字描述这个软件，需要哪些功能。要怎样的结构，开始是怎样，过程是怎样，有哪些要注意的。（这阶段其实就是把重点给挑选出来，以免后续的产品设计过程中，遗漏了重点项目）

2、草图设计阶段。
这个阶段，可以天马行空，不用拘泥于传统。也就是自由创作，将思想，以图形形式表达出来。当然，不拘泥于传统不意味着就要排除传统。传统有传统的优点。在这里建议，创业如果已有很多创新点了，那么设计上面的创新可以部分忽略。遵照传统也被允许。PS:草图设计阶段并不一定就要用到Axure，遇到的画不出来的元素，用文字表达即可。

3、确认主体结构。
这个阶段，是将产品的使用逻辑优化好。配合用户使用习惯，行为特点，将结构弄得简单易用而内容丰富。这个阶段就要用Axure开始进行操作了。而显然，这个阶段我们的Axure如果含有很多方便添加的元素，如Iphone外壳等，进程就可以快很多。所以，最好提前到网上下载相关的axure元素库。

4、美化原型。
这个阶段，首先要确认自己需要哪些地方做美化。然后能搜索到的就搜索，不能搜索到的，就只能用Photoshop或其它绘图软件进行编辑了。当然，有的公司可以出钱请视觉设计师设计，也是很快捷的一个办法。

⑨ 原型设计是什么，该怎么使用它

我们首先明确两个定义：

原型的定义：

• 用线条、图形描绘出的产品框架，也称线框图。

• 交互设计的结果输出，可能是一张纸上的几张图；原型代表着交互设计的结果，当最终实现的时候，交互流程会和原型保持一致；可以理解为草稿或者叫做参照物

• 原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言，原型是一种沟通工具。

原型设计的定义：

• 线框图描绘的是页面功能结构，它不是设计稿，也不代表最终布局，线框图所展示的布局，最主要的作用是描述功能与内容的逻辑关系。

• 原型图是最终系统的代表模型或者模拟，比线框图更加真实、细致。

其次，了解原型设计的作用，主要有两点：

1. 沟通： 因为是原型是需求和功能的具象化表达，所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。虽然需求文档也是可以满足沟通需求的，通过用例将交互写到设计描述文档中，但是原型可以更详细地解释交互。

2. 测试：因为原型相较于UI稿来说修改更方便，所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。没有哪一家互联网公司可以不经过测试，就直接上产品和服务。原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。



该如何使用原型设计，那么原型设计工具就是必不可缺的。

又选择什么工具来制作原型？主要考虑以下几个因素（排名分先后）：

1. 熟悉程度和获得工具的便利度；

2. 所需的时间和精力；

3. 可复用的代码/框架；

4. 为测试创建可用的原型；

5. 价格和学习曲线。

目前比较好用的在线原型设计工具有Marvel，Invision，墨刀等等。

希望对你帮助~

有任何疑问可以追问，满意请采纳，谢谢~

⑩ 在画产品原型之前我们还应该做什么

一、首先要解决的是设计什么产品的问题？

我们在做产品时，学会问5个问题。

一问：谁会用这个产品？

二问：TA为什么用？

三问：TA在什么时间用？

四问：TA在哪里用？

五问：TA用了产品会推荐给其他人吗？

在解答这五个问题之后，基本我们把用户是谁、痛点、消费时间、消费地点、产品优势进行了分析。然后再进行产品的试错，弯路就会少走很多。

通常，使用5W2H分析法也可以解决

What（用户要什么？） 例如：用户要极品装备；

Why（为什么要？） 例如因为他们要增强战力；

Where（从哪儿得到？） （where）装备从BOSS身上得到；

When（我们什么时候做？） （when）我们国庆节做这个活动；

Who（对谁做？） （who）针对所有玩家；

Howmuch（给多少？） （howmuch）BOSS爆率设定为XX；

How（怎么做？） （how）活动以怪物攻城形式进行。

二、产品风格要符合产品的调性

什么是产品的调性？就是人与产品之间建立条件反射。就想一想到TT，大家第一反应十有八九就是杜蕾斯；一想到社交工具，第一反应是微信；一想到购物，第一个反应是淘宝。

1、产品色彩风格要符合调性

设计界面不仅仅要高大上，还要根据业务类别设计界面。比如淘宝要设计成集市的感觉，天猫商城要设计成高端商城的感觉。

2、给产品赋予情怀

从技术层面来说，产品是开发出来的。 从业务层面来说，产品是运营出来的。每个产品根据Ta的业务，会有它的情怀所在。比如携程做旅游，以蓝色为主，主打商务出行。再比如做美国旅游，由于美国的文化是开放的，具备多元化的特点，所以网站的色彩应该奔放一些。