Axure RP原型设计案例教程07使用变量、条件和函数实现交互

AxureRP原型设计案例教程[AxureRP9]目录项目一原型设计基础项目二元件和元件库项目三元件样式和母版项目四标注、预览和输出原型项目五基础交互项目六使用动态面板实现交互项目七使用变量、条件和函数实现交互项目九音乐类App原型设计项目八使用中继器实现交互项目七任务一使用变量和条件任务二使用表达式和函数使用变量、条件和函数实现交互项目导读AxureRP不仅提供了事件、动作和动态面板等基本交互功能，还提供了变量、条件和函数等高级交互功能。通过使用这些高级交互功能，设计师可以制作出较为复杂、扩展性强、灵活度高的交互原型，更真实地模拟用户使用产品时的场景，进而提高可行性测试的准确性。本项目将通过讲解变量、条件、表达式和函数的基础知识，以及使用它们实现交互的方法，带领读者学习如何使用AxureRP制作复杂的交互原型。项目导读素质目标

坚定克服复杂交互设计难题的信心和决心，通过反复实践提升自己解决实际问题和应对挑战的能力。

全面考虑用户在不同场景下的需求变化，努力制作出实用性强、响应迅速且具有前瞻性的交互原型。学习目标

了解变量的概念和类型。

掌握全局变量、局部变量和系统变量的使用方法。

掌握添加条件和使用条件逻辑的方法。

掌握表达式、运算符的使用方法。

了解函数的类型和主要函数的作用，掌握函数的调用方法。

能够使用AxureRP制作复杂的交互原型。项目目标任务一使用变量和条件任务描述本任务首先带领读者学习全局变量、局部变量、系统变量和条件的基础知识，以及它们的使用方法，然后制作注册登录页的登录验证效果。用户名或密码不能为空，否则弹出该提示框用户名必须为11位，且密码不能少于6位，否则弹出该提示框用户名和密码均符合要求时，登录验证通过，跳转到首页任务准备全班同学每5人一组，各组选出组长。组长组织组员扫码观看“设计注册登录页需要注意的问题”视频，讨论并回答下列问题。问题1：在设计注册登录页时，设计师需要注意哪些问题？问题2：除了这些，你认为还需关注哪些问题？单击此处播放微课设计注册登录页需要注意的问题一、认识变量变量是用于存储文本和数字的容器，以便后续使用其值。它可以单独使用，也可以用在条件语句或表达式中，实现复杂的条件判断或信息传递功能。可以在当前原型文件的不同页面中使用，从而实现跨页面传递信息的功能。仅适用于单个动作。在一个动作中可以添加多个局部变量。不同动作中的局部变量即使名称相同，也不会相互影响。二、使用全局变量1．选择、添加与设置全局变量在“交互”面板中添加事件后添加“设置变量值”动作，可在该动作的设置区操作。在“动作”列表中，除页面和元件动作外，系统还提供了一些其他动作。知

识

库你知道在系统里还有哪些动作吗？二、使用全局变量1．选择、添加与设置全局变量选择全局变量在“目标”下拉列表中选择相应选项（已添加的全局变量）添加全局变量单击“目标”下拉列表底部的“添加变量”按钮，在打开的“全局变量”对话框中单击“添加”按钮单击这两个按钮可上移或下移所选全局变量在选中状态下单击变量名称可重命名全局变量通常情况下，全局变量的值为空，在选中状态下单击该区域，可为对应的全局变量设置默认值单击该按钮可删除所选全局变量在该对话框中还可以排序、删除和重命名全局变量，以及设置全局变量的默认值。注意：变量名称必须以字母或下画线开头，不能包含汉字和其他特殊符号，且不超过25个字符。二、使用全局变量1．选择、添加与设置全局变量设置全局变量的值在“设置为”下拉列表中选择值的类型后，在该下拉列表下方的设置项中选择或输入具体内容（不同类型的值有不同的设置方式）。选择“项目”/“全局变量”选项也可打开“全局变量”对话框。在“全局变量”对话框中为全局变量设置的默认值，可在当前文件的不同页面中使用；在“设置变量值”动作的设置区中为全局变量设置的值只在当前页面中有效。提

