【超级干货】Aure学习总结之功能篇

【文章摘要】作者学习Axure的笔记整理，超实用！

作者信息

姓名：潘倩倩（Maria）

本文为原创作品，仅供学习交流使用，未经允许，请勿做商业化用途。

（一）变量应用

本章节以实现“网页倒计时”动画效果为例，了解变量的使用方法。

可登陆http://uyn25u.axshare.com查看演示效果，密码pqq123

1. 变量创建

Axure的变量有两种，一类是全局变量，在全局范围内有效，另一类是局部变量，只在定义它的部件范围内有效。

1.1 全局变量

全局变量主要用于实现不同页面间的数据传递。一个原型文件中，定义的全局变量建议不要超过25个。

位置：线框图——管理全局变量，可在管理界面，增加、删除、编辑全局变量。

1.2 局部变量

局部变量一般在交互中被使用，因此可在编写交互事件时定义。

1）可在条件分支中定义，如下：

在出现 的地方，均可点击进入变量编辑页面。如下：

下面的区域为局部变量编辑框，可添加、删除、修改局部变量，并可设置变量的初始值。

上面的区域为变量应用区，可设置变量及对应的函数表达式。

2）可在值编辑器中定义，用例编辑器——设置变量/部件值——打开设置值编辑器。

2. 变量应用

下面以实现“网页倒计时”动画效果为例，了解变量的使用方法。

【效果描述】

从01时01分00秒开始倒计时，动态显示倒计时效果，如01时00分59秒、01时00分58秒、01时00分57秒……

【设计描述】

倒计时的持续需要循环的支持，我们可以利用动态面板的显示和隐藏事件来实现循环。

1）在面板显示时改变相应数值，然后让面板隐藏，触发隐藏事件。

2）面板隐藏时等待1000毫秒用来实现读秒效果，再让面板显示，触发显示事件。

3）如此循环往复，即可实现倒计时效果。

【实现过程】

1）将需要的部件拖动到页面上。

6个文本面板，其中3个用来标识时、分、秒，实现数字的动态显示；

1个开始按钮，触发倒计时；

1个动态面板，实现循环。

2）设计开始按钮点击事件。

切换动态面板可见性，触发动态面板显示事件。

3）设计动态面板显示事件。

实现倒计时效果。当分减1时，秒从59开始；当时减1时，分、秒都从59开始。

当时、分、秒的长度小于2时，如为5，则在前面补0，变成05。

切换动态面板可见性，触发动态面板隐藏事件。

4）设计动态面板隐藏事件。

先等待1000ms，实现读秒效果，再切换动态面板可见性，触发动态面板显示事件。

至此设计完成，可运行看执行效果了~~~

其实，上述动态效果也可以用3个全局变量实现，不过对于页面较多、交互效果较为复杂的原型而言，能用局部变量实现的，尽量不要用全局变量，因全局变量数量有限，且全局变量运行效率没有局部变量的高。

3. 逻辑条件切换

当一个交互事件有多个条件分支时，后续的条件表达式默认为“Else if…”，如果需将其改变为“If…”，则选中对应条件分支，点击“切换IF/ELSE IF”即可，如下：

（二）母版及自定义事件应用

Master（中文翻译为母版或模板），是一组在设计过程中可以被重复使用的控件集合，即共享模块。Master可以被放置在页面或其它的Master中，只要Master做了修改，其它使用到这个Master的地方（引用实例）也会跟着修改。

熟练掌握Master可以提升企划的速度跟效率，并使原型更易于维护及管理。

1. 母版创建

母版创建方式有以下两种：

1.1 母版面板

可在母版面板中增加、删除、修改母版，并通过文件夹的组织，对母版进行分类管理。

若在操作界面中没看到母版面板，可点击视图——面板，将“母版”打钩，或重置视图。

1.2 转换为母版

选择对应的控件集合，鼠标右键——转换为母版，即可在母版面板的根目录下生成一个母版。

2. 母版应用

方法一：像使用普通控件一样，将母版拖动到页面上即可。

方法二：选中母版，鼠标右键——新增页面，在弹出框中选择需要引用的页面。

鼠标右键——从页面删除，可将母版从选定的页面中移除。

鼠标右键——使用报告，可查看母版的引用情况。

2.1 拖放行为

每个母版有3种拖放行为可选择（选中母版，鼠标右键——拖放行为），具体如下：

任何位置（Normal）：母版可以被移动并放置在页面的任何地方，对母版所做的修改会在所有的引用实例中同步更新。常用于制作页眉、页脚、导航等。

