《AxureRP9网站与App原型设计》教学教案-05使用Axure变量制作丰富的交互效果

第5章使用Axure变量制作丰富的交互效果

课时内容使用Axure变量制作丰富的交互效果课时

教学目标理解全局变量、局部变量，掌握变量值在页面间传递，学会制作简易计算器教学重点变量值

在页面间传递

教学难点变量值在页面间传递

1.教学思路：通过实例引入变量的概念；通过多媒体演示和实机操讲解变量值在页面间

传递的使用；通过实战深入理解Axure变量。

数字设计2.教学手段：多媒体+计算机.教学资料：教材、多媒体课件

教学内容

AuxreRP8原型设计工具里提供全局变量和局部变量，在原型设计过程中，这两种变量非常实用，

使用它们可以制作出更加丰富的交互效果，比方在制作原型过程中，遇到需要条件判断或者页面间进行

参数传递时，使用变量即可轻松解决问题，同时丰富原型的交互效果。

viviscan

vivtscan

女装）男装>电器城，大家电，手机〉Hi,viviscan积分1307

皿皿天猫T门All.CO门

用变量可实现登录页面和首页的参数传递全局变量和局部变量的使用

变最用于存储数据、传递数据以及条件判断，在登录网站的时候，用户登录成功后网站会把用户名

传递F一个页面显示，这就是页面间数据的传递，即从一个页面向另一个页面传递变量值。如果需要在

IE浏览器里显示原型，推荐使用25个或更少的变量。

•全局变量：在所有页面里都可以使用，但是全局变量的值也很容易被修改掉，因为所有页面

都可以使用全局变量，也就有权限修改全局变量值，所以在使用的过程中需要注意。

•局部变量：只供某个局部区域使用，比方在某个触发事件的某个动作中使用，其他触发事件

就不可以使用此变量。

•变量设置规那么：变量名必须是字母或者是数字，并以字母开头，需要少于25个字符，且不

能包含空格，Axure会默认初始化一个"OnLoadVariable”变量。

单击工程菜单项的全局变量命令里，翻开“全局变量”对话框，在“全局变量”对话框中可以新增

或编辑全局变量，新增一个全局变量“count”，单击“+添加”链接，可以新增变量，变量值默认为空，

也可以为其赋值，如让“count”等于0.

ft«X^CO127QAl：32Z7H.M…的QQO

1。］回1-

HO<X4-<->C①127.0Q.l：32767,S“rtht…旬力•i

首页

5.3实战一一制作简易计算器

利用全局变量、局部变量的知识来制作一个简易的计算器，能实现加减乘除运算，进一步熟悉变量

的使用方法。

先来看简易计算器布局，将按钮按属性分为4组，分别是功能按钮、数字按钮、是运算符按钮和等

号按钮。进行这样的分组，页面层次就很清晰，可以快速地找到想要的按钮。分组设计、分清层次，利

用颜色比照差异，在做原型设计的时候，也要学会利用这种理念，把具有相同的属性功能

区域设置为一组，通过颜色的比照，使页面的层次结构显得清晰。F面开始来设计简易计算器的原型。

5.3.1计算器布局设计

(1)拖曳一个“矩形「元件到工作区域，将其宽度设置为377、高度设置为346,边框选择第3个

线宽，设置圆角半径为5,背景填充为灰色(#口人口人口人)。

计算器背景

(2)拖曳一个“文本框”元件到工作区域，将其宽度设置为348,高度设置44,在交互面板的提示文

本框中输入0,把文本设置为居右对齐，并且为只读状态，即文本框中不能进行除按键外的任何输入，将

标签命名为“show”。

女李双射.电■=!见住,JC

”式文。长明

showtit

£

3U

09人

assa

未羯定!1交的0

r：*用

口只读

jpmfis

大公"府龙.可见n计算器显不框

(3)拖曳一个“矩形1”元件到工作区域，将其宽度设置为60,高度设置40,圆角半径为5,填充背景

色伊DF8045),将文本内容命名为“退格”，文本的字号设置为16号，加粗，白色字体，按住Clrl健，

