产品原型工具有哪些

你好，首先我觉得原型设计需要根据需求（内部需求和外部需求）来设计自己的原型，其次你要明确产品原型相关意义~下面分享一些，你可以根据自身问题，看一看~

原型的定义：

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

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

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

原型设计：

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

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

原型设计的作用，主要有两点：

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

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

原型设计的目的：

1原型设计的核心目的在于测试产品，没有哪一家互联网公司可以不经过测试，就直接上产品和服务。

2原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。

3虽然需求文档也是可以满足沟通需求的，通过用例将交互写到设计描述文档中，但是原型可以更详细地解释交互。

设计流程：首先明确产出原型目的以及用户群体，这个原型有多大效率帮助我传达设计或测试设计？ 有多少时间做原型？其次需要什么级别的保真程度？

具体方法：

步骤一：画草图：画草图的目标是提炼想法，并且最好给画草图加上一个时间限制，那就是15分钟。如果你绘画能力很差，那么恭喜你，可能你能更好地用好草图，因为你的注意力没有放在美化你正在画什么上面。另外画草图要避免陷入审美细节，尽可能快速的导出想法才是关键。

（用纸笔画的用户个人账户的草图示例）

步骤二：演示及评论

演示和评论的目标是把一些想法拿出来跟大家分享，然后进一步完善想法。

在演示过程中，要做好记录，演示和评论的时间可以对半分。

步骤三：做原型

在明确了想法之后，就可以开始进行原型设计了。这个阶段需要考虑很多细节，找出切实可行的方案，运用合适的原型来表达。

步骤四：测试

原型的目标之一是让受众来检验产品是否达到了预期，因此可以请5-6位测试者，通过音视频捕捉等方式，看看产品原型是否被顺畅地使用了。

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

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

2 所需的时间和精力；

3 可复用的代码/框架；

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

5 价格和学习曲线。

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

如果是创业公司，或者试错性业务，可以尝试下低代码的相关产品，产品经理把能看到的界面、简单的业务逻辑配置出来，那么交给技术的时候算是个半成品，这样双方技术交底也简单。

这样的情况，产品经理就会非常深入的参与到项目交付中去，这种样式扯皮的事情也少了。

推荐这个私有化部署、免费使用、且可以购买源代码的低代码工具，这个对于处于长期试错的公司应该是特别需要的，在线demo地址：framebctoolscn，这个也是有开源的版本，gitee地址：/software-minister/jvs

这是关于原型设计规范的第二篇文章。

最早听说原型设计规范这个词，还是刚入行没多久，处于自我感觉超级好的打鸡血阶段，有时候接到新的项目或产品需求，一天可以画几十张原型图，反正就是 各种堆砌图标、组件和文字，加链接跳转，最后简单的左右居中对齐 ，这样的状态持续了小半年之久，一句话总结是：熟练无比，乐此不疲！

直到有一天，公司组织开了个内部产品分享会，主题是 什么样的原型最适合开发（设计）？

其中有个环节是让每个产品经理当场演示自己的原型HTML ，其他产品和各项目组主设、主程评价打分。已经不记得当时我得了多少分，反正轮到我讲的时候全程面红耳赤，感觉分分钟要被开除的节奏。在总结的阶段，有个UI转岗的资深女产品重点提了原型设计规范，概括性的讲了几分钟。此后，我就有意识的开始查阅搜集产品原型设计规范的相关文章和资料。

一、产品原型图有哪几种？（多图预警）

归纳可分为三种：分别为原型草图（需求版）、低保真原型（标注版）、高保真原型（交互版）。

以上三种原型图，最常见的是低保真原型，需求评审或开发时经常使用。高保真原型一般只有公司层面的汇报或者产品商务演示才需要用到。而在沟通需求的时候，会使用手绘版的原型草图来辅助理解。

但是，真正适合UI设计和程序开发的原型图，其实是灰模原型。

二、什么是灰模原型？

>>灰模原型是基于信息架构和功能列表的

