1、概述

什么是原型设计？

原型设计可以概括的说是整个产品正式发布上线之前的一个框架设计等。

原型设计的好处？

原型设计能够确保你的软件交互过程与用户期望保持一致，这是确保项目成功的关键。它能够在表现层将设计合成一个逻辑整体，客户能和你一起看到未来交互的软件蓝图、功能和效果，获得较真实的感受，在不断讨论的基础上完善未来的设计思想，在深入调整前就收集反馈。编码的代价是很大的，系统重构的代价更大，可能会导致项目目标无法完成。但是在原型中修改一些重要的的交互行为或布局等所花费的也只是一点点沟通时间，并且通常一个人就能对原型进行构建和维护，不会打断其他进度。

原型设计的目的？

使用原型的根本目的不是为了交付，而是沟通、测试、修改、解决不确定因素。

原型设计注意事项？

1、不要仅仅只是页面的设计，不交代各页面之间的交互关系。如果是这样，那可能Photoshop都比Axure好用。

2、过度的交互设计。经常表现在对Axure了解比较深的PM身上。这些人总想着做出一个100%保真的原型出来，貌似是为了能够更完美的沟通，但更多的是在炫技！而且严重的浪费时间！！！殊不知：世界上的事情，往往是5%的时间内就完成了工作，剩下的95%的时间却用来美化工作。

2、Axure简介

Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。

Axure 的第一个版本诞生在 2003 年的 1 月，到目前最新版本为7.0，本文讲述的是6.5稳定版本，7.0版本推出了很多新的功能，有兴趣的可以在学会6.5的基础上再自行研究。

但要注意的是当用7.0的版本打开6.5的版本设计的原型时会自动升级，以后用6.5版本将无法打开，因此打开原型时请确认你的版本是6.5的。

Axure是一款优秀的Web原型设计工具，产品经理都很喜欢它，也很容易上手，就我的经历而言，要学会使用这款工具，大概只需花费3天左右时间。

因此所有有兴趣的朋友都应该花点时间来学习一下，用很短的时间增加一门技能何乐而不为呢？

当然，要把它运用的炉火纯青，肯定还是要多练习，多上坛子看看别人优秀的设计了。

这里扯远了，下面详细介绍一下常用的操作，帮助大家少走弯路，更快入门。

3、软件安装

Axure是使用.NET开发的，因此在使用之前请确保你的机器安装了.NET Framework4.0。

Axure正版需要花149美刀购买许可授权。不过在天朝有天朝的福利，已经有仁人志士发明了长期破解汉化版，真是得来全不费工夫。

可以到51CTO、CSDN下载绿色汉化版。

下载后，先运行 !)AxureRPPorable.exe 完成初始化，然后执行主程序 AxureRP.exe 即可，非常方便。

4、软件界面

Axure 的软件界面总的来说，可以分为 9 大模块

1. 菜单栏：和大部分的软件界面一样，都是一些常规的文件、编辑、视图…

2. 工具栏：是页面进行编辑的一些快捷操作，主要有字体设置、大小设置、页面显示大小和 Axure 本身自带的一些快捷操作等

3. 站点地图：呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作

4. 部件区域：组件集中地带：矩形组件、图片组件、动态面板组件…使用方式是直接拖动部件到页面编辑区域

5. 母版区域：共用，复用

6. 页面编辑区域：拖动相关的部件进行线框图编辑和交互具体的实施

7. 页面交互区域：设置页面的属性，一般不需要设置

8. 部件属性区域：组件的注释、组件的交互、组件的属性编辑

9. 动态面板区域：设置动态面板的可视与隐藏

5、文件格式

.rp：原型设计文件

.rpprj：原型设计工程文件，一般多人协作时为此格式

.rp的文件可以导入到.rpprj的工程内

6、生成原型

按F5键即可对你的设计生成原型

Ctrl+F5键的作用是在已经生成原型的基础上，如果只修改了某一页，可以用它来只重新生成修改的部分，这样在页面比较多的时候可以避免全部重新生成，节约生成的时间。Ctrl+F5后回到浏览器刷新页面即可看到修改后的效果。在实践中发现，母板页进行修改后，用此功能无效，必须全部重新生成才能看到修改母板页的效果。

