第五章 交互应用
第一节 条件判断
一、条件编辑
在基础应用的交互部分,我们已经了解,用户的一个操作可能会包含多种情形。(图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 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】