第五章 交互应用
第一节 条件判断
一、条件编辑
在基础应用的交互部分，我们已经了解，用户的一个操作可能会包含多种情形。（图5-1）
不过，我们添加完情形之后（图5-2），某一种情形的交互执行，是需要我们通过手动选择的。（图5-3）
那么，我们能不能让交互的执行是自动的，就像真正的登录面板一样呢？
想要实现这样的交互效果，我们只需要给情形添加条件，让程序自动去判断是否符合条件，从而有选择的执行交互过程。
条件其实是对情形的具体定义。
案例12：登录信息非空验证（1）
例如，验证成功的情形，我们就需要定义符合什么样的条件算作验证成功；验证失败的情形，我们就需要定义符合什么条件叫验证失败。（图5-4）
使用思维导图进行交互分析。（图5-5）
当我们完成条件的定义，我们就可以在情形中添加条件。
点击情形名称后方的【添加条件】按钮，然后在打开的情形编辑界面中，添加条件内容。（图5-6）
1、添加“验证成功”这种情形的条件。
我们在最左侧的下拉列表中选择判断的内容类型，再选择带有这种内容类型的判断目标，然后选择比较关系，再选择右侧的内容类型以及目标。（图5-7）
当我们选择判断的内容类型为元件文字的时候，判断的目标就是元件；当我们选择的内容类型为文本的时候，判断的目标就是输入的值。
空值无需输入任何内容（包括空格）。
需要添加多个条件时，点击【+添加行】按钮，即可添加。
默认多个条件为并且关系。
注：条件设置的操作顺序建议从左至右，以免出现无谓的错误。
2、添加“验证失败”这种情形的条件。
我们会看到，程序已经自动为这个情形添加了【否则 如果 真】的交互语句。（图5-8）
如果一个情形的条件为“否则 如果 真”，意味着其它情形都不满足条件时，此种情形即满足条件。
这正是我们所需要的。
所以，条件为“否则 如果 真”的情形无需进行条件设置，程序会自动完成这个逻辑关系的建立。
注：案例中的密码输入框需要选中文本框元件，点击交互右上角的属性设置图标，在设置界面中将文本框的【类型】设置为【密码】。
二、逻辑关系
实际上前一个案例的条件定义还可以用另一种形式表达。
案例13：登录信息非空验证（2）
我们能够看到，在新的条件定义中，多个条件的关系是“或者”。（图5-9）
如果想将多个条件设置为或者的关系，可以在界面右上角的下拉列表中选择【匹配以下任何条件】。（图5-10）
按照新的条件定义，完成相应的交互设置，运行结果是一样的。
注：当前案例的情形中，第一个是“验证失败”，第二个是“验证成功”，与前一案例顺序相反。这句话显得多余，但是不交代一下，就会有人只把上个案例的条件设置直接改了，导致出现问题。然后，跑来艾特我…对于这种不加理解，只是一味模仿步骤的兄嘚，我一般会给一个“卸载软件”的答案。
三、条件分组
前面的案例，我们所添加的条件都只有一组。
一组条件是指在交互事件中按照由上至下的顺序，以一个“如果”的情形开始，到下一个“如果”出现之前所有情形的条件。
注意理解下面这句话：
在一组条件中，按照由上至下的顺序，只有第一个被满足条件的情形所包含的交互动作会被执行。
在我们实际应用当中，有些时候，对于用户的一个动作指令，会有多个反馈。
案例14：登录信息非空验证（3）
例如，我们在设计登录模块的时候，对于用户名与密码的非空验证，也可以同时给出错误提示。（图5-11）
任何一个文本框输入了内容，并点击登录按钮时，错误提示消失。
像这样的交互设计，我们就需要设立多组条件，以便给用户多个反馈。
接下来，我们一起完成这个交互案例。
1、准备元件
这个登录面板比之前的登录面板多了一个提示元件，提示元件的命名以数字编号区分。（图5-12）
2、添加交互
首先，使用思维导图进行交互分析。（图5-13）
注：建议新手使用思维导图软件进行交互分析，形成的图表也可以用于产品需求文档的交互描述中。
然后，根据交互分析，完成交互设置。（图5-14）
但是，完成的交互设置中，条件的逻辑还不符合我们的需求。
因为现在只有一组条件判断，不可能同时给用户两个提示的交互反馈。
实际上，第三个情形，也就是“用户名为空”的情形应该是“如果”开头。
这样前两个情形为一组，后两个情形为一组，才能够满足我们的交互需求。
所以，我们还需要在“用户名为空”的情形上点击鼠标右键，上下文菜单中选择最后一项【切换为[如果]或[否则]】。（图5-15）
将第三个情形切换为“如果”之后，交互设置中的条件判断被分为了两组，符合了我们的交互需求。
注：可能有读者觉得这个案例对于交互设置的过程讲解过于简单，只有一张截图。实际上这些交互设置的操作已经在前面的内容中做过讲解，都是一些固定的操作步骤，如果没有掌握，请翻回交互设置部分重新来过。这是剧情片，前后情节有关联，不要当成爱动片，以为可以跳着看。
第二节 值的运算
一、公式格式
Axure RP中【值】的设置可以写入运算公式。
运算公式需要写在两对中括号中。
例如，计算3乘以5，公式为：[[3*5]]。
我们可以通过一个简单的案例，尝试一下关于公式的运算。
案例15：获取算式计算结果
在画布中，我们放入一个矩形，让矩形鼠标点击的时候显示3乘以5的运算结果。
还记得如何添加交互吗？
如果忘记了，请回顾第三章第二节。
- 主体：矩形
- 触发：单击时
- 情形：不启用（不存在多种情形）
- 动作：设置文本
- 目标：当前元件
- 设置：值为“[[3*5]]”
为矩形添加交互之后（图5-16），预览原型，点击页面中的矩形，我们能够看到运算结果“15”。
接下来，我们做几个思考题。
- [[3*5]]+6-4结果是什么？
- [[3*5]]+[[6-4]]结果是什么？
- [[[[3*5]]+[[6-4]]]]结果是什么？
- [[3*[[5+6]]-4]]结果是什么？
如果不知道结果是什么，或者不确定自己的结果是否正确，可以使用前面为矩形添加交互的方法，将这些公式在Axure RP中验证一下。
最终结果如下：
- [[3*5]]+6-4：15+6-4
- [[3*5]]+[[6-4]]：15+2
- [[[[3*5]]+[[6-4]]]]：[[15+2]]
- [[3*[[5+6]]-4]]：[[3*[[5+6]]-4]]
从上面的思考题结果，我们能够看出以下规律：
- 两对中括号内部的公式会被运算出结果。
- 两对中括号外部的内容会和两对中括号内部的公式运算结果连接。
- 程序会从左至右依次寻找可计算的公式，进行运算后将结果与其它内容连接。
那么，为什么公式“[[3*[[5+6]]-4]]”中的“[[5+6]]”没有被运算呢？
过程如下：
程序先找到公式左侧两个方括号，再找到右侧两个中括号，开始对内部内容“[[3*[[5+6]]”进行运算；
程序发现“3*[[”不是一个有效的算式，无法计算出结果，所以将这部分内容原样输出；
然后，程序继续读取剩余内容“-4]]”，这部分内容仍然不能计算，同样保持原样输出。
所以，最终我们看到所有内容没有经过任何计算。
二、运算符
在Axure RP中进行【值】的设置时，我们可以点击值输入框后方的【fx】按钮，打开编辑值的界面。（图5-17）
在这个界面中，我们点击【插入变量或函数】按钮，就能够打开变量与函数列表。（图5-18）
在这个列表中，有多种分类内容，其中【数学】分类中，能够看到一些数学运算符。
这些运算符包括：
+：加法运算符
-：减法运算符
*：乘法运算符
/：除法运算符
%：余数运算符
有些读者可能不知道余数运算是怎么回事。
举个小学三年级上学期除法的例子。
27除以5的结果是：商数为5，余数为2。
那么，在Axure RP中，公式“[[27%5]]”的计算结果为“2”。
注：有时间回去看看自己的数学老师吧！
另外，在这个列表的末尾，是布尔类型的运算符。（图5-19）
布尔类型运算符是用于进行布尔运算的（废话）。
那么，什么叫布尔运算呢？
运算公式“[[1<2]]”或“[[2>=3]]”都是布尔运算，也就是对运算符两侧的值进行比较。
布尔运算的结果只有“true”或“false”，即真值和假值。
在之后的条件表达式中，我们会用到布尔运算符撰写条件。（不用头疼，学会只需一袋烟的功夫。）
以下是各个布尔运算符的含义：
==：比较两侧的值是否相等或相同。
!=：比较两侧的值是否不相等或不相同。
<：比较左侧的值是否小于右侧的值。
<=：比较左侧的值是否小于等于右侧的值。
>：比较左侧的值是否大于右侧的值。
>=：比较左侧的值是否大于等于右侧的值。
&&：将多个表达式连接到一起，表示并且的关系。
||：将多个表达式连接到一起，表示或者的关系。
对于这些运算符，只需先有个印象，保证使用它们的时候能够找到即可。
【提示】图书案例源文件及素材，请关注微信公众号“chanpinban”后，回复“萌新手册”获取。
~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~
小楼老师全新打造Axure RP 9精品课程，以独有的教学方法与技巧，帮助你以最短的时间高效的完成学习目标。
《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】
