移动应用开发如火如荼的至今，一个好的APP原型设计理念很容易被糟糕的界面和体验毁于一旦，如今市面有很多的原型工具可以帮助我们解决问题，但如何选择原型工具却成为设计师们最头疼的事情，一方面是由于不懂哪些工具适合自己，另一方面又没有多余的时间去挨个使用。那么今天，我就来为大家介绍以下8种原型设计工具，供大家参考使用。

1.Axure

网站地址：Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速产品原型工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

 优点：变化多端的操作，自带组件库并支持强大的第三方组件库，提供强大的交互支持，完整的教程及支持文档，支持原型预览。

 缺点：学习曲线较高，性价比不高，专业需求度高。

 适用人群：适用于追求强交互效果及细节产品经理及设计师，需要具有一定经验或较强专业性。

价格：

axure的使用环境通过下图进行说明。

1、主菜单和工具栏：执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作；

2、站点地图面板：对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次；

3、控件面板：该面版包含线框图控件和流程图控件，另外，你还可以载入已有的部件库（*.rplib文件）创建自己的部件库；

4、模块面板：一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次；

5、线框图工作区：线框图工作区也叫页面工作区，线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块；

6、页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload；

7、部件消息交互面板：这里可以设置部件在操作过程中的消息传递；

8、元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；

9、部件管理：在这里可以添加、删除动态面板的状态，以及状态的排序，也可以在这里设置动态面板的标签；当绘制原型动态面板被覆盖时，我们可以在这里通过点击选中相应的动态面板，也可以双击状态进入编辑。

详细使用过程可参考：原型设计工具——axure认识与使用_xpbob的博客-CSDN博客

2.墨刀

网站地址：墨刀-在线产品设计协作一体化平台

墨刀，一款在线的移动应用原型与线框图工具。借助于墨刀，创业者、产品经理及UI/UX设计师能够快速构建移动应用产品原型，并向他人演示。

优点：容易学会，内置组件多，可以云端保存工作，通过分享链接就可以分享原型给别人看了，支持sketch文稿导入和自动标注。

缺点：不自由，首先这也于墨刀的产品定位有关，清晰定位为移动端原型设计工具，因此在交互效果上、控件组合上，操作面板的选择上都不如AXURE 灵活，并且效果切换因为是采用连线的方式，有时候会让使用者脑子错乱的感觉。并且目前原型的交互效果系统自带的还比较少，但基本满足日常所有原型的使用。另外需要充费才能够使用更强大的共享创建功能。

价格：

适用人群：需要做简单的demo和领导沟通的设计师。

使用案例：

 3.Invision

网站地址：InVision | Digital product design, workflow & collaboration

InVision是一款基于网页的在线原型设计和协作工具。 设计师可简单上传各种原型设计界面或部件图片（当然，设计师首先需要通过其他图片软件，比如Sketch或PhotoShop等绘制相关图片），为其添加热区，并根据演示需要，独自或协作制作完成多样的原型交互动画。

优点：主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。

缺点：对于国内用户来说会有服务器速度的问题。

价格：

适用人群：设计师更多的将其作为原型演示工具，便于收集多方设计反馈。

4.Proto.io

网站地址：Proto.io - Prototyping for all

Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。并且它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。

优点：丰富的UI元素，且可以自定义；支持多屏互动和组件交互，可以从Dropbox上传设计图。

缺点：不支持实时预览，交互动效较多时动画不够流畅，性价比不高。

价格：免费试用15天 专业版（5个项目）1924 RMB/人/年

 适用人群：擅长于使用Web浏览器的产品经理或设计师。

使用案例：

 

5.Mockplus

工具地址：http://www.mockplus.cn/features

Mockplus是一款快速简单的原型设计工具，主要适用于新手产品经理和设计师。

优点：封装3000个图标和200个组件，操作简单快速，学习成本低。在最近发布的版本中支持团队协作功能，审阅和评论非常方便，听说在即将到来的3.2版本中，支持将Sketch的设计文档导出为Mockplus的mp项目文件。导出后，你可以在Mockplus中打开它。说了很久的页面流程图也终于要面世了。Mockplus的页面流程图可以做到：

– 即时生成；

– 你可以选择展示全部或任意多个页面的流程图；

– 智能生成流程链接线，同时也可以手动调整；

– 展示页面的批注信息；

