从零开始学Aure：条件、变量与函数

2016-04-11 13:26:00

如果你熟悉了Axure的部件库，那么你可以得心应手地画出心目中产品的线框图；如果你会用Axure的母版、动态面板功能，那么你应该能够画出一些简单网站的原型图；但只有你精通了Axure的条件逻辑、变量、函数等高级交互，才能将心中的产品形态恣意地通过这款软件表现出来。

下面小喵就给大家仔细梳理一下Axure的高级交互内容，以及如何运用Axure这款软件自带的界面规范文档来提高交付的原型在开发和设计阶段的精准度。

条件生成器

在Javascript语言中的if-then-else语句是最常见的条件逻辑。

And和Or是条件运算符，用于连接两个或两个以上的句子。

在用例编辑器顶部有『新增条件』的选项，点击后进入条件生成器。

当我们进入条件生成器对话框时，首先看到的是满足以下『全部』或『任意』一个条件，在描述框中我们可以看到，如果选择『全部』则是『And』，如果选择『任意』则是『Or』。

条件生成器的多个条件控制

条件生成器允许用户创建条件表达式，将你需要满足的条件通过填空的形式告诉Axure，如下图：

条件生成器和可创建的表达式

其中，值的类型包括：

这些值的类型不用可以记住，用的时候参照就好了，用多了就记住了。

Step 1

以简书的登陆框为例，截图登陆框，并拖入『单行文本框』覆盖掉原有的两个文本输入框，分别命名为『用户名输入框』和『密码输入框』，将『密码输入框』的属性设置为密码，这样输入密码时会自动变成不显示的状态；拖入图片热区，完全覆盖掉原有的登陆按钮，并命名为『登陆按钮』。

制作登陆框

密码输入框的属性设置为密码

Step 2

假设用户名为zongxiaomiao，密码为123456。点击『登陆按钮』部件，建立两个条件用例：

设置条件用例

因为我们需要同时满足用户名和密码都正确才能登陆，所以连接两个条件的是and而不是or，也就是满足全部条件而不是任意条件。

如果文本输入框里的文字同时满足了两个条件，我们就打开简书的主页，在链接——打开链接中输入外部链接地址为：www.jianshu.com。

如果同时满足两个条件则进入简书主页

Step 3

如果两个条件中有一个条件不满足，则在登陆框上显示如下字样：

登陆失败提示字样

我们将这个图片置于设计区域，将其设置为隐藏状态（右键——设为隐藏），并命名为『登陆失败提示』。

同时新增用例2，设置else if true时触发的动作时显示（我们默认加载页面时会隐藏它）提示登陆失败的字样，并且加入淡入淡出的动画，动画时间为500毫秒，这样加载时不会太生硬。

将新增动作设置为『显示』，配置为显示登录失败提示的图片

在文末可以下载案例和观看演示。

局部变量：顾名思义，局部变量即在局部的动作中生效。
全局变量：在整个原型中都有效。当一个数据从页面A传递到页面B时就需要全局变量。[br]
因此，局部变量可以有相同名称，而全局变量不能重复名称。默认情况下有一个叫『OnLoadVariable』的变量。变量名的命名规则是字母或数字，少于25字符，不包含空格。