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

第三节 变量详解

一、概述

某小白:请问谁知道Axure中变量和函数怎么用啊?

某老白:原型还要用变量和函数?搞得太复杂了吧?

以上是Axure群中的常见对话。

很多人在自己的理解角度认为变量和函数是比较复杂的知识,不但学起来耗费精力,在产品原型中使用也是多此一举,所以干脆不举...呃...是不用。

这就是理解过于肤浅所产生的偏见。

存在即合理。

既然软件中提供了这样的功能,那么就一定是基于需求的。

实际上,使用变量与函数的目的是:提高原型制作效率和解决问题。

举个例子,页面垂直滚动到一定位置时,出现返回顶部按钮。

这个交互就必须使用系统变量才能够实现。

因为,在这个例子中,我们需要获取浏览器中页面Y轴滚动距离的值。

变量与函数主要作用是帮助我们进行【值】的运算。

在之后的内容中,我们能够看到很多使用变量与函数的示例,大家可以从中体会使用变量与函数后,原型内容会变得更加容易修改、扩展以及重用。

二、概念

变量分为两种:系统变量和自定义变量

而自定义变量又分为两种:全局变量和局部变量

在使用变量之前,我们需要先理解变量的概念,对概念了解了,使用的时候才会有清晰的思路。

不要只是看到“变量”这个名称就浑身酥麻了,当我给你深入浅出的演示一番,你就会知道,原来变量如此简单。

实际上很多人都使用过变量,只是自己不知道而已。

相信很多读者都使用过Excel这款软件。

那么,在Excel中,想在C1单元格对A1和B1单元格的数值求和,你需要怎么做呢?

我们会在点中C1单元格后,在“fx”(熟悉吧?)的后方的输入框中输入“=A1+B1”。(图5-20)

等号“=”后方写算式,这是Excel的公式格式,就和我们在Axure RP中中括号“[[]]”中间写算式是一个意思。

注:算式,又叫算术表达式,感谢小学数学老师!

那么,算式中的“A1”和“B1”是什么呢?

如果我们在A1和B1单元格中分别输入“3”和“5”,此时算式中“A1”就是“3”,“B1”就是“5”。

也就是说算式中“A1”和“B1”是两个数值。

好了,记住他们是数值。

接下来,我们在A1和B1单元格中分别输入“4”和“6”,此时算式中“A1”就是“4”,“B1”就是“6”。

如果看到现在,你的理解没有问题,你应该知道算式中的“A1”和“B1”是两个可以改变的数值。

优秀的产品经理善于使用搜索引擎,让我们来百度一下。(图5-21)

狮屎胜于熊便啊!

算式中的“A1”和“B1”都是变量,具体来说是局部变量,因为它们只作用于一个Excel工作表,而不是整个工作簿中。“A1”和“B1”只是两个固定的变量名称,他们的值是变化的。就好像“班长”这个称谓,在不同年级可能代表不同的人。

那么,为什么算式中会使用变量呢?

因为我们没办法把直接把单元格写在算式中,只有通过变量去代替。

当我们把变量名称写入公式,就能够获取到变量的值,参与公式的运算。

所以说,变量的用途是帮助我们进行值的运算

三、局部变量

什么是局部变量呢?

局部是指变量的有效作用范围。

还是以Excel举例。

我们在表“Sheet1”的公式中所写的“A1”,只会在表“Sheet1”中有效,在其他表的公式中即便也有“A1”,它也不能获取到表“Sheet1”中A1单元格的内容。

Excel工作簿中能够包含多张表,在表“Sheet1”的公式中所写的“A1”只做用于当前表,而无法作用于工作簿中的所有表,所以它的作用范围是局部的,也就是说“A1”是个局部变量。

我们在Axure RP中会经常需要局部变量参与公式运算。

变量都有三个必须的操作:

  • 创建:也就是命名,给变量取一个名称,要求25个字符以内的数字、字母以及下划线组成,首位字符不可以是数字。
  • 写入:变量不写入内容,就会永远为空值,我们要把需要获取的内容写入变量,才能够让它在公式中参与运算。
  • 读取:创建与写入就是为了能够在公式运算中读取,所以在公式中我们写入变量的名称就代表一个指定(写入)的数值。

我们来看一个案例。

案例16:商品数量递增与递减

在电商网站的购物车页面中,我们经常能够看见一个商品数量的输入框,当我们点击加减号的时候,可以对数量进行增减,同时商品的小计也会跟随着改变。(图5-22)

这里就会涉及到计算小计金额的公式运算。

