★ FEATURED ARTICLE 简介资源为一份PDF文档系统梳理Axure RP中变量与函数体系的完整用法按全局变量、中继器数据集、元件、页面、窗口、鼠标指针、数值、字符串、日期处理及布尔逻辑运算分模块讲解并结合跨页面数据传递、动态列表生成、响应式布局调整、鼠标行为触发等示例展现交互设计中的典型应用针对常见交互痛点给出可复用的表达式范例同时强调命名规范、作用域管理与数据类型匹配等易错点。文档共1个文件PDF格式压缩包约556KB内容精炼且覆盖面广面向具备一定Axure基础的产品经理、UI/UX设计师及前端原型开发人员。目前已有216人学习下载既可作为日常案头速查手册也能配合软件实操边学边练帮助读者快速掌握变量函数调用逻辑降低复杂原型交互的开发与排查成本。1. Axure 变量系统原型动态化的核心90% 的交互卡壳都出在这里做 Axure 原型做到中后期几乎所有人都会撞上同一堵墙——静态页面画得再精细一旦涉及跨页面传值、列表动态加载、根据滚动位置显隐按钮这类需求就不知道从哪下手。原因很简单Axure 的交互面板只能触发动作真正让原型“活”起来的是它底层那一套完整的变量与函数系统。《Axure常用变量及使用方法详解》这份 PDF 的价值就在这里——它把全局变量、中继器数据集、元件、页面、窗口、鼠标指针、数值、字符串、日期、布尔值一共十大类变量与函数全部摊开每个都给出来可直接套用的表达式示例。适合谁产品经理用它在评审会上演示真实交互流程UI/UX 设计师拿它做带状态切换的高保真原型前端开发者则能借此快速验证交互逻辑、减少后期返工。接下来我会按实际项目里“用得最勤 → 最容易被忽视 → 最容易翻车”的顺序把这套系统拆开讲清楚。2. 全局变量与中继器数据集跨页面共享和动态列表的基石2.1 全局变量整个原型的“公共内存区”全局变量是 Axure 里最朴素也最容易被低估的机制。它的本质就是一个可以在任意页面读写的数据槽用双方括号[[GlobalVariableName]]包裹。在 Axure RP 9/10 中通过“项目—全局变量”菜单预定义也可以在交互动作里直接用“设置变量值”动态赋值。我最常用的场景是登录态模拟。做成这样登录页的文本框绑定变量userName点击登录按钮时触发“设置变量值”动作把输入框的文字写入userName然后跳转到首页。首页顶部放一个文本标签值直接写欢迎[[userName]]。这一套做下来评审会上演示“登录后全局显示用户名”的效果比放十页静态图都有说服力。// 示例登录按钮的“单击时”交互事件中 // 动作1设置变量值 userName [[InputBox.text]] // 将输入框内容写入全局变量 // 动作2打开链接到首页并携带变量值逻辑说明[[InputBox.text]]先读取文本框的当前内容赋值给全局变量userName跳转后首页通过[[userName]]读取。顺序是先赋值再跳转颠倒了首页拿到的就是空值。参数说明变量名不要用name、page这类可能与系统函数冲突的词建议统一前缀比如g_userName、g_theme维护时一眼能认出是全局变量。多页签原型里全局变量还会互相污染所以命名时把业务域带进去比如login_userName和order_userName分开定义。除了登录全局变量还适合放用户偏好主题色、语言、跨组件筛选条件比如三个中继器共用同一个filterCriteria变量。但要记住全局变量是共享的不是局部的页面卸载不会清空它。如果不做显式重置第二次进入页面时它带着上一次的值这既是能力也是隐患。2.2 中继器数据集行函数和组件函数要分清中继器Repeater是 Axure 里批量数据展示的核心控件很多人卡在它身上是因为没分清两套函数Item打头的行函数和Repeater打头的组件函数。简单说Item管的是“这一行”Repeater管的是“这个表”。行函数里[[Item]]代表当前行数据对象的集合[[Item.index]]是当前行索引且从 1 开始[[Item.isFirst]]、[[Item.isLast]]判断首尾行[[Item.isEven]]、[[Item.isOdd]]判断奇偶行[[Item.isMarked]]配合右键菜单的“标记行”使用[[Item.isVisible]]则能感知当前行是否处于隐藏状态。做斑马纹列表就是isEven的经典用法。组件函数这边[[Repeater.dataCount]]是数据集中所有行的总数[[Repeater.itemCount]]是当前实际加载的项数量这两个概念常被搞混。[[Repeater.pageIndex]]是当前页码[[Repeater.pageCount]]是总页数[[Repeater.visibleItemCount]]是当前页可见项数量[[Repeater.TargetItem]]则在编辑交互时指向目标数据行。2.3 动态列表实战从“写死三行”升级到“读表渲染”真正体现中继器价值的是让列表内容由数据集驱动。假设要做一个任务清单每条显示任务名和截止日期// 中继器的“每项加载时”事件中对列表内的文本标签设置文本 [[Item.Name]] · 截止: [[Item.DueDate]]逻辑说明当数据集为每一行生成对应列表项时[[Item.Name]]自动取当前行的“Name”列值“DueDate”列同理。修改数据集里的字段列表立刻刷新不用改动任何交互事件。参数说明中继器里的文本标签用[[Item.列名]]引用当前行数据。列名必须与数据集列头完全一致大小写敏感且不要带空格。更新数据用“设置数据集”动作传入一个 JSON 数组或使用“添加行”“更新行”“删除行”细分操作。分页逻辑则靠pageIndex与pageCount配合“上一页”“下一页”按钮推进页码按钮的“禁用”条件可以直接写[[Repeater.pageIndex 1]]首页时禁用这类表达式。2.4 数据集操作的两个隐蔽限制一个是“设置数据集”动作会整体替换数据而不是局部修改。想新增一行用“添加行”更安全想改某一行的值通过“更新行”按行号或条件定位。另一个是我在项目里踩过多次的——中继器嵌套时子中继器里使用[[TargetItem]]才能正确引用父中继器当前行的数据直接套Item.ColumnName会拿到子数据集自己的列解析结果。嵌套列表做二级分类展示时这两者的区别就是“数据正常”和“显示空白或报错”的分水岭。3. 元件变量与页面/窗口函数让交互感知“自己在哪里、页面多大、窗口滚了多高”3.1 元件变量This和Target交互动作的“主语”和“宾语”[[This]]指代当前元件[[Target]]指代交互动作的目标元件。这个主语/宾语逻辑是 Axure 事件驱动的关键。拖拽滑块调数值的场景可以这么实现滑块或其他元件拖动结束后用“设置文本”动作把[[This.x]]写到旁边的数值标签上因为This在事件上下文中就代表被拖动的滑块本身。// 滑块原件的“拖动结束时”事件 // 动作1设置文本数值标签 [[Math.round([[This.x]])]] // 动作2设置文本百分比参考线 [[Math.round([[This.x]] / [[This.parent]].width * 100)]]%逻辑说明先用This.x读取滑块当前水平坐标再通过This.parent.width获取父级容器的宽度两者相除得到相对位置百分比。This与Target的区别在于This是你直接拖的那个元件Target是交互动作指向的元件。在“移动到”这类动作里Target通常指代设置的目标元件别把两个名字混用。参数说明This下可用的属性很全坐标类有x、y尺寸类有width、height视觉类有rotation、opacity状态类有isVisible、isSelected还有文本text与滚动位置scrollX、scrollY。改尺寸可以写[[This.width]] 300但如果你在动作里直接用表达式赋值Axure 的“设置尺寸”动作更稳表达式赋值适合在条件判断里做动态比较比如“当宽度大于 500 时切换到宽屏布局”。常见的翻车点是在“设置文本”动作里试图给This.text直接赋值很多人写成[[This.text]] 新值这在 Axure 里并不会生效正确做法是直接设置该元件的文本内容。Axure 的表达式是取值用的赋值要靠动作面板。3.2 页面变量获取当前页面的“身份”和“身体数据”页面级别变量主要由Page对象提供Page.width与Page.height是页面画布的尺寸Page.scrollX与Page.scrollY是页面当前滚动位置Page.url是当前页面的 URLPage.title是浏览器标签页的标题PageName变量则直接返回当前页面名称。响应式布局判断是我用得最多的场景。比如一个后台管理原型侧边栏菜单要根据页面宽度自动切换完整模式与折叠模式// 页面“窗口尺寸变化时”事件 // 条件[[Page.width]] 768 // 动作设置侧边栏宽度为 64px隐藏菜单文字 // 否则设置侧边栏宽度为 220px显示菜单文字逻辑说明Page.width取当前页面宽度与 768 做比较。条件成立时执行窄屏布局不成立时恢复宽屏布局。注意触发时机要选“窗口尺寸变化时”而不是“页面加载时”后者只在首次进入页面时执行一次。参数说明要监听窗口尺寸变化在页面的“交互”面板中添加“窗口尺寸变化时”用例即可。“页面加载时”适合初始化逻辑比如根据PageName判断当前处于哪个模块从而高亮对应的导航菜单项写法类似[[If(PageName 仪表盘, active, )]]。页面变量在整个页面生命周期内都是可读的适合做“这个页面正在干什么”的状态感知。3.3 窗口变量感知浏览器窗口的真实尺寸与滚动Window对象与Page对象的区别在于Page是原型设计画布的概念Window是浏览器运行环境的概念。前者是 Axure 的“页面纸面尺寸”后者是浏览器窗口的真实大小二者在 Axure 预览或导出 HTML 后才体现差异做响应式判断时优先用Window。Window.width、Window.height是浏览器可视区域的宽高Window.scrollX、Window.scrollY是窗口滚动位置Window.name可以读取窗口名称Window.top与Window.left则返回窗口位置。一个实用的滚动反馈场景页面滚动超过一定距离后右下角悬浮的“回到顶部”按钮自动出现。// 按钮的“可见性”条件[[Window.scrollY]] 300 // 按钮的“单击时”事件动作“滚动到窗口顶部”方向“向上”动画“线性”时长 300ms逻辑说明条件判断Window.scrollY 300 时按钮可见小于等于时隐藏。点击后的“滚动到窗口顶部”动作是 Axure 内置的不需要写 JS。滚动位置是纯前端运行时概念在 Axure 的编辑画布上不会实时变化预览或导出 HTML 后测试才有效。参数说明Window.scrollY单位是像素数值随滚动实时更新。条件写在按钮的“可见性”属性里Axure 会自动监听相关变量变化并即时刷新显隐这比用“设置可见性”动作手动控制要省事得多还不会出现状态残留。4. 鼠标指针与数值/字符串/日期函数把交互细节补到像素级如果说前面那批变量解决的是“数据从哪来、状态怎么传”这一章的函数群解决的就是“条件怎么算、文案怎么拼、日期怎么显示”。它们是原型的“运算器”也是让原型从“能点”进化到“好用”的一层。4.1 鼠标指针变量追踪光标位置做出“跟手”交互Axure 提供了一组Cursor变量Cursor.x和Cursor.y是当前光标相对浏览器窗口的坐标Cursor.dragX和Cursor.dragY是本次拖拽的距离增量Cursor.totalDragX和Cursor.totalDragY是从拖拽开始到现在的累计总距离Cursor.downTime是鼠标按下的持续时间毫秒。制作“鼠标跟随拖拽小工具”是典型练手场景。比如做一个拖拽排序的模拟原型列表项跟随光标移动// 列表项的“拖动时”事件 // 动作1移动当前元件 水平[[Cursor.dragX]] 垂直[[Cursor.dragY]] // 动作2若总拖动距离超过 50px则显示“拖拽中”状态提示 // 条件[[Cursor.totalDragX]] 50 || [[Cursor.totalDragY]] 50逻辑说明Cursor.dragX取的是当前这一帧相对上一帧的位移增量把它直接作为“移动”动作的水平偏移量元件就实时跟随。Cursor.totalDragX是累计值适合判断是否真正发生了有效拖拽而不是误触。参数说明Cursor.dragX与totalDragX的单位都是像素拖拽结束后变量值不会自动清零所以在“拖动结束时”事件里手动做一个“重置”或逻辑判断收尾避免下一次拖拽的起始值异常。Cursor.downTime对“长按弹出上下文菜单”这类交互很有用比如按住超过 800ms 才触发编辑操作[[Cursor.downTime]] 800。4.2 数值处理函数计算别“裸奔”精度要管住数值函数这块Axure 做得和 JavaScript 基本一致熟 JS 的人上手极快。常用的是[[Math.round([[num1]] [[num2]])]] [[NumberVar.toFixed(2)]]逻辑说明第一句先计算num1 num2再用Math.round取整避免 0.10.2 这类浮点误差直接暴露在界面上。第二句toFixed(2)把数字格式化为保留两位小数的字符串常用于金额展示但没有再做一次四舍五入精度问题依然存在——需要注意 JS 的 toFixed 在某些边界值如 1.005上行为不符合直觉如果要展示计算金额建议先用Math.round处理再显示整数值或者用toFixed(1)妥协。参数说明Math.ceil向上取整Math.floor向下取整Math.abs返回绝对值Math.sqrt平方根Math.random生成 0 到 1 之间的随机数Math.max与Math.min接收多个参数返回最大/最小值。计算前先确认参与运算的变量是数值类型一个从文本框读进来的值默认是字符串直接参与运算会得到拼接而不是相加// 错误示例 [[InputBox.text]] [[InputBox2.text]] // 若两个输入框的值是 1 和 2结果是 12 而不是 3 // 正确示例 [[Number([[InputBox.text]]) Number([[InputBox2.text]])]]4.3 字符串与日期函数拼文案和格式化日期的高频套路字符串函数里必备的是拼接与截取。登录页展示欢迎语就是一个例子[[Hello, [[userName]] !]] [[2024-12-01.substring(0, 7)]] // 取年份和月份逻辑说明Axure 里字符串拼接直接用运算符包裹在双方括号里输出到文本。substring(start, end)从指定位置开始截取注意它是按字符位置截取而不是按字符数多语言字符比如中文、日文都按单字符计宽度含义和 JS 的substring一致。参数说明length返回长度concat拼接indexOf与lastIndexOf查找子串位置replace替换——注意它默认替换首个匹配项全部替换需要用正则表达式全局匹配写成[[StringVar.replace(/test/g, sample)]]。split(separator)以分隔符拆成数组toUpperCase与toLowerCase转换大小写trim去首尾空格。文件批量导入场景我从[[Item.fileName.split(_)[1]]]这类表达式里提取文件名的规则字段频率很高。日期函数这一块Axure 提供的[[Now]]变量是当前时刻配合 getFullYear、getMonth、getDate 等方法来格式化展示。有个细节getMonth()返回 011所以月份要 1 才是常规显示直接用会差一个月。[[Now.getFullYear()]]年[[Now.getMonth() 1]]月[[Now.getDate()]]日 [[Date.parse(2024-01-01)]] // 解析日期字符串为时间戳参数说明getTime()返回毫秒级时间戳适合做时间差计算比如用户停留时长getTimezoneOffset()返回当前时区相对 UTC 的偏移分钟数在中国是 -480。Date.parse的入参格式不同浏览器有差异建议统一用 “YYYY-MM-DD” 或 “YYYY/MM/DD”避免斜杠与横杠混用导致解析失败。还有一点容易被忽略日期函数支持加减运算比如“显示 7 天后的日期”可以写成[[Now.getTime() 7 * 24 * 60 * 60 * 1000]]然后继续调用 get 系列方法格式化但要注意先转时间戳运算再重新分解出年月日。4.4 布尔值与条件判断把分支逻辑写到简洁可读布尔值和逻辑运算符在 Axure 里通常不是单独出现的而是嵌入到If(...)条件函数与三元表达式中。、!、、、、、逻辑与、||逻辑或、!逻辑非这些符号用法与常见编程语言几乎一致。[[If([[userIsLoggedIn]], 已登录, 未登录)]] [[If([[(num1 0) (num2 0)]], 两者都大于零, 至少有一个不大于零)]]逻辑说明第一个示例userIsLoggedIn是布尔型变量为 true 时显示“已登录”否则显示“未登录”。第二个示例表示两个条件要同时成立整体作为 If 的第一个参数传给条件判断。Axure 的三元表达式写作[[(num1 0) ? 正 : 负]]单独一个条件时比嵌套 If 更紧凑。参数说明有短路特性——左侧为 false 时右侧表达式不再计算。这个特性在 Axure 里意味着[[false (1/0 1)]]不会因为除零而报错但[[true (1/0 1)]]会。复杂条件建议加括号明确优先级写过[[num1 0 num2 0]]的人都知道不加括号遇到算符优先级问题时的抓狂感受。条件判断常用在按钮的启用/禁用、文本的多态展示、面板的显隐切换上是交互分支最底层的支撑机制。5. Axure 变量使用避坑手册命名、作用域、数据类型与中继器的六个经典坑这一章不做系统教学只列我实际做项目时反复撞过的坑。每一条都是先描述现象再给原因和解决路径。5.1 否定神学[[Item.isFirst]]系列的值和你想的不一样现象用[[Item.isFirst]]给第一个列表项加高亮结果高亮出现在每个列表项上或者干脆不出现。原因isFirst是一个布尔型判断属性不是通过“设置文本”直接输出的字符串。你在文本框里放[[Item.isFirst]]输出的是true/false文本而想要做条件高亮应该把条件放在“设置选中”“设置样式”等动作的条件判断里而不是放在文本内容里。解决想要拿到“当前项是不是第一项”这个结论要在列表项对应的样式控制里写条件表达式例如// 列表项“选中”样式条件的写法 [[Item.isFirst]] // 或更直观的条件写法 [[Item.index 1]]这样第一项高亮、其余项正常。把布尔值和输出内容混为一谈是初学 Axure 变量时最普遍的理解偏差。5.2 文本框的值是字符串不是数字现象两个输入框分别输入 3 和 4期望求和得到 7页面却显示 “34”。原因Axure 里文本框的值默认是字符串类型运算在字符串上执行的是拼接而不是加法。解决显式转型[[Number(InputBox.text) Number(InputBox2.text)]]同理parseFloat也可以做转换。另一个隐蔽入口是来自中继器数据集的数值列如果列类型没有显式设定为数字取值后依然是字符串运算前同样要转一次。5.3 全局变量有残留不会自己清空现象A 页面填了g_theme dark跳到 B 页面时主题还是暗色想回到默认浅色却发现没有重置入口。原因全局变量在整个原型运行期间一直持有值页面跳转不会自动复位。解决在所有需要默认状态的页面“页面加载时”事件里显式把变量重置为默认值或者设置专门的“初始化全局变量”页面作为原型启动入口在进入正式流程前把所有变量设为初始状态。涉及用户退出登录的状态必须在退出动作里手动清空相关变量不然后一个账号登录时会看到上一个账号的数据。5.4 中继器的 dataCount 和 itemCount 总差一行数现象数据集明明有 10 行界面上用[[Repeater.dataCount]]显示总条数却是 9或itemCount显示的是每页可见 4 条的值。原因dataCount是数据的完整行数itemCount是当前加载项的数量中继器分页后二者天然不一致。如果在列与列的混合逻辑里用错会得到奇怪的结果比如想在分页器上显示“共 dataCount 条”却写成了itemCount显示成当前页数量。解决总记录数统一用dataCount当前加载数量用itemCount可见数量用visibleItemCount。数据量统计类的展示务必确认用的哪个函数分页器上的“共 N 条”必须用dataCount这一点在代码里确定性很强。5.5 嵌套中继器取父级数据Item指代会错位现象父中继器套子中继器子项里要显示父级的名称写[[Item.ParentName]]经常显示空。原因在子中继器的作用域里Item指代的是子数据集当前行不是父级的当前行。父级字段需要通过TargetItem或更外层的引用方式取。解决子中继器内部的表达式用[[TargetItem.ParentName]]引用父级数据行前提是子中继器的“数据集数据集项”属性里通过TargetItem关联到父级。这个关联如果没建立数据显示空白排查方向要先看数据集关联而不是函数名。5.6 Axure 里没有[$]开头的“取页数”函数别被网上的老文章带偏现象老教程里写[[Item.rowCount]]、[[Repeater.pageIndex]]这样做分页新版本部分文档还出现过类似[[$Repeater]]的写法实际测试全都解析失败。原因Axure 的函数体系在不同大版本间有调整部分旧语法已经废弃。比如Item.rowCount在 RP 9/10 中并不是官方推荐的函数名称正确路径是dataCount与index的组合而[[$Repeater]]这类写法在新版本中根本不存在。解决以官方帮助文档里“Variables and Functions”章节和这份 PDF 中的列出的函数名称为准。写完后立即用 Axure 的预览功能实际验证一遍不要信老文章里的“快捷写法”。版本差异带来的坑在 Axure 里尤其明显——RP8 时代的不少函数在 RP9/10 已改名或移除。6. 把表达式做成自己的“函数库”全局变量 中继器 页面加载事件的组合复用理解了上面的所有函数和避坑点最后一层要解决的是“复用”。多数人做 Axure 原型是“页面用一次写一次表达式”结果同一个取日期格式的逻辑在五六个页面里各写一份改一个格式要全局搜索替换效率极低还容易漏。我的习惯是把高频逻辑收敛成几个标准模板用全局变量和“页面加载时”事件做成一套自己的“函数库”。最常见的套路是把“格式化当前日期”的定义收敛到一个专门的全局变量上。在项目的第一个页面通常叫“全局初始化”的“页面加载时”事件里做一次全局变量的批量赋值// 在某个隐藏文本标签的“文本”属性里写好表达式模板 [[Now.getFullYear()]]年[[Now.getMonth() 1]]月[[Now.getDate()]]日 // 或单独定义全局变量 g_footerText值为上面这句表达式然后所有页面的页脚直接引用[[g_footerText]]要改格式只改初始化页面里那一个表达式。这个方法把重复表达式的维护成本压缩到单个入口。第二个实用模式是“中继器空状态检测”的标准化。后台管理类原型的列表页面几乎都有“暂无数据”展示需求我给所有中继器加一个统一逻辑外层有一个“空状态”面板和列表面板用中继器的dataCount控制两个面板的显隐。// 空状态面板的“可见性”条件为中继器 Repeater1 添加 [[Repeater1.dataCount 0]] // 列表面板的“可见性”条件 [[Repeater1.dataCount 0]]这套组合在多个模块里都有效因为条件完全基于中继器的内置函数不依赖业务字段。凡是需要“列表为空时展示引导提示”的地方都套用这个模板。第三个模式是“状态机”变量。把用户所处流程阶段定义为一个全局变量g_state结合布尔条件判断控制按钮可用性// 编辑页面的“保存”按钮启用条件 [[g_state editing]] // 完成保存后在“保存成功提示”的“页面加载时”事件里设置 g_state saved原型演示到这一步评审看到的已经是“状态流转”而非“静态跳转”。这套组合能大幅压缩原型里重复表达式的数量也让后续维护的人不用逐个页面找逻辑直接看初始化页和几个核心条件就够了。最后一条要收尾的是验证习惯。现在我做任何涉及变量、函数、条件的改动都强制走一遍“定义 → 引用 → 预览验证”三步先在初始化页或元件属性里定义再在目标位置引用最后打开浏览器预览模式实际输入数据、滚动窗口、拖动滑块确认表达式输出的值符合预期。这个习惯是从一次交付前才发现全局变量名拼写错误、导致整个登录态展示失败的教训里养成的——那次之后每次原型交付前我都会手动跑一遍所有带变量的关键路径确认无异常再提交评审。希望这些拆分出来的用法和踩坑记录能帮到你让 Axure 原型从“能看”真正迈过“能用”这道坎。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