拖曳党制出两个同样的矩形元件.将其分别命名为“全清”“清屏

功能按钮

(4)拖曳一个“按钮”元件到工作区域，将其宽度设置为60,高度设置为40,文本内容为“7”,字号为

16号，字体加粗，复制出10个同样的兀件并修改其文本内容，作为其他数字按钮。

।退格全消

ttternrnrnPIra□数字按

钮

(5)拖曳一个"矩形1''元件到工作区域，将其宽度设置为70,高度设为40,圆角半径为5,填充背景

色(#999999),修改文本内容，利用代表除法，设置其为20号字，加粗、字体颜色为白色，按住Ctrl键

向下拖曳，复制出3个同样的按钮，分别修改按钮的文本内容。

工

X

ernrn

MPlSQ运算

按钮

(6)拖曳一个“矩形1”元件到工作区域，将其高度设置为40,圆角半径设置为5,填充背景色

(#009900),文本内容修改为"二”，字号为20号，加粗、字体颜色为白色。

pTrnrn

rnDZJZE

等号

5.3.2数字按钮交互设计

(1)本节制作的计算器机制是两个数相加或者相减，需要把这两个数分别设置为变量"shuzhil”

“shuzhi2"，默认值设置为0；还需要设置一个变量来代表运算符号，把它命名为“yunsuan”，默认值为0,

说明没有输入任何运算符号；计算器可以输入整数或者小数，需要一个变量来说明它正在输入的是小数

还是整数，将该变量命名为“xiaoshu”；然后设置“temp”变量和“changdu”变量，分别用「存放临时值司代

表输入的长度。

X会风变一短

创2：2隔食11用于JIVU中正作5悔M中储依・・MftaIE城慝幼愕吞使用25个么空少的

变■幺必皴■字母■夕.少于25个乎割.并R不UW含空格

十添加

变量S称默认值

shuzhil0

shuzhi20

yunsuan0

xiaoshu0

temp0

changdu0

新增全局变量

当“yunsuan”的变量值为1时，代表加法运算，当为2时，代表减法运算，当为3时，代表乘法运

算，当为4时，代表除法运算。

当“xiaoshu”等于。的时候，代表正在输入的是整数，等于1的时候代表输入的是小数。

(2)选中数字1按钮，为其设置鼠标单击时的触发事件，在组织动作面板单击“启用情形”按钮，

弹出"青形编辑-矩阵：单击时”对话框。用于判断当前是给“shuzhil”还是给“shuzhi2”赋值，还需要判断

输入的是整数，还是小数。单击“十添加行”按钮，为运算设置条件，当变量“yunsuan”等于0且“xiaoshu”

等于。时，代表输入的“shuzhil”为整数。

X情形编91・距影单击时X

匹IS以下全2M曲

yunsuan

xtaoshu

B果值于yun&uan»-0"并

且值于xlaoshunP

新增条件

(3)现在需要给“shuzhil”变量进行赋值，在添加动作面板单击“设置变量值“勾选"shuzhil”复选项，

在设置动作面板单击fx图标.由于需要“shuzhil”以10的倍数增长，即第一次单击1的时候，输入框里

显示的是1,当再次单击I的时候，输入框里变为11,所以插入表达式[[shuzhil*10+l]]。

X编辑文本在下方输入文本,变量名梆或表达式要写在”[□/中.例如：

-插入变量HMyVarD.获取变・"MyVar”的当前值：•插入表达式UVarA+VarBD.获双“VarA+VaB的和:

•插入系统变量[[PageName]].荻荻当前页面名称.

播入及■量底KUshuzhUTO+IJJ

府昨在下方创立用于插入元件假的局部变量，局部变量名称必须是字母数字不允许包含空格，

初混血*取消

shuzhiI赋位

当第一次单击1的时候,“shizhil”默认值为0,0*10+1=1,这时的“shuzhil”就变为1,当再次单击1的时

候，1*10+1=11,可以看到此表达式完全满足赋值的需要。

«)接着将“shuzhil”的内容显示到输入框里，在添加动作面板中单击“设置文本”，勾选“show”复选

框，将“shuzhil”变量的值赋给它。

立互婚件夕/ma作

的秘

9您接动作

▼单击时日发

■弄&我其的BQ再倒1show

<ix中x*ta检凛6到用冷兀传用作(MTjwiuan■■.0•畀HUI1liao^hu-CT

”且竹板土做直出片办

BhuM》.MlSIEOf

谀M速中我・到盘法中不段■女本1[l»nuzniq]

尼用着用S4>how"CtotohW

・设■尺寸

◎■不名叫

输入框赋值

(5)接着给、'shuzhi2”变量进行

赋值，新增一个用例，新增一个条件,

当变量“yunsuan”不等于。，旦变量

“xiaoshu”等于。时,代表“shuzhi于为整数。

苻台金售.UT««

SM,VUMVM••(1-ofX4-X

SEM一•patothj[.•'1-ofX4-X

值干2ZW*■・小

3值干***0*

图5.33新增条件I—A—L9扁

(6)现在需要给“shuzh⑵，变量进行斌值，在添加动作面板中单击“设置变量值”，勾选“shuzh⑵，及选

项,在设置动作面板单击fx图标，插入表达式“[[shuzhi2*10+l]]”,接着将，shuzhi2”的内容显示到输入柩里，

在添加动作面板中单击“设置文本”，勾选“show”及选框，将“shuzhi2”变量的值赋给它。

X文互缩$强骂

・单击时

WM1国

M*值于yumuan—▽开且值于xihu—'CT

«口I

3中打开他授stHtfhll为H*hu2tUl,10*lir

源切料兀住

ifiR文本

|(shuzhi2]]

元"动，

show为F5umi】r

际a

»9i2

iSIDKU^SUM>*(■于vun*u«nl.-O-弁且值于XHXJ«P-

笈■文本

IiSB?Vtt

0・阴片

st>uzhi2为-3*皿2・10*1犷

9*9中

ifiR文本

箕・列衰送中理

stow为n(*huzN2jr

BWWffl

杵动

旋”

坡量尺寸

»TIRS«S

设・不透明

c?w.«a

输入框赋值

5.3.3运算符按钮交互设计

(1)选中加号，为其添加鼠标地击时的触发事件，将“yunsuan”变量值设置为I,代表相加操

作，将“xiaoshu”变量值设置为0,代表输入整数操作。

•单击附

用例1

没造变・信

/unsuan为"I"

退格清解

没事雪■值

EEEKiWStHI为"0"

456

mm

加法运算交互

(2)复制用例，把此用例复制给其他3个运算符，减法“yunsuan”等于2,乘法"yunsuan

等于3,除法“yunsuan”等于4。

交互♦布朋

▼单击时用做工

yunsuan为“4”

ISg*M

xgoshu为P"

甯HI交巨

鼠标悬停交互样式

其他运算交互

复制用例操作很方便，在添加用例的时候，如果用例功能接近,就可以复制用例，这样就能极大地减

少1作最，特别是在制作简易计算器的时候，有大量的重复用例。

等号按钮交互设计

（1）选中数字1按钮，复制其用例给数字2按钮，在数字I用例的基础上进行修改，因为单击数字

2按钮，所以需要修改表达式为“[[shuzhil*10+2]「以及T[shuzhi2*10+2]]>

(矩形名称)懵

8▼由工g

用例1

知欠负于yunsum==2”并且■于xi»oshu=W

snuzhii^nsnurhirw♦2jr

设■文本

show为"HshuzNI""

用例2

否用么知他于yimsu8nl=f.并且值于

xiaoshu*0-

shuzhl2为H$hsmZ,K).Zir

设置文本

.how力-的uzhi2)1r数字2按钮交互

（2）为等号添加鼠标单击时触发事件，等号需要判断当前是相加操作还是其他操作，新增条件，

如果“yunsuan”变量等于1说明是相加操作，要把“shuzhil”和“shuzhi2”两个变量进行相加，并它的值赋值

给“shu才il”，把相加结果显示在输入框里，同时要把“shuzhi2”进行清零操作，把它赋值为0,并把

“xiaoshu”变量赋值为0,代表再次输入的时候，将先输入整数。

▼样式交，设咫

(矩形名称)tit▼单击时

।用例工如K值于yuosuen==T

shuzhil>j"U8huzhlU8huzhl2](

设置文本show为-(sDuzhllJJ-

shuzh12为”(F

设■变flhACifl%目标

xiaostiu由N”

用例1

J:/、值于yunwan="Nsbuztul为”Ushuzhil«shuzh12]]M

相加操作

(3)将相加操作用例复制3次，让它们分

别代表加减乘除4个操作。

图5.39其他运算操作

(4)按F5键发布原型，单击数字I和2、运算符和等号可以实现运算器整数的加减乘除操作。

剧第1用例1

值于yunfeuM)=值于yunuunssT值于y^muan=zQ"

加加力•■,h3hl/*hujh⑶rBhug，门shumr&MM]I•hurhil为

及育文本》・文本文本

而。■为Rhuzhl))-«how…U6umi]rshow为Fshu2hll>]"

shuMvr5huzh<2万(F5Huzht?力IT

xl*oshu力P”xi»oshu秀・xrilaofihu为▽

DHMffiX»a>CO127.0AIS2?6&Wlart.him*二ylSqcpSp*M*.

□Z)DUDUD

E□6.

QSCZ3。

发布原型

(I)理解Axure的全局变量和局部变量的含义以及使用方法。

小结(2)学会使用Axure变量值在页面间传递，实现高级交互效果。

(3)学会使用Axure变量来制作简易计算器，深入使用Axure变量。

简易计算器目刖只能完成整数的加减乘除操作，并且数字按钮只能使用1或者2,请完

成以下内容。

练习(1)按照数字1的方式给其他数字按钮添加鼠标单击时触发事件。

(2)给点号按钮添加鼠标单击时触发事件，使计算器既能实现整数的加减乘除操作，

也能实现小数的加减乘除操作。

创立行扁货・网+商览H中⑹Ik交接时4tt效■・lEMRSiM鹿传9・椎,能用251&工

少的贯置

X宝般宴・

削立火用塞■网于mb中正温切检K存X取雯.“最在IE■仪nsfi.夜各使用25々或强

少式方窗

交・名的原是字田父孑.”于25个字安・并且不♦包含文格

十添比个卜珞T«xflB»

新增全局变量

除了单击“添加”性接新增变量，还可以可以单击“T上移”或“1下移”链接调整变量的前后关系

以及单击“X删除”链接删除变量，要记住变量名必须是字母数字，并以字母开头，少于25个字符，且

不能包含空格。

局部变量应用在某个交互效果的设计过程中，比方单击页面载入时触发事件。在添加动作面板单击

“设置文本”选项，勾选“焦点元件”复选项，在设置动作面板单击仅图标。

XftfiMtlttX

«xwt

贞证强入时口G，点元件C

-2.：：</设置面板___________________________________________

用窗0M,

中打4Q到/

而”^X

国,阳於金■选中

/收"外也翡中曜启用11附峥0

江匕/tt第9・尺・，

1-J-31S<«qF长取停0设置文本动作

单击仪图标后，会弹出编辑文本对话框，单击“添加局部变量”捱接，就可以新增一个局部变量,

还可以对局部变量重新命名和赋值，此局部变量只在给文本赋值的时候起作用，其他交互动作无法访问

该局部变量。

XMH«文*不下方»入欠金妻量幺言笈也达匕分与春•（（]].中例d

■由入5S・UMyVa叫承取511rMyVa^的巨编悟6•看入爱达成HVarA♦VarBJISQ-VarA•VarB'Mfch

-谁入易败爻■UPageName]]刀口省前H・名味

插入变量或信效.

,府源・~K右创文田干幡入三传值的由SR衣・M固幺林必用里庄舟禽李木介;牛m仝由格

AnivfttrtTLVAR1=n.nXT0▼x

新增局部变量

局部变量赋值的方式有很多，可以通过元件文字、选中状态值、选中项值、变量值、焦点元件上的文

字、元件的方式赋值。局部变量的变量名也必须是字母和数字，且不包含空格。

5.2变量值在页面间传递

变量的主要作用，就是在页面间传递变量值，在登录淘宝或者其他网站的时候，输入用户名和密码，

校验成功后，会跳转到一个新的页面，在新的页面里经常会看到“欢迎XXX”这样的文字；在搜索框进

行搜索的时候，输入搜索条件，当单击搜索按钮跳转到下一个页面的时候，同样会把搜索条件传递过去，

这些都是真实软件的交互效果。利用变量的添加，可以实现上面两个场景的交互效果，给用户一种真实

软件操作的感受，将用户带入到真实软件使用场景。

5.2.1登录表单和首页实战演练

口）把Pagel页密重新命名为“登录”，拖曳一个“矩形1”元件到工作区域，将其宽度设置为

300,高度设置为260,填充灰色（#CCCCCC）背景。

E觎登录表单背景

（2）拖曳一个“文本标签”元件到工作区域，将其重新命名为“用户名”，字号设置为16号;

拖曳一个“文本框”元件到工作区域，将其作为用户名的输入框，把它的标签命名为“name”。

ilttOE3M

name

使微乐寸137x187/

MR0

179WJ25H

TextField不定tt，o1

Ar皿用户名输入框

(3)拖曳一个“文本标签”元件到工作

区域，洛其重新命名为“密码”，字号设置为16号；拖曳一个“文本框”元件到工作区域，将其作为

密码的输入框，把它的标签命名为“password”；拖曳一个“按钮”元件到工作区域，将其宽度设置为200,

高度设置为30,把它的文本内容重新命名为“登录”。

密码输入框和登录按钮

：4)新建页面将其命名为“首页”，拖曳一个“矩形1”元件到工作区域，用于显示登录后传递

st交互

passwofAi

)00irx«s

00CJ

538

s««

IBIT员I4$

TextField•

不awn.

元件毋依

Q+31J

Defaultc

Norma

X*xft.v

过来的用户命名和密码，命名其标签

为"COntFlcongnt

43x52r

3fi2wji72-

Box1

不自靖”.01

神▼首页

5.2.2新增变量和赋值实战演练

(1)需要新增两个全局变量，用来保存输入的用户名和密码，单击“工程”菜单项，在弹出的下拉

列表中选择全局变量命令，在弹出的对话框中新增2个全局变量，分另U命名为“userNamc”和“pwd”。

X全局受■!＞如祟在IE浏史缩浏

新增全局变量

创立全局变■用干浏览书中页面切换时在性览

原则推行住用25个或更少的变量.

变量名必须是字母的字，少于25个字籽，并且不能包含空格.

士名和个上Ax

交量名称默认g

OnLoadVariabte

userName

pwd

⑵进入登录页面，选中登录按钮，为其添加鼠标单击时触发事件，在添加动作面板中单击“设置

变量值”动作，先给全局变量userNamc赋值，勾选“uscrNamc或选框，单击fx图标。

x文耳缰

E设I目逐呼

0击aM

iSKWuaerName

专・d0代userNsmeh'

澹津加

设■二献S示我西0・看

STKBI行

取4历热里依行第0行

扬其它

壮就一调

额置■取涓

userName变量值

(3)进入到编辑文本对话框，把用户名输入框里的信息赋值给全局变量userName,新增一个局部变

量，第一个下拉列表中选择“元件文字”，它指的是把元件上的文字赋值给该局部变量，在第二个下拉

菜单项选择择用户名输入框“name”，再将该局部变量插入到内容的编辑区域，这样就可以给全局变量

userName赋值。

XMHA*X在下方*人立八WM：

•侵人变■UMM1.Q取食■•♦yVaL貌士匍值；•*入收火式HV"A•V"B]LQ双・V“A•VarS-filfa：

此SllPaeNomH.aU*南B*名亭

懂入)不62衰

…初在下方创立用于插入元件值的局部变量，局部变量名称必须是字母数字.

不允许包含空格.溢力嗝标a

二耐后

userName赋值

(4)用同样的方式揩密码输入框里的信息保存到全局变量里。在添加动作面板中单击