1、准备好相关的元件。(图5-23)

注意每个元件的类型,对于把矩形当文本框使用的行为,是很令人伤心的。

2、为元件添加交互。

交互有两个,一个是点击加号按钮的交互,另一个是点击减号按钮的交互。

(1)点击加号按钮时,设置文本框“Num”的文本为“Num”文本框当前的数值加1;

(2)点击减号按钮时,设置文本框“Num”的文本为“Num”文本框当前的数值减1;

(3)无论数量如何变化,都要设置小计“Subtotal”的文本为价格“Price”乘以数量“Num”的积;

(4)点击减号按钮时,当前商品数量必须大于1,才能会有减少的交互动作。

我们根据上方的四个交互描述添加交互事件。

步骤1

但是,是不是第一个交互动作设置到【值】的时候就卡住了?(图5-24)

输入框中应该写什么?这个值是一个固定值吗?

很显然不是固定值,因为如果你填写一个“2”,每次点击加号按钮,商品数量都是2。

所以,这里应该填写一个计算公式,一个计算当前数量加1的公式:[[当前数量+1]]。

但是,当前数量如何获取呢?

当前数量不是一个固定值,所以它是一个变量。

我们点击输入框后方的“fx”按钮,打开【编辑值】的界面,在编辑值的界面中,我们需要点击【添加局部变量】按钮创建一个变量,并设置名称为“n”。然后,通过选择选项将 “Num”的【元件文字】写入变量“n”中。最后,在公式中读取变量“n”中写入的数值进行运算。(图5-25)

此时,预览原型,加号按钮的第一个交互已经可以呈现。

步骤2

我们可以将加号按钮的交互复制给减号按钮。

点击加号按钮上的【单击时】交互事件,通过上下文菜单或者快捷键<Ctrl+C>,进行复制。

再选中减号按钮,通过快捷键<Ctrl+V>键进行粘贴,或者通过点击【新建交互】,找到【单击时】后方的【粘贴】按钮进行粘贴。

最后,点击交互中【值】的设置,将公式"[[n+1]]"修改为“[[n-1]]”。(图5-26)

这里需要注意一点,复制交互的同时变量的设置也一起进行了复制,单独进行减号按钮的交互设置时,不可省略变量的设置,也就是说仍然要按步骤1的完整过程进行交互的添加。

另外,局部变量“n”的作用范围只是在一个【值】的运算中,所以复制添加的交互中,虽然变量名称同样为“n”,但也与步骤1中设置的变量“n”没有任何关系。就好像两个不同的家庭中,有姓名相同的人一样,隔壁老王即便跟你同名也不能...吃你们家饺子。

步骤3

为了能够更简单的实现交互,在元件准备时,价格元件“Price”中只包含数字,不包含人民币符号。

以加号按钮为例,点击时我们仍然要进行公式运算,这一次的公式是:[[价格元件的文字*数量元件的文字]]。

所以,关键在于如何获取价格元件与数量元件的文字,把它们放入公式。

这一次,我们需要添加两个局部变量。

不过,这一次的交互事件,我们添加到哪个元件上呢?

其实,不管点击加号按钮还是减号按钮,元件“Num”的文字都会发生变化。而“Num”是一个文本框元件,它有一个独特的触发叫做【文本改变时】,所以这个交互,我们就添加到元件“Num”的【文本改变时】交互事件中。

添加【设置文本】的动作,设置小计元件“Subtotal”的【文本】【值】。(图5-27)

然后,点击【值】输入框后方的“fx”按钮,在编辑值的界面中添加局部变量“p”和“n”,并分别写入元件“Price”和“Num”的【元件文字】。最后,在公式中通过变量名称读取数值参与运算。(图5-28)

注:小计的金额前面带有人民币符号,所以在公式的左侧外部,要带有一个人民币符号。另外,商品小计的计算结果还存在一些问题,不能够保留两位小数,我们将在函数部分继续完善。

步骤4

减号按钮不像加号按钮一样,可以不加限制的递增,而是只有一种情形下才能够递减。

这种情形就是“商品数量大于1时”。

所以,我们需要在减号按钮【单击时】的交互事件上点击【添加情形】的按钮,设置必要的条件。(图5-29)

到这里,这个案例的交互就已经全部完成。

从这个案例,我们能够看出,使用局部变量只是因为它能够帮助我们获取公式运算中所需要的一些关键数据内容,仅此而已。

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 头像
    深入浅出,学到了
    文海2019-05-08 14:29 回复