快速原型设计工具-Axure

sf2gis@163.com

2016年1月5日

2016年1月7日添加闪烁效果

2016年1月15日增加团队项目

1  目标：快速构建GUI，具备基本演示功能，帮助确定界面。

能够模拟正式程序，具有交互功能（演示），基本接近真实产品。

2 原理：使用HTML+JS生成基本网页，模拟简单逻辑。

Axure使用常用的控件和jQuery进行逻辑功能，模拟交互，产生较为真实的交互体验。

3 流程：安装Axure，新建网站，设计页面，预览，发布

安装Axure：官网http://www.axure.com/ ，绿色版(http://www.cr173.com/soft/31607.html )。

3.1 新建网站：File-》new会自动创建一个网站，包括Home和三个子页面。

3.2 设计网页：首先使用铅笔在纸上绘制线框图。然后在Axure中拖动控件（Axure中也叫元件，Widget等，一个意思）设计网页。

设置控件名称和属性：控件名称在最上面，属性在属性框中设置。

为控件设计事件响应：点击控件-》在右侧的事件框中添加相应事件。

3.3 预览：F5可以在默认浏览器中查看HTML。

3.4 发布：发布为HTML或Word文档。

3.4.1发布HTML：Publish-》Generate HTML Files。

Chrome需要下载插件（chrome不允许本地文件调用（认为是跨域））。

IE没有成功。

3.4.2发布World文档：Publish-》Generate World Document。

World文档包括各个页面、分页面的控件等截图和描述。

4 方法：

参考：http://www.woshipm.com/rp/39203.html

http://jingyan.baidu.com/article/7c6fb4285f471580642c9029.html

http://www.doc88.com/p-5718140580162.html

http://bestwishtowzz.blog.163.com/blog/static/214565177201332455420553/

4.1 事件模型：事件使用分支设计，一个事件可以指定多个独立的分支或条件分支。

4.1.1条件事件：在事件选项对话框中选择添加条件，可以添加多个case，每个case执行一个条件。

4.1.2页面事件：IDE中下部选项框的中部页面，Page Interactions，可以设置整个页面的事件。

参考：

http://zhidao.baidu.com/link?url=mm84xjik6EBaiE_7eBAxvAll1zeEcmAnky2-59a9bePVI62HGYSRNrPSKk1CQ3YvRRWIQBUmcp9xcPIay-mGhKqVMI3q8SnrM_76hmed18G

4.1.3部件事件：IDE右上角选项框第一个页面，Widget Interactions，可以设置部件的事件。

4.2 模板Master：在Master中内容可以作为模板组件添加到其它页面进行复用。

添加Master组件：点击Master的Add按钮，添加一个组件。设计组件。

复用Master组件：右击组件->添加到页面，选择要将组件添加到的页面。指定页面将全部添加组件。

 

4.3 隐藏、显示面板DynamicPanel

参考：http://www.doc88.com/p-6983213896444.html

动态面板可以动态的显示或隐藏，并设置切换时的动作。

选择事件的响应函数对面板的显示设置，可以显示、隐藏或切换。

可以设置切换时的动画效果。

可以设置当前按钮在面板隐藏后的动作，是否随面板的显隐动态的改变位置。也可以设置切换时的动画效果。

添加部件：双击面板-》选择State-》在State编辑部件。

4.3.1 闪烁效果：参见：闪烁效果：在OnLoad（）时设置Panel为Toggle：触发自动闪烁，OnShow（）和OnHide时也设置Toggle()（自动闪烁）。

4.3.2复制Master：Duplicate-》page只复制当前页，branch所有子页面都复制。

参考：http://blog.csdn.net/fyqcdbdx/article/details/7227323

4.4 导入部件库：使用特定的组件设计更加保真的界面

参考：http://jingyan.baidu.com/article/870c6fc32f8c8fb03fe4be82.html

下载部件库，解压：http://pan.baidu.com/s/1dDOMjPf

点击左侧中部的Widgets面板-》LoadLibrary…-》加载.rplib模板库。

4.5 变量：全局变量和局部变量

4.5.1目标：用于不同页面间数据传递及部分信息的读写。

4.5.2原理：全局变量和局部变量都将设置于data.js中，并设置为相应的值。可以在事件中使用变量控制和显示。

4.5.3流程：添加变量，设置变量，使用变量。

添加变量：Project->global variables,弹出的选项卡中添加变量名和默认值。

 

设置变量：在事件对话框中选择Variables->Set Variable Value，在变量列表中选择要修改的变量，设置变量的值。