示二、使用全局变量2．访问全局变量使用“设置文本”“设置选中”和“设置列表选中项”等动作在“设置文本”动作设置区的“设置为”下拉列表中选择“变量值”或“变量值长度”选项后，在“变量”下拉列表中选择一个全局变量，即可访问该全局变量的值三、使用局部变量单击动作设置区中的任意

图标，在打开的“编辑文本”对话框中单击“添加局部变量”按钮，可添加一个局部变量用户可根据需要自行输入局部变量的名称，以及选择局部变量的类型和目标元件。当动作设置区中有

图标时，单击该图标均可打开“编辑文本”对话框删除该变量在打开的列表中选择已添加的局部变量，可将所选变量插入下方编辑框中并访问该变量的值。四、使用系统变量保存和处理原型中的特定数据自定义变量全局变量局部变量用户根据需要自定义的帮助用户快速访问对象的特定属性值（如当前或目标元件的位置或尺寸、当前页面的名称）系统变量系统预定义的变量系统变量元件类页面类窗口类鼠标指针类系统变量的访问方法与局部变量相似，此处不再赘述。此外，通过“编辑文本”对话框中的编辑框，可以将变量应用于表达式，具体方法将在任务二中讲解。知

识

库四、使用系统变量1．元件类系统变量用于访问元件的属性。如元件的位置和尺寸等与This（当前元件）、Target（目标元件）、LVAR（存储在局部变量中的元件，可替换为任意局部变量名称）3种元件对象组合使用。如[[T]]。在“插入变量或函数”列表的“元件”分类中可以选择该类系统变量元件类系统变量及其作用系统变量作

用This访问当前元件，即正在为其添加事件的元件Target访问目标元件，即为当前动作设置的目标元件x返回元件左上角的水平位置值y返回元件左上角的垂直位置值width返回元件的宽度height返回元件的高度scrollX返回可滚动动态面板的水平滚动距离scrollY返回可滚动动态面板的垂直滚动距离text返回元件中的文本name返回元件的名称（须为元件命名）top返回元件顶部的Y值left返回元件左侧的X值right返回元件右侧的X值bottom返回元件底部的Y值opacity返回元件的不透明度值（取值范围为0～100）rotation返回元件的旋转角度值（取值范围为0～359）四、使用系统变量2．页面类系统变量只有一个，即PageName，其作用是返回当前页面的名称。在“插入变量或函数”列表的“页面”分类中可以选择该系统变量。3．窗口类系统变量在“插入变量或函数”列表的“窗口”分类中可以选择该类系统变量。窗口类系统变量及其作用系统变量作

用Window.width返回浏览器窗口的当前宽度Window.height返回浏览器窗口的当前高度Window.scrollX返回浏览器窗口的水平滚动距离Window.scrollY返回浏览器窗口的垂直滚动距离四、使用系统变量4．鼠标指针类系统变量在“插入变量或函数”列表的“鼠标指针”分类中可以选择该类系统变量。鼠标指针类系统变量及其作用系统变量作

用Cursor.x返回鼠标指针在页面上的位置的X值Cursor.y返回鼠标指针在页面上的位置的Y值DragX返回拖动动态面板时，在水平方向上的瞬时拖动距离（向右拖动时为正值，向左拖动时为负值）DragY返回拖动动态面板时，在垂直方向上的瞬时拖动距离（向下拖动时为正值，向上拖动时为负值）TotalDragX返回拖动动态面板时，从起始位置到当前位置的水平距离TotalDragY返回拖动动态面板时，从起始位置到当前位置的垂直距离DragTime返回拖动动态面板时，从拖动开始到拖动结束的总用时（单位为毫秒）除了以上4类系统变量，AxureRP还提供了中继器/数据集类系统变量（用于访问中继器元件的属性），这些内容将在项目八中详细讲解。提

示五、使用条件在Axure