锁定母版位置（Place in Background）：母版应用在页面中时，会处于页面的最底层并被锁定。引用实例中所包含控件的位置与在母版中的位置相同，常用于作为样板、布局、底板等。

从母版脱离（Custom Widget）：母版应用在页面中时，引用实例中的控件与原母版失去关联，引用实例中的控件可以像一般控件一样被编辑，就好像只是进行了复制和粘帖操作。常用于创建具有自定义属性、注释和交互的部件库。如：

这类母版就相当于我们自己定义了一些常用的控件。

3. 自定义触发事件

该功能仅限于母版使用。当发生以下情况时，可以使用自定义事件：

1）当需要在一个母版的不同引用实例上实现不同的交互时；

2）当和一个母版进行交互时，母版内的控件要对在母版之外的控件进行操作时。

3.1 创建触发事件

打开母版，点击：布局——管理触发事件，进入触发事件管理界面，如下：

一个母版对应一套触发事件。

3.2 触发事件应用

打开母版，在需要的控件上编辑交互事件。

如：在“操作”母版的【撤回】按钮，配置触发事件——OnMyBack；【删除】按钮，配置触发事件——OnMyDelete

这样，在该母版的所有引用实例中，都会显示自定义触发事件。根据需求配置对应的交互事件。

该页面运行时，点击“撤回”，交互为：OnMyBack——自定义事件2；点击“删除”，交互为：OnMyDelete——自定义事件1

该页面运行时，点击“撤回”，交互为：OnMyBack——自定义事件4；点击“删除”，交互为：OnMyDelete——自定义事件3

（三）中继器应用

中继器（Repeater元件）在Axure 7.0及以上版本才有。基于官方网站的介绍及自己的使用分析，我们可以将中继器理解为一个带有数据交互功能的表单，通过它，我们可以模拟数据的增加、删除、修改、查询效果，并可实现排序、翻页等功能，从而制作出高仿真的原型。

下面，我们通过一个简单的例子，来说明中继器的使用方法。（可登陆http://nmxwk9.axshare.com 查看演示效果，密码pqq123）

现在我们要实现如下功能：

1）初始化数据展示。

2）添加数据记录。

3）修改数据记录。

4）删除数据记录。

5）按“项目状态”查询数据记录。

6）排序：按项目名称、项目编号、项目状态、创建时间进行递增排序。

7）翻页：首页、上一页、下一页、末页的翻页功能。

1. 初始化

在需要的位置插入中继器控件，取名为“项目列表”。双击进入编辑页面，如下：

1）配置每一条数据记录的展示界面（即上图的上半部分），别忘了给每个控件命名。

2）中继器数据集：配置初始化显示的数据记录（列名暂不支持中文）。

3）中继器项目交互：初始化数据载入。

配置“每项加载时”的响应事件，如下：

点击“编辑文字”，进入编辑页面，如下：

4）中继器格式：配置布局、背景色、分页记录数、间距等基础属性。

2. 增加数据

在“新增界面”的保存按钮中，配置“鼠标单击时”响应事件，如下：

点击“新增行”，进入数据映射配置页面，如下：

利用局部变量将“新增页面”的每个数据项值传递到中继器中。

3. 修改数据

1）在“修改”按钮的响应事件中，通过局部变量，将中继器的对应数据传递到“编辑界面”。

2）标记需修改的数据记录，如下：

3）在“编辑界面”的保存按钮中，配置“鼠标单击时”响应事件，如下：

通过局部变量，将“编辑界面”中的最新数据传递到中继器中。

最后别忘了“取消标记行”，不然后续的编辑、删除操作会有问题。

4. 删除数据

1）在“删除”按钮的响应事件中，标记需删除的数据记录。

2）在“删除界面”的确定按钮中，配置“鼠标单击时”响应事件，如下：

5. 查询数据

在“查询”按钮中，配置“鼠标单击时”响应事件。

1）“项目状态”值不等于“全部”时，说明需要进行数据过滤，配置如下：

2）“项目状态”值等于“全部”时，说明不需要进行过滤，配置如下：

6. 排序

在排序下拉框的“选项改变时”响应事件中配置：

属性：指定排序的驱动字段。

排序：可按数字、文本、日期规则排序。

顺序：升序、降序、切换。

7. 翻页

下面以“首页”的配置为例：

Value：根据具体页码定位。

Previous:上一页。

Next：下一页。

Last：最后一页。

8. 运行

F5：在不生成html文件的前提下，对运行效果进行预览。执行速度快。

F8：生成html文件。

Axure 7.0新增了交互标识功能，用于标识配置了交互事件的控件，便于用户识别。

关键字：Axure, 变量, 面板

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！