>>灰模原型一般使用尺寸：375667 或 320480（App）

>>制作灰模原型时，一定要所有组件之间的对齐，需对齐到像素级

>>所有的元素，除了组件自带的颜色，只用黑白灰三色

>>只用最基本的矩形、直线表现整个原型，矩形可变换成圆形、三角形等，现在我会增加灰度的ICON

>>不用设计交互，所有页面分开展示，每个功能的状态都需要表明

关于灰模原型，我会在原型说明的文章中详细阐述，这里仅将这个原型的要素先列出来。

三、常用元素大小尺寸说明

PS:若尺寸记忆繁琐，亦可参考将iPhone 6的尺寸缩小1倍作为原型尺寸。

四、页面编号规则说明

关于页面编号我使用的是文档的编号规则，abcd ,最多到4级，使用页面标题名称作为页面名。

这样编号的好处有两点：

>>可以很清楚的看出来每个页面父子层级关系，便于快速理解功能信息结构。

>>可以很清楚的看到页面层级数量，若出现4级或以上页面，就需要重新思考产品页面层级是否合理（层级越多，产品易用性越差）。

关于原型的元素组件命名，我一般都默认不命名，只在做动态交互的时候，针对可触发的元素进行统一命名。如果想要全面了解命名规则，可以搜索UI切图命名规范。

一、输出以界面为单位的产品流程图

高效输出，首先要保证产品的整体思路要正确，这点可以从产品流程图中体现出来。移动产品需要做到聚焦，因为手机界面的大小，用户的碎片化使用等等，所以一个界面上必然不可能出现太多的内容和行动点，这就保证了我们可以用最简洁的方式来画流程。以界面为单位，定义“界面标题”和“主要内容”，如下图所示：

如何利用起这样的界面单位来画流程，下面以一个app的登录注册为例：

这样的一个产品流程图，可以快速了解产品有多少界面，检验用户路径是否太长，形式简单，也方便讨论修改。

二、使用可修改的基础原型控件

如何快速产出高保真原型？一套备用的基础原型组控件必不可少。大部分设计师一般使用axure来完成产品原型，所以从协同合作的角度，本文专门在axure里制作了整套最常用的移动产品组控件。设计师只要改文字，改颜色，摆位置就可以完成简单的高保真原型。基础组控件截图如下：下载地址

以此控件为基础，在之前提到的app登录注册例子，快速组件高保真原型。

关于设计上很多细节，大家可以参看书籍方寸指间——移动设计实战手册，里面涉及到很多最基本的移动设计知识。

三、制作可点击的动态原型

完成高保真原型，根据流程图，可以很方便制作出在手机上可体验的动态效果，让产品人员或则用户真实感受app实际的效果。

看完这篇文章，小编还是要唠叨一句：交互原型，重在把设计思想传达出来，逼真的效果固然很重要，但千万不要沉迷于一些看起来很酷炫的效果，往往一句注释就可以说明清楚的问题，干吗还要花几小时甚至更多的时间去制作很逼真的效果。任一选择一个app，根据它来做一个原型，做个2、3个不同类型的，那肯定可以出师了

手机应用产品原型图工具：Axure RP 细节交互做的很好。还有很多：软件界面原型设计工具 UIDesigner；产品原型设计工具 Balsamiq Mockups；iPhone原型制作 iPhone Mockup；产品原型制作工具 FluidIA；界面原型图绘制工具 Pencil

我们首先明确两个定义：

原型的定义：

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

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

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

原型设计的定义：

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

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

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

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

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

（原型设计在产品设计中所处的位置）

设计流程：首先明确产出原型目的以及用户群体，这个原型有多大效率帮助我传达设计或测试设计？ 有多少时间做原型？其次需要什么级别的保真程度？

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

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

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

2 所需的时间和精力；

3 可复用的代码/框架；

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

5 价格和学习曲线。

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

希望对你帮助~

有任何疑问可以追问，，谢谢~

---