原型设计工具

三种主流原型设计工具介绍

一、Axure

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

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

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

使用方法：

1.元件的使用：在RP中使用软件需要选择后拖拽到工作区使用即可。

（以矩形为例）

拖拽矩形左上角的三角就可以进行圆角设置。

点击右上角的圆可以更改它的形状。左上角的三角形消失。

旋转，绘制好元件后选择它，按ctrl键，键直接拖拽定界框周围即可。

2.图片的使用：

直接双击当前图片元件即可。也可以在选择元件后的右侧的属性中导入即可。

可以直接复制粘贴到AX中进行使用，支持GIF格式。

3. 占位符的使用：直接在里面写入内容，双击即可。

4. 放大与缩小：按CTRL键前后滚动。

5. 页面对齐：页面的内容在生成原型时在浏览器的左侧或中间。一般情况下是在中间，但是一定要取消选择后方可以更改页面对齐方式。

6. 分割图片：选择图片，在右侧属性中选择裁切工具，点击需要切除的部分。也可以在图片上点击右键分割图片。选择那部分就切除那一部分。

二、墨刀

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

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

缺点：不自由，并且目前原型的交互效果系统自带的还比较少，另外需要充费才能够使用更强大的共享创建功能。

使用方法：

空白项目：

 模板项目：

创建模板项目有包含各应用组件的模板页面，十分便于我们借鉴与修改；

空白项目的创建操作：在下方输入项目名以及选择原型的平台后，点击创建，进入项目首页，

中间的是项目的编辑页面，中部的左侧以及顶部边框标注着的数字是像素，用来准对页面的宽度与高度以及页面内组件的位置；最左侧一列素材工具栏——用于直接将素材拖入页面中，页面栏——用于编辑和切换各页面：

右侧工具栏包含组件及图标等素材，最右侧外观栏——当选中某个组件时可在其中编辑外观的各种参数:

上方工具栏最右侧的运行按键可以模拟运行时的页面操作：

 

三、Balsamiq Mockups

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

优点：内置了大量的模块，在需要的时候在搜索框里找，然后拖到画布里面进行排序组合，画图很快速，功能强大。

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

基本使用方法：

窗口中间是画布，上方是工具栏（支持拖拽和快捷搜索工具），左侧是在不同的画布间进行切换，右边是显示和调整选中控件的参数。

新建控件：在工具栏中找到“Browser”并将其拖拽到画布中

单机画布空白处显示窗口效果

要想在浏览器窗口中显示文字，我们需要“Title”和“Text”控件，在右上角快捷搜索工具中输入名称以找到该控件，并拖拽到浏览器中，双击控件即可编辑内容

锁定/解锁控件：右键点击控件菜单中第一项可锁定控件，右键点击被锁定控件菜单中第一项即可解锁。

组合/取消组合：选中第一个控件，按住Ctrl选中第二个控件，再按Ctrl+G即可快速组合，再按Ctrl+Shift+G可取消组合。

保存/导出：

Ctrl+S可快速保存工程.bmpr文件，打开时仍然可以编辑

Ctrl+R可快速导出.png图片， 不可编辑仅可查看