– 一次导出页面流程图。

缺点：不支持手势操作，函数和动态面板。官网教程较少，例子模板没有具体的操作步骤。

价格：基础版永久免费，付费版118元/年，终身版：699元，无需另外付费更新版本。

适用人群：各阶段的产品经理及UI/UX设计师，追求中低保真，交互效果，快速原型，新手或专业人群皆适宜。

使用案例：

 

6.Fluid UI

网站地址：FluidUI.com - Create Web and Mobile Prototypes in Minutes

 Fluid UI是一款用于移动开发的原型设计工具，它能够帮助设计师快速高效地完成产品原型图的设计。

优点：Fluid UI 内置超过1700款的线框图和手机UI控件，并且还会经常进行更新，适合跨平台开发者。而且是html5版，全平台支持！

缺点：不够直观，免费版只能创建一个1个项目和10个页面

价格：付费版25美元/月，可以创建10个项目和无数个页面以及使用所有组件库。

适用人群：适合习惯使用多平台的产品经理及设计师。

7.Balsamiq Mockups

网站地址：Balsamiq Wireframes - Industry Standard Low-Fidelity Wireframing Software | Balsamiq

它是一款低保真的线框图工具，主要用于原型设计的初始阶段。

优点：内置了大量的模块，在需要的时候在搜索框里找，然后拖到画布里面进行排序组合，画图很快速，功能强大（比如在tab选择框里可以选择哪个tab是active，哪些是default的）。很快就能画出想要的app原型。如果你还觉得BM内置的模块点少？Mockups To Go 可以满足你需要的大部分需求！

缺点：Balsamiq Mockups里面画的只是草稿，没有配色，没有设计风格。它只是每个页面的布局，不能进行交互展示。

价格：个人版89美元，可以根据项目数量来购买。

适用人群：需要生成简单原型（草图）的产品经理或设计师。

使用案例：

8.Justinmind

网站地址：Free prototyping tool for web & mobile apps - Justinmind

中文网站地址：Justinmind中文网 - 为移动设计而生！

Justmind是一款为移动而生的原型设计工具，虽然它没有像Axure那么火，但是对移动APP的原型设计支持似乎比axure更好。

优点：高保真，支持手势操作。Justinmind的新小部件库包括所有的苹果IOS图标，还添加了Android Nougat UI工具包。并且在版本7.6.0中与Microsoft Team Foundation Server集成，添加一些新的现成屏幕，如苹果音乐播放列表，库和播放器屏幕，和苹果通知屏幕。

缺点：学习成本高，定义为高保真，需要设计人员懂的美工，又要懂的产品。Justinmind导出的html文件限制很强，需要特定的浏览器，还需要安装插件。动态面板无状态交互。

价格：29美元/月，终身版：495美元，Justinmind终身版仅支持一年的大小版本更新。 如果你想在第一年后继续使用新版，则需每年花费额外的$ 99保持更新。

适用人群：追求高保真原型的产品经理及设计师。

使用案例：

软件设计是需求工程的后续阶段，他根据项目所描述的需求（功能需求、性能需求、领域需求、数据需求等）的定义，进行数据设计、体系结构设计、界面设计和过程设计。

软件设计主要解决“如何做”的问题，设计的方案最终会影响软件实现的成败。

一般把软件设计分为概要设计和详细设计两个阶段，包括体系结构设计、界面设计、数据设计和过程设计。

1.概要设计：

也称总体设计，主要任务是基于数据流图和数据字典，确定系统的整体软件结构，划分软件的各个子模块，确定他们之间的关系。概要设计是要完成体系结构设计、数据设计和界面设计。

体系结构设计：

确定各子系统模块间的数据传递与调用关系；

界面设计：

包括与系统交互的人机界面设计，以及模块间、系统与外部系统的接口关系；

数据设计：

包括数据库、数据文件和全局数据结构的定义。

2.详细设计

详细设计的任务就是在概要设计的基础上，具体实现各部分的细节，直至系统的所有的内容都有足够详细的过程描述，使得编码的任务就是将详细设计的内容翻译成代码就可以了。详细设计就是完成过程设计。

3.软件设计的原则

a.分而治之

分而治之用于解决大型、复杂度高的问题时所采用的策略。把大问题划分成若干个小问题，把对一个大问题的求解转换为对若干个小问题的解答，这样极大地降低了问题的复杂度；

