资源描述
第5章使用Axure变量制作丰富的交互效果
课时内容使用Axure变量制作丰富的交互效果
课时
教学目标 理解全局变量、局部变量，掌握变量值在页面间传递，学会制作简易计算器教学重点变量值在页面间传递
教学难点
变量值在页面间传递
教学设计
1 .教学思路：通过实例引入变量的概念；通过多媒体演示和实机操讲解变量值在页面 间传递的使用；通过实战深入理解Axure变量。
2 .教学手段：多媒体+计算机.教学资料：教材、多媒体课件
教学内容
■石码登录送海金石
AuxreRP8原型设计工具里提供全局变量和局部变量，在原型设计过程中，这两种变量非常实 用，使用它们可以制作出更加丰富的交互效果，比方在制作原型过程中，遇到需要条件判断或者页 面间进行参数传递时，使用变量即可轻松解决问题，同时丰富原型的交互效果。
账户登录viviscan
viviscan
“雁，球》 ＞，女装＞男装 ＞ 电器城，大家电,手机＞最蠢;A Hi, viviscan 0＞积分1307 消息61 退出
忘记登录定码天猫T门All. CO门
用变量可实现登录页面和首页的参数传递全局变量和局部变量的使用
变量用于存储数据、传递数据以及条件判断，在登录网站的时候，用户登录成功后网站会把用 户名传递下一个页面显示，这就是页面间数据的传递，即从一个页面向另一个页面传递变量值。如 果需要在IE浏览器里显示原型，推荐使用25个或更少的变量。
• 全局变量：在所有页面里都可以使用，但是全局变量的值也很容易被修改掉，因为所有页 面都可以使用全局变量，也就有权限修改全局变量值，所以在使用的过程中需要注意。
• 局部变量：只供某个局部区域使用，比方在某个触发事件的某个动作中使用，其他触发事 件就不可以使用此变量。
• 变量设置规那么：变量名必须是字母或者是数字，并以字母开头，需要少于25个字符，且不 能包含空格，Axure会默认初始化一个"OnLoadVariable”变量。
单击工程菜单项的全局变量命令里，翻开“全局变量”对话框，在“全局变量”对话框中可以 新增或编辑全局变量，新增一个全局变量“count”，单击“+添加”链接，可以新增变量，变量值 默认为空，也可以为其赋值，如让“count”等于0。
|。|回
口登录X +J C ① 127.0.0. l:32767/start.ht… 的 ☆ Q O
登录页面
|o|回|一
口首页x 4-<--> C ① 127.0.0. l:32767/start.ht…匐☆。：
首页
5.3实战一一制作简易计算器
利用全局变量、局部变量的知识来制作一个简易的计算器，能实现加减乘除运算，进一步熟悉 变量的使用方法。
简易计算器
先来看简易计算器布局，将按钮按属性分为4组，分别是功能按钮、数字按钮、是运算符按钮 和等号按钮。进行这样的分组，页面层次就很清晰，可以快速地找到想要的按钮。分组设计、分清 层次，利用颜色比照差异，在做原型设计的时候，也要学会利用这种理念，把具有相同的属性功能区域设置为一组，通过颜色的比照，使页面的层次结构显得清晰。 下面开始来设计简易计算器的原型。
5.3.1 计算器布局设计
(1)拖曳一个“矩形1”元件到工作区域，将其宽度设置为377、高度设置为346,边框选择 第3个线宽，设置圆角半径为5,背景填充为灰色(#DADADA)。
ttas x8
8
100, I "2四 一］一一 13Pq 一 ［一一 400
样式交互说明
showtit
□只读
家用交互
计算器背景
(2)拖曳一个“文本框”元件到工作区域，将其宽度设置为348,高度设置44,在交互面板的 提示文本框中输入0,把文本设置为居右对齐，并且为只读状态，即文本框中不能进行除按键外的 任何输入，将标签命名为“show”。
文本改变时,设■可见性,JC
失去焦点时,设置可见性计算器显示框
(3)拖曳一个“矩形1”元件到工作区域，将其宽度设置为60,高度设置40,圆角半径为5, 填充背景色(#DF8045),将文本内容命名为“退格”，文本的字号设置为16号，加粗，白色字体, 按住Ctrl键，拖曳复制出两个同样的矩形元件，将其分别命名为“全清”“清屏”。
功能按钮
退格
全清
(4)拖曳一个“按钮”元件到工作区域，将其宽度设置为60,高度设置为40,文本内容为“7”, 字号为16号，字体加粗，复制出10个同样的元件并修改其文本内容，作为其他数字按钮。
E E E e rn rn rn pi ra □数字按钮
退格■全清■清屏
(5)拖曳一个“矩形1”元件到工作区域，将其宽度设置为70,高度设为40,圆角半径为5, 填充背景色(#999999),修改文本内容，利用代表除法，设置其为20号字，加粗、字体颜色 为白色，按住Ctrl键向下拖曳，复制出3个同样的按钮，分别修改按钮的文本内容。
FEE e e rn rn m pi s 口运算按钮
(6)拖曳一个“矩形1”元件到工作区域，将其高度设置为40,圆角半径设置为5,填充背景 色(#009900),文本内容修改为“二"，字号为20号，加粗、字体颜色为白色。
退格
全清
清屏
等号
5.3.2 数字按钮交互设计
(1)本节制作的计算器机制是两个数相加或者相减,需要把这两个数分别设置为变量"shuzhil ” “shuzhi2"，默认值设置为0；还需要设置一个变量来代表运算符号，把它命名为“yunsuan”，默 认值为0,说明没有输入任何运算符号；计算器可以输入整数或者小数，需要一个变量来说明它正 在输入的是小数还是整数，将该变量命名为“xiaoshu” ；然后设置“temp”变量和“changdu”变量, 分别用于存放临时值和代表输入的长度。
X全局变量凶
创立全局变量用于浏览器中页面切换时存储数据。如果在IE浏览器浏 览原型,推荐使用25个或更少的变量。
变量名必须是字母数字，少于25个字符,并且不能包含空格.
十添加
新增全局变量
当“yunsuan”的变量值为1时，代表加法运算，当为2时，代表减法运算，当为3时，代表乘 法运算，当为4时，代表除法运算。
当“xiaoshu”等于。的时候，代表正在输入的是整数，等于1的时候代表输入的是小数。
(2)选中数字1按钮，为其设置鼠标单击时的触发事件，在组织动作面板单击“启用情形”按 钮，弹出“情形编辑-矩阵：单击时”对话框。用于判断当前是给“shuzhil”还是给“shuzhi2”赋 值，还需要判断输入的是整数，还是小数。单击“十添加行”按钮，为运算设置条件，当变量“yunsuan” 等于0且“xiaoshu”等于。时，代表输入的“shuzhil”为整数。
如果值于 yunsuan == '*0" 并且值于xiaoshu == "O'
Mm
新增条件
(3)现在需要给“shuzhil”变量进行赋值，在添加动作面板单击“设置变量值"勾选"shuzhil” 复选项，在设置动作面板单击fx图标。由于需要“shuzhil”以10的倍数增长，即第一次单击1的 时候，输入框里显示的是1,当再次单击I的时候，输入框里变为11,所以插入表达式[[shuzhil*10+l]]。
X编辑文本在下方输入文本,变量名称或表达式要写在"[[]/中.例如：
-插入变量[[MyVar]],获取变量”MyVar”的当前值；•插入表达式[[VarA + VarB]],获取“VarA + VarB”的和；
•插入系统变量[[Pag
eName]],获取当前页面名称。
播入及量或函数[[shuzhil*10+l]]
扇陲・在下方创立用于插入元件值的局部变量，局部变量名称必须是字母数字.不允许包含空格。
添加局部及最取消
shuzhil 赋值
当第一次单击1的时候,“shizhil”默认值为0, 0*10+1=1,这时的“shuzhil”就变为1,当再 次单击1的时候，1*10+1 = 11,可以看到此表达式完全满足赋值的需要。
(4)接着将“shuzhil”的内容显示到输入框里，在添加动作面板中单击“设置文本”，勾选“show” 复选框，将“shuzhil”变量的值赋给它。
>;交互编辑器做添ID事件夕 十添加动作
*Q您接动作
翻开槌接关闭窗口
框架中翻开链接濠动到元件 元件动作
设置面板状手设置图片
设置送中设置列表选中项
启用朦用移动
蝴设置尺寸
设置不透明show "(fshuzhilll"
show "(fshuzhilll"
的秘
▼单击时
用例1
如果值于yunsuan ■■ "0"并且值于xiaoshu ■■ "0"
shuzhil 为"ashuzhil#104in"
设置文本
目凝
show
办
依
[[shuzhil]]
次取焦点
输入框赋值
(5)接着给“shuzhi2”变量进行赋值，新增一个用例，新增一个条件，当变量“yunsuan”不 等于。，且变量“xiaoshu”等于。时，代表“shuzhi2”为整数。
图5. 33新增条件
(6)现在需要给“shuzhi2”变量进行赋值，在添加动作面板中单击“设置变量值”，勾选“shuzhi2” 复选项,在设置动作面板单击fx图标，插入表达式“[[shuzhi2*10+l]] ”，接着将“shuzhi2”的内 容显示到输入框里，在添加动作面板中单击“设置文本”，勾选“show”复选框，将“shuzhi2”变 量的值赋给它。
计值器
1EZ
交互•说明
8 I.
8 Z
I
8
Ht
▼单击时 用例工
yunsuan 为"4" iSg^M
常用交互
鼠标悬停交互样式
其他运算交互
复制用例操作很方便，在添加用例的时候，如果用例功能接近，就可以复制用例，这样就能极 大地减少工作量，特别是在制作简易计算器的时候，有大量的重复用例。
等号按钮交互设计
（1）选中数字1按钮，复制其用例给数字2按钮，在数字1用例的基础上进行修改，因为单击 数字2按钮,所以需要修改表达式为“[[shuzhil*10+2]]”以及"[[shuzhi2*10+2]]”。
(矩形名称)懵
▼单击时
用例1
如果值于yunsuan == "0"并且值于 xiaoshu == W
shuzhil 为"[[shuzhil*10+2]]"
设置文本
show 为 “Hshuzhil””
用例2
否那么如果值于yunsuan != "0M并且值于
xiaoshu == "0"
shuzhi2 为"[[shuzhiZ*lO+Z]]"
设置文本
show 为"((shuzhi2]J"数字2按钮交互
（2）为等号添加鼠标单击时触发事件，等号需要判断当前是相加操作还是其他操作，新增条件, 如果“yunsuan”变量等于1说明是相加操作，要把“shuzhil”和“shuzhi2”两个变量进行相加，并 它的值赋值给“shuzhil”，把相加结果显示在输入框里，同时要把“shuzhi2”进行清零操作，把它 赋值为0,并把“xiaoshu”变量赋值为0,代表再次输入的时候，将先输入整数。
▼ 样式交互•说明
（矩形名称）tit▼单击时
I用例工 如果值于yunsuan == T
shuzhil 为"Ushuzhil+shuzhi2]「
设置文本 show 为 “[shuzhil]]”
shuzhi2 为"0"
设置变量值C阖》目标
xiaoshu 为"0"
用例1
否那么如果值于yunsuan == "2"shuzhil 为"[[shuzhil-shuzhi2]]M
相加操作
用例1
否为如果值于yunsuan == "2"
shuzhil 为"[[shuzhil-shuzhi2]]"
设杳文本
show 为 Fshuzhll】]”
shuzhi2 为"0"
xiaoshu 为"0"
用例1
否那么如果值于yunsuan == "3"
shuzhil 为"[shuzhil*shuzhi2]「
设置文本
show ^"[[shuzhil]]"
shuzhi2 为"0"
xiaoshu 为"0"
用例1
值于 yunsuan == "4"
shuzhil 为"([shuzhil/shuzhiZD"
设杳文本
show 为 Fshuzhll】]”
shuzhi2 为"0"
xiaoshu 为"0"
（3）将相加操作用例复制3次，让它们分别代表加减乘除4个操作。
图5. 39其他运算操作
（4）按F5键发布原型，单击数字1和2、运算符和等号可以实现运算器整数的加减乘除操作。
D计算器x +■> C ① 127.0.0. l：32768/start. html#id=yl5qq7&p- 鲍 ☆。：
发布原型
（1）理解Axure的全局变量和局部变量的含义以及使用方法。
小结（2）学会使用Axure变量值在页面间传递，实现高级交互效果。
（3）学会使用Axure变量来制作简易计算器，深入使用Axure变量。
简易计算器目刖只能完成整数的加减乘除操作，并且数字按钮只能使用1或者2, 请完成以下内容。
练习
(1)按照数字1的方式给其他数字按钮添加鼠标单击时触发事件。
(2)给点号按钮添加鼠标单击时触发事件，使计算器既能实现整数的加减乘除操 作，也能实现小数的加减乘除操作。
X全局变量创立全局变量用于浏览器中页面切换时存储数据。如果在IE浏览器浏 览原型，推荐使用25个或更少的变量.
创立全局变量用于浏览器中页面切换时存储数据。如果在IE浏览器浏 览原型，推荐使用25个或更少的变量.
变量名必须是字母数字，少于25个字符，并且不能包含空格.
十添加个上移 下移xflB除
新增全局变量
除了单击“添加”链接新增变量，还可以可以单击“T上移”或“1下移”链接调整变量的前后 关系以及单击“X删除”链接删除变量，要记住变量名必须是字母数字，并以字母开头，少于25个 字符，且不能包含空格。
局部变量应用在某个交互效果的设计过程中，比方单击页面载入时触发事件。在添加动作面板 单击“设置文本”选项，勾选“焦点元件”复选项，在设置动作面板单击仅图标。
口添加事件
页面栽入时
链接动作
翻开链接 关闭窗口 框架中打 濠动到元件
设置文本
焦点元件为“”
元件动
x交互编辑器x
目g焦点元件c
显示展藏
办设置面板
设置图片设置选中
设置列表选中项启用朦用 移动
徒转设置尺寸
置于顶层/底层 设置不透明 获取焦点设置文本动作
单击fx图标后，会弹出编辑文本对话框，单击“添加局部变量”链接，就可以新增一个局部变 量，还可以对局部变量重新命名和赋值，此局部变量只在给文本赋值的时候起作用，其他交互动作 无法访问该局部变量。
X编辑文本在下方输入文本,变量名称或表达式要写在"[[]]',中.例如:
■插入变量[[MyVar]],获取变量”MyVar”的当前值；-插入表达式[[VarA + VarB]],获取“VarA + VarB”的和；
-插入系统变量[[PageName]],获取当前页面名称.
插入变量或函数..
局朝源*~k右创立田干插入三性值的昌sr衣量 昌都参量幺秣必痣皇庄舟热李 木介;牛m仝由格
添力11^局部行LVAR1=元件文字0▼ x
取消新增局部变量
局部变量赋值的方式有很多，可以通过元件文字、选中状态值、选中项值、变量值、焦点元件 上的文字、元件的方式赋值。局部变量的变量名也必须是字母和数字，且不包含空格。
5.2变量值在页面间传递
变量的主要作用，就是在页面间传递变量值，在登录淘宝或者其他网站的时候，输入用户名和 密码，校验成功后，会跳转到一个新的页面，在新的页面里经常会看到“欢迎XXX”这样的文字； 在搜索框进行搜索的时候，输入搜索条件，当单击搜索按钮跳转到下一个页面的时候，同样会把搜 索条件传递过去，这些都是真实软件的交互效果。利用变量的添加，可以实现上面两个场景的交互 效果，给用户一种真实软件操作的感受，将用户带入到真实软件使用场景。
5.2.1 登录表单和首页实战演练
X | 牵 °, ।，一一 I200
（1）把Pagel页密重新命名为“登录”，拖曳一个“矩形1”元件到工作区域，将其宽度设置 为300,高度设置为260,填充灰色（#CCCCCC）背景。
元件母版
4- 3 ：
Default
荃本元件干
概要国 口
E觎登录表单背景
（2）拖曳一个“文本标签”元件到工作区域，将其重新命名为“用户名”，字号设置为16号; 拖曳一个“文本框”元件到工作区域，将其作为用户名的输入框，把它的标签命名为“name”。
样式 交互 说明
name
位查距寸 137x 187y
179w J 25 h
Text Field 不送雌▼o 1
Arial用户名输入框
Ast
交互
log
passwor^j
位重和尺寸
137
238
w425
179
Text Field
不送母性，
Arial
盟x ]
中
1
13
Normal
□ □ □
用户名
（3）拖曳一个“文本标签”元件到工作区域，将其重新命名为“密码”，字号设置为16号； 拖曳一个“文本框”元件到工作区域，将其作为密码的输入框，把它的标签命名为“password” ； 拖曳一个“按钮”元件到工作区域，将其宽度设置为200,高度设置为30,把它的文本内容重新命 名为“登录”。
Q0 Cj
s登录
I国首页I
§
元件母版
Q十31」
a j
Defaultc
英本元件;▼
密码输入框和登录按钮
（4）新建页面将其命名为“首页”，拖曳一个“矩形1”元件到工作区域，用于显示登录后传 递过来的用户命名和密码，命名其标签为"contentcontent
位重和尺寸
43x52y
300wJ170h
Box 1
不透明性，O1
丹帽▼首页
5.2.2 新增变量和赋值实战演练
(1)需要新增两个全局变量，用来保存输入的用户名和密码，单击“工程”菜单项，在弹出的 下拉列表中选择全局变量命令，在弹出的对话框中新增2个全局变量，分另U命名为“userName”和 “pwd”。
x全局变量L如果在IE浏览器浏
变量名必须是字母数字，少于25个字符，并且不能包含空格。
x删除
创立全局变量用于浏览器中页面切换时存储 览原型,推荐使用25个或更少的变量。
十添加个上移
新增全局变量
(2)进入登录页面，选中登录按钮，为其添加鼠标单击时触发事件，在添加动作面板中单击“设置变量值”动作，先给全局变量userName赋值，勾选“userName”复选框，单击fx图标。
展开做起的节点
中睢器动作
添如E序 序除排序 添加福 移除底选
设置当前显示页面 设置每页工程数量 添加行
取消标记 更新行 删除行
单击时
iSKW
userName 为""
目标
userName
x交互编辑器
其它动作设1目逐呼
频其它
壮武取消
取消
确定设置userName变量值
(3)进入到编辑文本对话框，把用户名输入框里的信息赋值给全局变量userName,新增一个 局部变量，第一个下拉列表中选择“元件文字”，它指的是把元件上的文字赋值给该局部变量，在 第二个下拉菜单项选择择用户名输入框“name”，再将该局部变量插入到内容的编辑区域，这样就可以 给全局变量userName赋值。
X编辑文本X在下方输入文本.变量名称或表达式要写在田]]"中.例如：
•播入变量[[MyVar]],获取变量"MyVar*'的当前值；•插入表达式[[VarA + VarB]],获取“VarA + VarB”的和；
• fe\M^S[[PageName]],获取当前页面名称.
植入》不成函数..
[[LVAR1]]在下方创立用于插入元件值的局部变量,局部变量名称必须是字母数字.不允许包含空格. 溢力嗝标a
LVAR1
=耐后
name
▼
X
userName 赋值
(4)用同样的方式将密码输入框里的信息保存到全局变量里。在添加动作面板中单击“设置变 量值”动作，勾选“pwd”复选项，在设置动作面板单击fx图标，新增一个局部变量，通过元件文 字的形式赋值，选择“password”元件，然后将局部变量插入到内容编辑区域。
>;编辑文本在下方输入文本,变量名称或表达式要写在"[(]]"中.例如：
•插入变量[[MyVar]],获取变量“MyVar”的当前值；•插入表达式[[VarA + VarB]],获取"VarA + VarB”的和；
•插入系统变量[[PageName]],获取当前页面名称.
[[IVAR1]]在下方创立用于插入元件值的局壁量，局部变量名称必须是字母数字,不允许包含空格.
LVAR1=元件文字0 password▼ x取消
取消
确定全局变量pwd赋值
(5)登录成功后需要跳转到下一个页面，在添加动作面板中单击“翻开链接”，在设置动作中 链接到下拉列表中选择“首页”，翻开在下拉列表中选择“当前窗口” O
X交互编辑器
簸加
▼单击时
设自变量值
userName 为"[[LVAR1]]"
设置变量值
pwd 为"[[LVAR1]]"
翻开链接
首页
簸加
▼单击时
设自变量值
userName 为"[[LVAR1]]"
设置变量值
pwd 为"[[LVAR1]]"
翻开链接
首页
首页
更多项选择项，
翻开在
当前窗口
0 淘）*。+疯KS昨 锢第）作
I打邢既I关闭窗口
框架中翻开链接滚动到元件 元件31作
显示府藏设置面板状态
设置图片设置近中
设置列表选中项启用煤用
移动行
设置尺寸设置不逶明
获取焦点取消
翻开首页
首页显示变量值
✓ >实战演练
（1）进入到百贝，登录成功后，原型会携带用户名和密码跳转到首页里，这样，首页在载入的 时候，就会把用户名和密码显示出来。为实现此效果，需要添加一个页面载入时的触发事件，在添 加动作面板单击“设置文本”，在配置动作面板的下拉列表中选择“content”，单击仪图标。
x交互编辑器泪织动作
泪织动作
夕*多加动作▼蓑入时
▼蓑入时
翻开链接
关闭窗口
框架中翻开链接
濠动到元件
设省文本
content 为""
日比 content
£S^
fi
元件动作 显示鹰双设置面板状态
设置图片设置选中
设置列表法中项启用用 移动
蝇 设置尺寸 置于顶层/底层 设备不透明 法取焦点取消
设置文本
（2）在弹出的“编辑文本”对话框中，单击“插入变量或函数…”链接，分别输入用户名 “username”以及密码“pwd”，单击确定按钮，这样就完成给矩形元件的文本内容赋值。
X编辑文本在下方输入文本,变量名称或表达式要写在"[[]]1,中.例如：
■插入变量[[MyVar]],获取变量”MyVar”的当前值；-插入表达式[[VarA + VarB]],获取'VarA + VarB”的和；
■插入系统变堇[[PageName]],获取当前页面名称.
插入差最或用户名:[[userName]],宏码：[[pwd]]
局期E・在下方创立用于插入元件值的局部变量，局部变量名称必须是字母数字.不允许包含空格.
添加局部变量取消
取消
插入全局变量
页面管理介绍
在前面的章节中，使用的都是元件的触发事件，而这次使用的是页面的触发事件，两者的区别 在于，一个是针对元件进行触发事件，一个是针对页面的触发事件，两者载体不同。
页面管理，由3局部组成：样式、交互、说明，在说明里，可以给页面添加相关注释或者说明。 也可以自定义注释。
X I B 3 〜变量值在页面间传递-Axure RP 9 Team Edition:已授权一 □ X
Q 100% 一 » II 4
圆5 共享
首页
交互
tit
指定元件+
页面说明
在页面交互里，可以添加一些触发事件，页面的触发事件有页面载入时、窗口尺寸改变时、窗 口滚动时等触发事件。
X交与编辑器凶
做添财时夕+溢®3蚱组织动作设置动作押甫
页面载入时《选择交互事件开始创立交互.
窗口尺寸改变时 窗口滚动时 窗口向上流动时 窗口向下濠动时 页面单壬时 页面双壬时 页面酶标右击时 页面螭移动时 贝面按＜»按下时 页面按健松开时 目页面相关触发事件
在样式里，可以给页面添加一些样式，Axure提供一种默认的页面样式，也可以自定义页面样式, 可以设置页面的排列方式、背景色，还可以导入背景图像，设置横向对齐或垂直对齐，可以设置背 景图像是否可以重复，以及设置草图效果。
X I B 0 〜变量值在页面间传递・Axure RP 9 Team Edition:已授权一 口 X
电1旗2 ol
C
» 口 .
共享X YW』 H »
:样式SES说明zXJ _
页面尺寸
Auto0濠加自适应视一
.血 口排列三三
取口NISASR
页面样式
发布原型
按F5键发布原型，输入用户名“kevin”，密码“123456”，单击登录按钮，可以看到用户名 和密码都被带到下一个页面，再输入“小刚”，密码输入“111111”，可以看到用户名和密码是随 着输入框里的内容变化而变化，从而能给用户一种真实软件体验效果。
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