RP中，可以为交互设定条件，以控制交互发生的时机。具体来说，就是为情形添加条件，当事件触发时，系统会自动判断当前情况是否符合条件，若符合条件则执行对应情形中的动作。1．添加条件单击事件名称右侧的“启用情形”按钮，在打开的“情形编辑”对话框中单击“添加条件”按钮。条件说明区域进行逻辑判断的值的类型目标元件或变量关系运算符比较的值的类型比较的值的具体值五、使用条件1．添加条件继续添加条件语句添加一个条件语句后，单击“情形编辑”对话框中的“添加行”按钮。添加或删除条件语句将鼠标指针移到条件语句上，单击语句右侧显示的＋或×按钮。设置条件语句在条件语句中的下拉列表或编辑框中选择相应选项或输入值。添加条件单击“情形编辑”对话框中的“确定”按钮。单击条件说明，可再次打开“情形编辑”对话框五、使用条件2．关系运算符决定了条件语句中两个值的比较方式。（1）==：用于比较左右两侧的值是否相等或相同。（2）!=：用于比较左右两侧的值是否不相等或不相同。（3）<：用于比较左侧的值是否小于右侧的值。（4）>：用于比较左侧的值是否大于右侧的值。（5）<=：用于比较左侧的值是否小于或等于右侧的值。（6）>=：用于比较左侧的值是否大于或等于右侧的值。（7）包含：用于比较左侧的值是否包含右侧的值。（8）不包含：用于比较左侧的值是否不包含右侧的值。（9）是：用于比较左侧的值是否是字母、数字、字母或数字、指定的值之一。（10）不是：用于比较左侧的值是否不是字母、数字、字母或数字、指定的值之一。五、使用条件3．使用条件逻辑设定当满足所有条件或仅满足任一条件时，即可执行交互。（1）“MatchAll”“MatchAny”条件语句。当一个情形包含多个条件语句时，可以设定当满足所有条件语句时，或者仅满足其中一个条件语句时，执行该情形中的动作。在“情形编辑”对话框右上方的下拉列表中选择“MatchAll”或“MatchAny”选项。（2）“如果/否则”（IF/ELSE）链。当一个事件包含多个情形及条件时，可以使用“如果/否则”链来设定当事件触发时，会执行哪个情形中的动作。当条件组成“如果/否则”链时，只有链中的前一个条件判断为不符合时，才会继续判断下一个条件，直至有一个条件判断为符合，才停止判断剩余条件。五、使用条件3．使用条件逻辑（2）“如果/否则”（IF/ELSE）链。为一个事件的多个情形分别添加条件时，条件会自动形成“如果/否则”链，其中，第一个条件默认为“如果”，其他条件默认为“否则”。若当前元件中的文字不是字母或数字且文字字数不少于5个，则“提交”按钮为启用状态，此时系统不会继续判断第二个条件若当前元件中的文字字数少于5个，则“提交”按钮为禁用状态。在“如果/否则”链的末端放置一个没有添加条件的情形，该情形将作为当前事件的默认情形。当链中的所有条件都判断为不符合时，系统将执行默认情形中的动作。提

示五、使用条件3．使用条件逻辑（3）“如果/否则”链组。要想独立判断多个条件可以将“否则”条件更改为“如果”条件，此时该“如果”条件及其后的“否则”条件将形成独立的“如果/否则”链组，无论第一个“如果”条件的判断结果为何，都将继续判断下一个“如果”条件。右击“交互”面板中的条件说明，在弹出的快捷菜单中选择“切换为[如果]或[否则]”选项，使该条件在“如果”和“否则”条件间切换。任务实施——制作注册登录页的登录验证效果单击此处播放微课制作注册登录页的登录验证效果通过制作注册登录页的登录验证效果，带领读者进一步练习在交互中使用条件的方法。任务二使用表达式和函数任务描述本任务首先带领读者学习表达式和函数的基础知识，以及它们的使用方法，然后制作增减商品数量的交互效果。单击该按钮，商品数量增加1单击该按钮，商品数量减少1全班同学每5人一组，各组选出组长。组长组织组员扫码观看“交互动效的设计”视频，讨论并回答下列问题。问题1：交互动效是什么？它有什么作用？问题2：设计师应如何评估是否需要添加交互动效？问题3：交互动效有哪些设计方式？其时长有什么要求？单击此处播放微课交互动效的设计任务准备一、使用表达式由数字、变量、运算符和函数等组成的公式。在交互中使用表达式，可以动态生成文本或数值，从而制作出复杂的、丰富的交互效果。1．编写表达式在AxureRP中，表达式须写在双方括号“[[]]”中。最终输出时，双方括号中的表达式会被替换或进行运算，双方括号外的文本会被视为静态文本（不会发生变化）。例如，制作购物车页中商品的总金额随实际情况增加或减少的交互效果，以及在页面中显示当前日期的交互效果。例如，将元件中的文本设置为“数量为[[3.80+5.00]]”，最终输出时该元件中的文本会显示为“数量为8.80”。一、使用表达式1．编写表达式可单击任意

