Axure RP 9萌新修炼手册-第五章-交互应用(1)

第五章 交互应用

第一节 条件判断

一、条件编辑

在基础应用的交互部分,我们已经了解,用户的一个操作可能会包含多种情形。(图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 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(1)

喜欢 (3)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 头像
    好文章,我在群里面看到一个三级菜单得元件,用得中继器跟动态面板,大神给讲解一下啊,怎么弄得
    围剿2019-05-07 15:58 回复