b.重用设计模式

重用是指同一事物不做修改或者稍作改动就能多次使用的机制，重用的内容是软件的设计模式；

c.可跟踪性

软甲设计的任务之一就是确定软件各部分间的关系。设计系统结构，就是要确定系统各部分、个模块间的相互调用和控制关系，以便在需要修改模块的时，能掌握与修改模块有关的部分，并正确追溯问题的根源；

d.灵活性

设计的灵活性是指设计具有易修改性。会发生修改是因为：一是用户需求发生改变，二是设计存在缺陷，三是设计需要进化，四是设计利用重用。软件设计的灵活性主要是通过系统描述问题的抽象来实现。

e.一致性

一致性在软件设计方法和过程总都有体现。界面试图的一致性保证了用户体验和对系统的忠诚度。用统一的规则和约束规范模块接口定义，确保编码阶段对接口和数据结构的统一操作，减少数据理解的歧义。

aaa

真是应了那句：白天游四方、晚上点灯补裤裆(捂脸），孩子睡了夜深人静了、我才是开始我的小笔记整理工作。。

详细设计是软件设计的第二阶段，这一阶段的工作，就是要对系统中的每个模块给出足够详细的过程性描述，故也称为过程设计）

目的：确定应该怎么具体实现所要求的系统经过这一阶段的设计工作，应该得出对目标系统的精确描述。具体的就是为了软件结构图中每一个模块确定采用的算法和快内数据结构。用某种选定的详细设计工具更清晰地描述，从而在编码阶段可以把这些描述直接翻译成某种程序设计语言，书写的源程序。

任务：要设计出程序的“蓝图”，以后程序将根据这个蓝图写出实际的代码。

5.2结构化程序设计

所使用的结构有：顺序、选择和重复3种

顺序结构：实现过程的步骤是任意算法说明的基础。

条件结构：提供按某些逻辑发生选择处理的条件

重复结构：提供循环处理

只有3种基本控制结构就能实现任何单入口单出口，且无死循环、死语句的程序。

结构化程序设计采用自顶向下逐步求精的设计方法和单入口单出口的控制结构。

5.3详细设计工具

描述程序处理过程的工具称为详细设计工具，可以分为图形、表格和语言3类，对工具基本要求：提供对设计准确无歧义的描述，应能控制流程、处理功能、数据组织及其它方面的实现细节。从而在编码阶段能把对设计的描述直接翻译成程序代码

常用的详细设计工具：HIPO图、判定表、判定树前面章节已讲，现介绍新的如下：

程序流程图：

优点：易学、表达算法直观

缺点：不够规范，特别是使用箭头使质量受到很大影响因此必须加以限制，使其称为规范的详细设计工具。

为了使它能够描述结构化的程序限制只用前面所述的3种基本结构图。

例图5.1

程序流图的缺点：

1、本质上不是逐步求精的好工具，它诱使程序员过早考虑控制流程，而不去考虑程序的整体结构。

2、图中箭头代表控制流，因此程序员不受任何约束，可以完全不顾结构程序设计的精神，随意转移控制，容易造成非结构化的程序结构。

3、程序流图不易表示数据结构和层次的结构。

5.3.2盒图 （N-S图）

N-S图的主要特点就是只能描述结构化程序所允许的标准结构图

例图5.2

N-S图的优点有：

1、功能域表达明确，功能域从盒子图上可以明显看出来

2、很容易确定局部和全局数据的作用域

3、不可能随意转移控制。

4、很容易表达模块的层次结构并列出嵌套关系。

5、使软件人员遵守结构化程序设计的规定，自然地养成良好的程序设计风格。

5.3.3问题分析图（PAD图） 

PAD时一种算法描述工具，采用一种由左向右的二维树型结构图来描述程序的逻辑，图5.3PAD的基本控制结构

图5.3

 PAD优点如下：

1、用PAD图设计出来的程序必然是结构化程序

2、PAD图描绘的程序结构十分清晰，图最左面的竖线就是程序的主线，即第一层结构，随着程序的层次增加，PAD图逐渐向右延伸，每增加一个层次，图形向右扩展一条竖线，PAD图中竖线的条数就是程序的层次数。

3、PAD图的付款支持自顶向下，逐步求精的方法，左边层次中的内容可以抽象，然后用def从做向右逐步细化

4、用PAD途表示的程序逻辑易读、易懂、易记使用方便

5、即可表示程序逻辑，也可用于描绘数据结构。

6、可自动生成程序，利用软件工具自动完成，省去扔编码工作，有利于提高软件的可靠性和软件生产率。

图5.4PAD图将数组A(1)到A(10)从大到小进行选择排序的算法描述

5.3.4过程设计语言（PDL） 

过程设计语言也称为伪码，是一种用于描述模块算法设计和处理细节的语言，具有严格的关键字外层语法，用于定义控制结构和数据结构。

PDL特点：

1、关键字有固定语法，以便提供结构化的控制结构，数据说明和模块化的特征，通常在所有可能嵌套使用的控制结构的头和尾部都有关键字。

2、描述处理过程的说明性语言没有严格的语法限制

3、具有数据说明机制，既包括简单的数据结构（如简单变量和数组）包括复杂的数据结构（如链表或层次的数据结构）

4、具有规模定义和调用机制，从开发应根据系统编程所用的语种，说明过程设计语言表示的有关程序结构。

PDL程序结构

1、顺序结构

自然语言描述结构如下

处理s1

处理s2

...

处理sn

2、选择结构

If-else结构如下

if条件

处理s1

else

处理s2

endif

if-orif-else结构如下

if条件1

处理s1

orif  条件2

处理s2

else处理sn

endif

case结构如下：

case of

case（1）

处理s1

case（2）

处理s2

...

else处理sn

endcase

循环结构

for结构如下

forI=1to m

循环体

end for

while 结构如下

while条件

循环体

endwhile

until结构如下

repeat 

循环体

until条件

4、出口结构

escape结构如下

while条件

处理s1

cycle  i  if 条件

处理s2

endwhile

5、扩充结构

模块定义：procedure 模块名（参数）

return

end

模块调用定义 call 模块名（参数）

数据定义：de clare属性 变量多

注：属性有整列、实型、双精度、字符、指针、数组及结构类型

输入/输出定义 get(输入变量表） put（输出变量表）

5.4人机界面设计

本节对以下3个方面进行介绍：界面设计问题、界面设计原则、界面设计过程。

5.4.1人机界面设计问题

1、系统响应时间 属性：长度和易变性

2、用户帮助设施分为：集成和附加两类，集成一开始就设计在软件界面里面，附加：系统建成之后添加到软件中的。

3、出错信息处理：交互式系统给出错误信息或警告信息。

4、命令交互

5.4.2人机界面设计原则

可归为：界面简洁、控制摆放规范、颜色统一、符合用户习惯

3条用户界面设计的重要准则，称为黄金指导准则。

1、让用户驾驭软件，而不是软件驾驭用户

2、尽可能减少用户的记忆负担

3、保持界面的一致性

5.4.3人机界面设计过程

1、建立任务的目标和意图

2、目标和意图明确后，建立界面需求规格模型。

3、以界面需求模型为依据，创建用户界面原型

4、用户使用评估该界面原型

5、设计者根据用户的意见修改设计并实现下一原型。

6、不断进行下去，直到用户感到满意为止。

5.5详细设计说明书

1、引言部分和前两章一样，不多赘述

2、程序描述：（所有模块给出以下说明）

2.1功能

2.2性能

2.3输出和输入项目

2.4算法：模块所选用的算法

2.5程序逻辑：详细描述各个模块实现的算法可以采用流程图NS图、PDL语言、PAD图、判定表和判定树等描述算法的图表。

2.6接口

2.7存储分配

2.8限制条件

2.9测试要点：给出测试模块的主要测试要求

本章小结：

详细设计阶段的任务是确定如何实现所要求的目标系统，将总体设计阶段得到的模块算法用详细审计工具：程序流程图、NS图、PAD图和PDL语言描述处来，即设计出程序蓝图，从而在下一个编码阶段直接翻译成某种程序设计语言书写的程序，结构化程序设计技术是软件详细设计的基础，任何一个程序都可以用：顺序、选择、循环2种结构来设计和实现，结构化程序设计具有理解性和可维护性。

人机界面设计质量直接影响用户对软件产品的接受程度，因此必须对人机界面设计给与足够的重视。在人机界面的设计过程中，必须充分重视并认真处理好系统响应，用户帮助实施、出错信息处理和命令交互4个设计问题。