图标，打开“编辑文本”对话框，在“插入变量或函数”按钮下方的编辑框中直接输入。双方括号中的公式为表达式在“编辑文本”对话框中间的编辑框中单独输入变量或函数时，也须写在双方括号中。提

示一、使用表达式2．运算符决定了表达式的运算方式二、使用函数用于执行特定任务的、预定义的、有固定名称的一段程序。用户在使用函数时不需要详细了解其运行原理，只需要了解其作用，在需要时直接调用即可。1．调用函数方法一：在“编辑文本”对话框中单击“插入变量或函数”按钮，在打开的列表中选择函数，将其插入下方的编辑框中方法二：直接在“插入变量或函数”按钮下方的编辑框中手动输入函数在“插入变量或函数”列表中选择并插入函数时，系统会自动添加适合与当前函数组合使用的内容。为了访问不同元件的属性或为变量调用函数等，需要用点“.”连接元件与系统变量、以及变量与函数等。例如，[[Target.width]]的含义是返回目标元件的宽度；[[LVAR.toLowerCase()]]的含义是将LVAR变量中的大写字母全部转换为小写字母。提

示二、使用函数1．调用函数函数通常由函数名、圆括号“()”及圆括号中的参数组成。例如，函数max(x,y)的作用是返回参数中的最大值，其中max为函数名，x和y为参数。当以[[max(3,5)]]形式调用函数时，输出结果为5。为函数指定多个参数时，参数间用“,”分隔，但不是所有函数都必须指定参数，且部分函数不包含圆括号。二、使用函数2．函数的类型数字和数学函数字符串函数日期函数函数类型二、使用函数数字和数学函数用于执行更高级的数学运算。如[[(3.248+1).toFixed(2)]]。在“插入变量或函数”列表的“Number”分类中可以选择该类函数与数字、计算数值的公式（须写在英文圆括号中）或包含数值的变量3种对象组合使用调用数字函数数字函数及其作用函

数作

用toExponential(decimalPoints)用指数计数法表示对象的值（字符串），decimalPoints为需保留的小数位数，调用时可根据实际需求指定参数toFixed(decimalPoints)将对象的数值四舍五入到指定的小数位数toPrecision(length)将对象的数值格式化为指定长度的字符串，其中，length为长度，即有效数字的位数（小数点不计入长度）。当数值较大时，可能以指数计数法表示二、使用函数数字和数学函数如[[Math.abs(-1)]]。在“插入变量或函数”列表的“数学”分类中可以选择该类函数与Math对象组合使用调用数学函数数学函数及其作用函

数作

用abs(x)返回参数x的绝对值，x为数值acos(x)返回参数x的反余弦值asin(x)返回参数x的反正弦值atan(x)返回参数x的反正切值atan2(y,x)返回平面中正X轴与射线[从原点（0,0）到点（x,y）]的夹角ceil(x)向上取最接近参数x的整数cos(x)返回参数x的余弦值exp(x)返回e的x次幂。其中，e是自然常数，约为2.71828floor(x)向下取最接近参数x的整数log(x)自然对数函数，返回以e为底的对数max(x,y)返回参数中的最大值，可指定多个参数min(x,y)返回参数中的最小值，可指定多个参数pow(x,y)返回x的y次幂random()随机数函数，返回一个0（包含）和1（不包含）之间的随机数sin(x)返回参数x的正弦值sqrt(x)返回参数x的平方根tan(x)返回参数x的正切值二、使用函数字符串函数如[["Hello".length]]。在“插入变量或函数”列表的“字符串”分类中可以选择该类函数与英文双引号（或单引号）中的字符串、包含字符串的变量、返回String（表示字符串）值的操作及函数3种对象组合使用调用字符串函数用于处理字符串（文本）字符串函数及其作用函

数作