使用变量：在事件对话框中设置值的文本框右侧有个fx，点击后进入编辑对话框，点击Insert variable and function，选择需要的变量。

4.5.4方法：本地变量在fx编辑对话框中add locate variables中添加。

4.6 导入页面：导入其它页面或导入相同页面进行替换

File->Import from rp file->选择来源.rp文件，将显示所有页面供导入。

选择导入页面-》选择导入页面的方式，如果本地不存在导入的页面，则默认是add，如果本地存在，则默认是Replace替换本地页面。

 

导入页面后会选择导入母版、样式、范围、变量等，如果设置了相关的内容，请勾选（默认不选）。

参考：http://www.webppd.com/thread-9401-1-1.html

4.7 显示网格辅助线：Gridand Guides

参考：http://blog.sina.com.cn/s/blog_5f33f0f50101l7cm.html

Arrange-》Grid and Guides-》show grid显示网格线（默认不显示）。

Arrange-》Grid and Guides-》grid settings，可以设置网格线的样式。

Arrange-》Grid and Guides-》create guides创建辅助线（默认无）。也可以设置样式。

4.8 备份与恢复

备份：File-》Backup Settings，可以设置备份时间，默认是15分钟。

恢复：File->Recover file from backup，可以从备份文件库中恢复。

4.9 团队项目：自带SVN服务器

参考：http://jingyan.baidu.com/article/ac6a9a5e643e432b653eac1b.html

4.9.1目标：多人协作共发同一个项目，每人负责其中的一部分页面。

4.9.2原理：Axure7自带SVN服务器，创建团队项目后将自己创建SVN服务器仓库（团队项目路径）。在Axure中可以操作SVN版本库。

4.9.3流程：创建团队项目，共享团队项目，checkout本地操作，checkin合并到仓库，打开共享项目，检查更新。

4.9.3.1  创建团队项目：菜单-》Team-》Create TeamProject From Current File打开团队项目创建对话框向导。在对话框中依次输入项目名称，团队项目路径(要与本地项目路径不同)，本地项目路径。

  

4.9.3.2 共享团队项目路径：右键团队项目属性-》共享，将团队项目路径设置为共享，其它团队成员将访问此地址。

4.9.3.3  checkout本地操作：从本地项目路径打开项目，在需要编辑的页面右键-》checkout，编辑。

4.9.3.4  checkin合并到仓库：右键checkout的页面-》checkin，更改将合并到共享仓库。

4.9.3.5  其他成员打开共享项目：Team-》Get and Open Team Project-》输入共享的团队项目目录-》输入本地目录-》打开团队项目，可以看到上一步的更改。

4.9.3.6  检查更新：一个成员修改后合并到团队项目，其它成员点击页面右键或Team-》Get all changes from Team Directory可以获取更新。

 

4.10 流程图

参考：http://www.laixue8.com/ixd/view.asp?ArticleID=483&Page=5

4.10.1目标：页面使用流程等逻辑图，用于理解和说明原型。

4.10.2原理：流程与原型结合，从逻辑层面说明原型。

4.10.3流程：绘制流程纸图，设计原型，创建流程图。

4.10.3.1 绘制流程纸图：使用铅笔绘制纸图，并以此作为原型的基础。

4.10.3.2 设计原型：设计原型图。

4.10.3.3 创建流程图：以纸图为基础，将原型生成流程图的引用页，生成流程图。

创建流程图：添加新页面-》右键-》Diagram Type-》Flow。

在左侧部件栏中选中Flow，绘制流程图。

原型图中相关的页面可以直接在页面上右击-》GenerateFlow Diagram-》standard，生成处理框。或者绘制框后在右侧属性框中选择引用面。

  

5 示例

5.1 闪烁效果：在OnLoad（）时设置Panel为Toggle：触发自动闪烁，OnShow（）和OnHide时也设置Toggle()（自动闪烁）。

可以设置动画效果和延时提升体验。

 

5.2 SVN（不推荐）：由于Axure自带SVN，共享项目就是一个SVN的服务器版本，一般采用将团队项目设置为共享目录实现团队合作，也可以将团队项目托管到SVN服务器实现SVN的二层版本服务。

参考：http://www.zhihu.com/question/23371280

5.3 图表绘制：结合Excel绘制图表

如果数据量比较大的图表，可以直接在Excel中处理好数据，生成相应的统计图表后，直接copy，然后在Axure中Paste生成Table（无格式）。

图则需要使用Image部件再指定图片文件。