7、控件

上图是Axure提供的所有部件，原型设计时会经常需要拖拽这些部件到设计区，下面说下常用的部件：

文本面板：给页面添加文字

图片：给页面添加图片

矩形：经常用于给页面进行分区，增加美观，相当于其他软件称呼的层、容器、面板

按钮：给页面添加按钮

文本框：给页面添加输入的文本框

表格：常用于模拟DataGrid

其他的就不多说了，都很简单，大家拖出来看看效果就行了，应该比较好理解。

最后重点讲一下动态面板，原型设计中，几乎所有的交互都需要由动态面板来完成，因此要想设计出好的交互式原型，必须要熟练使用动态面板。

动态面板就相当于一个占位的容器，这个容器可以放N个面板在里面，然后可以根据需要在切换要显示的面板。

任何设计的内容都可以转换为动态面板或者母板。但是转换为动态面板后将不能再转换回去，只能用ctrl+Z撤销修改，切记。

通常在初学时，考虑的不是那么完善，有可能在设计好以后需要加入交互，这时进行转换就可以了。

8、事件

在使用了动态面板后，还不足以使原型动起来，这时候需要事件的驱动。Axure中给事件添加一个行为称之为用例。

上面是一个用例列表，里面有很多可用的行为，应该比较好理解，大家可以多去实践一下。上面的重点标注了触发事件，这个是母板才有行为，有了这个行为母板才能活起来，这个行为可以继承到母板所使用的页面。很多人在最初使用母板时会为母板在多个页面间产生不同的行为而头疼，有了这个，就可以迎刃而解了。

9、变量

如果还需要更灵活，那么你就可能需要使用变量了，比如点同一个按钮，根据不同的场景，弹出不同的提示。

首先，在管理变量中添加变量，然后根据需要在事件中设置变量即可

10、母板

当发现一些设计的元素会被多个页面重用时，可以考虑做成一个母板，这样可以增加公用性，如果需要更改也只改动一处就可以了（母板大小位置最好不要有变动）

母板分为3种：

标准：拖到页面后不能编辑母板里的元件

背景母板：这种母板拖入页面后的位置是固定的，并且放在最底层。这种Master适合做页面模板，例如在制作手机应用的原型时，可以拿来做手机外形的效果。

自定义元件：拖到页面后与母板脱落干系，可以重新编辑里面的元件，相当于复制了一份模版的元件。

大家可以根据不同的情况选择最好的方式。

11、多人协作

有时候，我们需要多人合作完成一个Axure原型。传统的方法是每个人编辑自己的部分，再粘贴到一起。其实Axure内置了SVN，如果已经有SVN服务器，我们需要做的就只是去创建项目，然后其他人从SVN映射项目即可。

具体创建项目，获取项目的方法请参考：http://www.360doc.com/content/10/1210/11/1700927_76705276.shtml

12、其他小技巧

画面移动：

当 设计画面很大时，为了选取不同位置的组件，需使用垂直与水平的滚动条来定位，这使得选取组件的动作变慢，操作起来也不方便。可以试试这样，鼠标光标聚焦在 主操作区，按住键盘的空格键，此时鼠标光标会切换成手状，就可以像在PDF文件里那样抓着画面任意滑动，而且不会打乱任何组件的位置，方便操作。

组件重叠时选取下层的组件：

当多个组件重叠时，选取下层组件会很不方便，此时可以先左键选取最顶层组件，隔半秒左右(比双击稍微慢点)再以左键点一下顶层组件，将穿透上层组件，选取到位于下层的组件了 。

13、尾声

是不是很简单？大家在学习之余，可以分享下好的经验或者原型模版。由于时间有限，可能有些地方还没有讲清楚，如果有问题可以可以给我留言。我再逐步完善本文档。

希望大家从原型设计中受益。

示例下载

原型设计学习.rar

学习网站

http://www.axure.us/category/axure/course/

http://www.webppd.com/

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/17245167/viewspace-1283655/，如需转载，请注明出处，否则将追究法律责任。