用length返回字符串对象的长度（包括空格）charAt(index)返回字符串对象中指定位置的字符。index为大于或等于0的整数，字符从0开始计数，0表示字符串中的第一个字符charCodeAt(index)返回字符串对象中指定位置字符的UTF-16代码单元concat('string')将指定的字符串添加到字符串对象中indexOf('searchValue')在字符串对象中，从左向右查找参数首次出现的位置，若未找到则返回值为−1lastIndexOf('searchvalue')在字符串对象中，从左向右查找参数最后一次出现的位置，若未找到则返回值为−1二、使用函数字符串函数字符串函数及其作用函

数作

用replace('searchvalue','newvalue')将字符串对象中指定的字符串替换为新的字符串searchvalue为指定的字符串，newvalue为新的字符串slice(start,end)截取字符串对象中的字符（从起始位置的字符开始，到结束位置之前的字符结束）start为起始位置，end为结束位置。当该函数只有一个参数时，表示到末尾结束；当参数为负数时表示从字符串末位开始向前计数split('separator',limit)将字符串对象中与指定的分隔字符相同的字符转换为“,”，形成多组字符串separator为指定的分隔字符，当该值为空时会将每个字符分隔为一组；limit为返回字符串组的组数，当该值为空时则返回所有字符串组substr(start,length)截取字符串对象中的字符（从起始位置的字符开始，直至截取到指定的长度；若不指定长度，则截取到末尾）substring(from,to)该函数的作用与slice(start,end)相似，但其参数不能为负数toLowerCase()将字符串对象中的所有大写字母转换为小写字母toUpperCase()将字符串对象中的所有小写字母转换为大写字母trim()删除字符串对象开头和结尾处的所有空格toString()将数值、逻辑值等转换为字符串，使转换后的对象以字符串的格式被进一步编辑和处理二、使用函数日期函数如[[Now.getDay()]]。在“插入变量或函数”列表的“日期”分类中可以选择该类函数与Now（当前日期）和GenDate（生成日期）两种日期对象组合使用调用日期函数用于生成和处理日期及时间信息日期函数及其作用函

数作

用Now返回计算机系统的当前日期和时间GenDate返回上次生成原型为HTML文件时的日期和时间getDate()返回日期对象为一个月中的第几天（取值范围为1～31）getUTCDate()会根据国际标准时间计算getUTCDate()getDay()返回日期对象为星期几（取值范围为0～6，其中0表示星期日）getUTCDay()会根据国际标准时间计算getUTCDay()getDayOfWeek()返回日期对象为星期几的英文名称getFullYear()返回日期对象的年份（格式为4位数字，如2025）getUTCFullYear()会根据国际标准时间计算getUTCFullYear()二、使用函数日期函数日期函数及其作用函

数作

用getHours()返回日期对象时间的小时部分（取值范围为0～23）getUTCHours()会根据国际标准时间计算getUTCHours()getMilliseconds()返回日期对象时间的毫秒部分getUTCMilliseconds()会根据国际标准时间计算getUTCMilliseconds()getMinutes()返回日期对象时间的分钟部分getUTCMinutes()会根据国际标准时间计算getUTCMinutes()getMonth()返回日期对象的月份（取值范围为1～12）getUTCMonth()会根据国际标准时间计算（取值范围为0～11）getUTCMonth()getMonthName()返回日期对象的月份，通常用英文表示getSeconds()返回日期对象时间的秒部分getUTCSeconds()会根据国际标准时间计算

getUTCSeconds()getTime()根据国际标准时间，返回从1970年1月1日零点零时零分到日期对象经过的毫秒数getTimezoneOffset()返回本地时间与国际标准时间的时差（单位为分钟）二、使用函数日期函数日期函数及其作用函

数作

用parse(datestring)先将指定的日期字符串进行转换并创建为新的日期对象，然后返回从1970年1月1日零点零时零分（国际标准时间）到日期对象经过的毫秒数datestring表示指定的日期字符串（字符串须写在英文双引号或单引号中）调用时须与Date对象组合使用，如[[Date.parse(Now)]]、[[Date.parse("2025-11-14")]]toDateString()返回日期对象的简化版本（仅包括星期几、月份、日期和年份）toISOString()根据国际标准时间，将日期对象转换为ISO格式的日期字