在原型设计工作中,你是否经常遇到这样的场景:想要实现一个动态效果,隐约记得Axure有某个函数可以实现,但就是想不起它的具体名称、语法或参数格式?或者,面对一个复杂的交互逻辑,不确定应该组合使用哪些函数才能达到预期效果?每次都需要中断设计流程,去翻看零散的官方文档或网络教程,效率大打折扣。
针对这一痛点,本文将为你呈现一份精心整理的《Axure高保真原型函数自查表》。这不仅仅是一个简单的函数列表,更是一个集核心概念、语法详解、实战案例、组合技巧与避坑指南于一体的系统性工具。无论你是刚接触Axure交互的新手,还是希望提升原型动态表现力的资深设计师,这份自查表都能帮助你快速定位函数、理解用法,并激发更高效、更富创意的原型设计思路。
1. Axure函数基础:从概念到应用场景
在深入函数列表之前,我们有必要统一对Axure函数的基本认知。这有助于你理解“为什么用”和“什么时候用”,而不仅仅是“怎么用”。
1.1 什么是Axure函数?
Axure函数是内置于Axure RP软件中的一系列预定义操作指令。它们本质上是一些“黑盒子”,你输入特定的数据(参数),它们就会按照既定规则进行处理,并返回一个结果。这个结果可以是一个文本、一个数字、一个日期,或者一个逻辑值(真/假)。
与编程语言中的函数类似,Axure函数主要用于:
- 数据计算与转换:例如,对数字进行加减乘除,将文本转换为大写,或计算两个日期之间的天数。
- 条件判断与逻辑控制:例如,判断一个文本框是否为空,或比较两个值的大小,从而决定执行哪一段交互。
- 动态内容生成与操作:例如,获取元件的文字、选中状态,或设置元件的尺寸、位置。
- 模拟真实数据与行为:例如,生成随机数、获取系统时间,这在模拟数据展示和时效性交互时非常有用。
1.2 函数的应用场景:告别静态,拥抱动态
理解函数能做什么,最好的方式就是看它用在哪儿。以下是一些典型的高保真原型应用场景:
- 表单验证:用户提交表单时,使用函数检查邮箱格式、密码强度、必填项是否为空。
- 动态计价与计算器:在电商原型中,根据用户选择的商品数量、套餐类型,实时计算并显示总价。
- 数据筛选与搜索:在列表或表格中,根据输入的关键词,动态过滤显示匹配的条目。
- 进度指示与状态反馈:根据用户完成的任务步骤,动态更新进度条的百分比和文字提示。
- 模拟后台数据加载:结合中继器(Repeater)和函数,模拟分页加载、排序、以及从“服务器”获取并显示数据的过程。
- 复杂的条件交互:实现“当A面板展开且B复选框被选中时,才显示C按钮”这类多条件触发的交互。
1.3 函数的书写位置与语法规则
Axure函数主要在以下两个地方被调用:
- 交互编辑器:在设置元件交互时,在“设置文本/值”、“设置变量值”、“条件判断”等动作的编辑框中插入函数。
- 元件属性或文本:在元件的“文本”属性中,或者直接在矩形、文本标签等元件的文字上,可以插入函数来显示动态内容。
基本语法格式: 大多数Axure函数遵循以下格式之一:
[[函数名(参数1, 参数2, ...)]][[函数名]](对于无需参数的函数)
例如,获取当前日期:[[Now.getDate()]]例如,将文本转换为大写:[[ToUpperCase(‘axure’)]]会返回 “AXURE”。
重要概念:局部变量与全局变量函数经常与变量配合使用,以传递和存储数据。
- 局部变量 (Local Variable):在单次交互的上下文中临时使用,用于捕获某个元件的值或属性(如
LVAR1)。常用于将A元件的值传递给函数处理,再应用到B元件。 - 全局变量 (Global Variable):在整个原型项目中持久存在,用于存储需要在多个页面间共享的数据(如
OnLoadVariable)。函数可以读取或设置全局变量的值。
2. 核心函数分类详解与速查表
我们将Axure的常用函数分为几大类,每一类都会提供函数名、语法、简要说明、返回值示例和典型应用场景。你可以把这一节当作随时查阅的“字典”。
2.1 字符串处理函数
这类函数用于操作文本(字符串)数据。
| 函数名 | 语法示例 | 说明 | 返回值示例 | 应用场景 |
|---|---|---|---|---|
ToUpperCase | [[ToUpperCase(‘hello’)]] | 将字符串转换为大写。 | HELLO | 统一用户输入格式(如验证码)、标题格式化。 |
ToLowerCase | [[ToLowerCase(‘WORLD’)]] | 将字符串转换为小写。 | world | 实现不区分大小写的搜索比较。 |
Substring | [[Substring(‘AxureRP’, 0, 5)]] | 提取子字符串。参数:(原字符串, 开始索引, 长度)。索引从0开始。 | Axure | 显示长文本的前N个字符作为摘要。 |
CharAt | [[CharAt(‘Apple’, 0)]] | 返回字符串中指定位置的字符。索引从0开始。 | A | 提取首字母生成头像。 |
Length | [[Length(‘Prototype’)]] | 返回字符串的字符长度。 | 9 | 实时显示输入框剩余字数、验证输入长度。 |
Concat | [[Concat(‘Hello’, ‘ ‘, ‘World’)]] | 连接两个或多个字符串。 | Hello World | 动态生成完整的问候语、地址信息。 |
Replace | [[Replace(‘I like dog’, ‘dog’, ‘cat’)]] | 替换字符串中的部分文本。 | I like cat | 批量修改文本模板中的占位符。 |
Trim | [[Trim(‘ text ‘)]] | 去除字符串两端的空格。 | text | 清理用户输入,避免因首尾空格导致验证失败。 |
ToString | [[ToString(123)]] | 将数字转换为字符串。 | 123 | 需要将数字与文本拼接显示时。 |
实战技巧:
Substring和Length结合,可以轻松实现“查看更多/收起”效果:[[Substring(长文本, 0, 100)]]...,当长度超过100时才截断。- 表单验证时,常用
[[Trim(LVAR1)]]来处理输入,再使用[[Length( trimmedText )]]判断是否为空。
2.2 数学计算函数
用于执行算术运算和数值比较。
| 函数名 | 语法示例 | 说明 | 返回值示例 | 应用场景 |
|---|---|---|---|---|
+,-,*,/ | [[3 + 5]],[[LVAR1 * 2]] | 加、减、乘、除。 | 8,10(假设LVAR1=5) | 所有数值计算,如单价*数量。 |
% | [[10 % 3]] | 取模(求余数)。 | 1 | 判断奇偶、实现循环索引。 |
Ceil | [[Ceil(4.2)]] | 向上取整。 | 5 | 计算分页总页数。 |
Floor | [[Floor(4.8)]] | 向下取整。 | 4 | |
Round | [[Round(4.5)]] | 四舍五入取整。 | 5 | 价格、评分等需要整数的显示。 |
Min | [[Min(10, 20)]] | 返回参数中的最小值。 | 10 | 限制最大值(如库存)。 |
Max | [[Max(10, 20)]] | 返回参数中的最大值。 | 20 | 限制最小值(如起购数量)。 |
Abs | [[Abs(-10)]] | 返回绝对值。 | 10 | 计算差值,不考虑正负。 |
Random | [[Math.random()]]注意 | 生成一个0到1之间的随机小数。 | 0.123... | 模拟随机数据、抽奖效果。 |
重要提示:
- Axure的随机函数是
Math.random(),它返回一个介于0(包含)和1(不包含)的小数。要生成指定范围的随机整数,需要配合其他函数,例如生成1-100的随机整数:[[Ceil(Math.random()*100)]]。 - 数学运算中,确保参与计算的值是数字类型。如果从文本框获取,可能需要用
[[ToNumber(LVAR1)]]进行转换。
2.3 日期与时间函数
用于操作和显示日期、时间。
| 函数名/属性 | 语法示例 | 说明 | 返回值示例 (假设当前为2023-10-27 14:30:15) |
|---|---|---|---|
Now | [[Now]] | 返回完整的当前日期时间对象。 | Fri Oct 27 2023 14:30:15 GMT+0800 |
.getFullYear() | [[Now.getFullYear()]] | 从日期对象中获取年份。 | 2023 |
.getMonth() | [[Now.getMonth()]] | 获取月份 (0-11,0代表一月)。 | 9(代表十月) |
.getDate() | [[Now.getDate()]] | 获取月份中的天数 (1-31)。 | 27 |
.getHours() | [[Now.getHours()]] | 获取小时 (0-23)。 | 14 |
.getMinutes() | [[Now.getMinutes()]] | 获取分钟 (0-59)。 | 30 |
.getSeconds() | [[Now.getSeconds()]] | 获取秒数 (0-59)。 | 15 |
.getDay() | [[Now.getDay()]] | 获取星期几 (0-6,0代表星期日)。 | 5(代表星期五) |
AddYears/AddMonths/AddDays | [[Now.AddDays(7)]] | 为日期添加指定的年/月/日。 | 返回7天后的日期对象 |
toDateString() | [[Now.toDateString()]] | 将日期部分转换为易读的字符串。 | Fri Oct 27 2023 |
实战技巧:
- 由于
.getMonth()和.getDay()返回的索引从0开始,在实际显示时通常需要加1或映射到中文。例如,显示星期几:可以创建一个全局变量数组[‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’],然后通过[[Now.getDay()]]作为索引来获取。 - 计算倒计时或日期差:将两个日期对象相减,得到的是毫秒数差,需要进一步换算成天/小时。
2.4 元件属性与页面函数
这类函数用于获取或操作原型中元件和页面本身的信息,是实现动态交互的核心。
| 函数名/属性 | 语法示例 | 说明 | 应用场景 |
|---|---|---|---|
[[This]] | 在元件的交互中直接使用 | 指代当前正在触发交互的元件自身。 | 设置当前元件的文本、样式。 |
[[Target]] | 在“设置文本”等动作中,选择“目标”为元件后,其值会以[[Target]]形式出现 | 指代交互动作的目标元件。 | 将A元件的值传递给B元件时,B就是Target。 |
.text | [[LVAR1.text]] | 获取元件的文本内容。 | 获取输入框的值、标签的文字。 |
.value | 主要用于下拉列表、列表框等 | 获取选中项的值。 | 获取用户在下拉框中选择的选项值。 |
.isSelected | [[CheckBox.isSelected]] | 判断元件是否被选中,返回true或false。 | 条件判断,如“当复选框被选中时显示更多选项”。 |
.width/.height | [[Rectangle.width]] | 获取元件的宽度或高度。 | 实现动态布局、根据内容调整尺寸。 |
.x/.y | [[Button.x]] | 获取元件相对于页面的X/Y坐标。 | 实现拖拽效果、计算元件位置。 |
PageName | [[PageName]] | 返回当前页面的名称。 | 在页脚显示当前页面名称、制作面包屑导航。 |
2.5 中继器(Repeater)相关函数
中继器是Axure实现动态数据列表的超级武器,其专属函数功能强大。
| 函数名 | 语法示例 | 说明 | 应用场景 |
|---|---|---|---|
Item | [[Item.ColumnName]] | 在中继器内部,指代当前行的数据项。ColumnName是中继器数据集的列名。 | 将中继器数据绑定到内部元件上,如[[Item.ProductName]]。 |
TargetItem | 在针对中继器内某行的交互中 | 指代交互所针对的那个特定数据项(行)。 | 点击某行的“删除”按钮时,删除TargetItem。 |
repeater | [[repeater]] | 指代当前元件所在的中继器对象。 | 在外部控制中继器,如[[repeater.sort(‘Price’, ‘Ascending’)]]。 |
.visibleItemCount | [[repeater.visibleItemCount]] | 获取中继器当前可见的数据项数量。 | 显示“当前显示X条,共Y条”。 |
.itemCount | [[repeater.itemCount]] | 获取中继器数据集中总的数据项数量。 | 显示总条数。 |
.pageCount | [[repeater.pageCount]] | 获取分页后的总页数。 | 制作分页器,显示“第X页/共Y页”。 |
.pageIndex | [[repeater.pageIndex]] | 获取当前页码(从0开始)。 | 高亮显示当前页码按钮。 |
3. 函数组合实战:打造高保真交互案例
理解了单个函数,我们通过几个综合案例,看看如何将它们组合起来,解决复杂的交互问题。
3.1 案例一:智能表单验证与实时反馈
需求:一个用户注册表单,包含邮箱和密码字段。要求:1)邮箱输入时实时验证格式;2)密码输入时实时显示强度(弱/中/强);3)提交时再次验证。
步骤分解与函数应用:
邮箱格式验证(使用
OnTextChange事件):- 思路:使用
IndexOf函数检查是否包含“@”和“.”,并且“.”在“@”之后。 - 交互设置:
- 事件:邮箱文本框
OnTextChange。 - 条件:
[[LVAR1.indexOf(‘@’)]] < 0或[[LVAR1.indexOf(‘.’)]] < 0或[[LVAR1.indexOf(‘.’)]] <= [[LVAR1.indexOf(‘@’)]]。 - 动作:如果为真,设置提示标签文字为“邮箱格式不正确”,颜色为红色;否则,清空提示。
- 事件:邮箱文本框
- 思路:使用
密码强度实时显示(使用
OnKeyUp事件):- 思路:根据密码长度、是否包含数字、大小写字母、特殊字符来评分。
- 交互设置:
- 事件:密码文本框
OnKeyUp。 - 定义局部变量
pwd获取文本框值。 - 使用多个条件分支:
- 强:
[[pwd.length]]>=8且包含大小写字母和数字。可使用[[pwd.match(/[a-z]/)]]等正则思路(Axure不支持直接正则,需用IndexOf遍历判断,为简化此处用逻辑描述)。 - 中:
[[pwd.length]]>=6且包含两种字符类型。 - 弱:其他情况。
- 强:
- 动作:根据条件,设置强度提示条的宽度和颜色,并更新文字。
- 事件:密码文本框
提交时最终验证:
- 思路:点击提交按钮时,检查所有条件。
- 交互设置:
- 事件:提交按钮
OnClick。 - 条件:邮箱格式正确且密码强度不为弱且确认密码匹配 (
[[LVAR_pwd1]] == [[LVAR_pwd2]])。 - 动作:如果条件满足,显示成功提示;否则,显示具体的错误信息汇总。
- 事件:提交按钮
3.2 案例二:动态数据仪表盘(结合中继器与日期函数)
需求:一个仪表盘页面,显示“今日新增订单数”和“最近7天销售额趋势”。
步骤分解与函数应用:
数据结构:创建一个中继器
Orders,数据集包含列:OrderID,Amount(销售额),Date(订单日期,格式如2023-10-27)。今日新增订单数:
- 思路:过滤出日期等于今天的订单,并计数。
- 实现:
- 在中继器外放置一个文本标签
TodayCount。 - 在页面加载时 (
OnPageLoad),设置中继器Orders的过滤器:[[Item.Date == Now.toDateString()]]。 - 设置
TodayCount的文本为:今日新增:[[Orders.visibleItemCount]] 单。
- 在中继器外放置一个文本标签
最近7天销售额趋势:
- 思路:需要按天分组计算销售额总和。Axure中继器没有原生的分组求和,但可以巧妙利用过滤和循环(通过全局变量累加)。
- 简化实现(显示7天总销售额):
- 计算7天前的日期:
[[Now.AddDays(-7).toDateString()]]。 - 设置中继器过滤器:
[[Item.Date >= WeekAgoDate]]。(这里需要将WeekAgoDate存入一个全局变量)。 - 添加一个“销售额总和”计算:
- 添加一个全局变量
TotalAmount,初始为0。 - 添加一个“每项加载时”交互到中继器
Orders:设置TotalAmount值 =[[TotalAmount + Item.Amount]]。 - 在中继器外放置一个文本标签
WeekSales,设置其文本为:最近7天销售额:[[TotalAmount]] 元。
- 添加一个全局变量
- 计算7天前的日期:
- 进阶提示:要真正实现按天趋势图,通常需要预先在数据集中处理好每天的总和,或者使用多个中继器/矩形来模拟图表,通过函数计算每个柱子的高度。
3.3 案例三:模拟分页与搜索功能
需求:一个产品列表,支持按关键词搜索,并分页显示。
步骤分解与函数应用:
基础列表:创建一个中继器
ProductList,包含Name,Price,Category等列。为其项(Item)设置好显示样式。搜索功能:
- 添加一个搜索输入框
SearchInput和一个搜索按钮SearchBtn。 - 为
SearchBtn添加OnClick交互:- 添加过滤器到中继器
ProductList。 - 过滤条件:
[[Item.Name.indexOf(SearchInput.text)]] >= 0或[[Item.Category.indexOf(SearchInput.text)]] >= 0。 indexOf函数在找不到时会返回-1,因此>=0表示包含搜索词。
- 添加过滤器到中继器
- 添加一个搜索输入框
分页功能:
- 设置中继器属性:勾选“分页”,设置“每页项目数”(如5)。
- 制作分页器元件组:包含“上一页”、“下一页”按钮和页码显示标签。
- “上一页”按钮交互(
OnClick):- 条件:
[[ProductList.pageIndex]] > 0(不是第一页)。 - 动作:
Set Current Page->ProductList->值:[[ProductList.pageIndex - 1]]。
- 条件:
- “下一页”按钮交互(
OnClick):- 条件:
[[ProductList.pageIndex]] < [[ProductList.pageCount - 1]](不是最后一页)。 - 动作:
Set Current Page->ProductList->值:[[ProductList.pageIndex + 1]]。
- 条件:
- 页码显示标签:设置文本为:
第 [[ProductList.pageIndex + 1]] 页 / 共 [[ProductList.pageCount]] 页。
4. 常见问题与排查思路
在使用函数构建交互时,你可能会遇到一些“坑”。下表汇总了常见问题及其解决方法。
| 问题现象 | 可能原因 | 排查与解决思路 |
|---|---|---|
函数不生效,显示为[[函数名]]原文本 | 1. 函数书写格式错误,如缺少括号、引号不匹配。 2. 在错误的上下文使用函数(如在普通文本框中直接写,未在交互编辑器中插入)。 | 1. 仔细检查语法,确保所有括号成对,字符串参数用单引号包裹。 2. 确保函数写在交互动作的编辑框或元件的“文本”属性中(需双击进入编辑状态)。 |
局部变量LVAR1值为空或未定义 | 1. 未正确设置局部变量指向的元件。 2. 在设置局部变量的交互之前,目标元件的值就是空的。 | 1. 在交互编辑器中,检查局部变量的“元件”选择是否正确。 2. 确保获取值的时机正确,例如在 OnClick事件中获取文本框的值,应在用户输入之后。 |
数学计算返回NaN(Not a Number) | 参与计算的某个值不是有效的数字,可能是空字符串或文本。 | 1. 使用ToNumber()函数将文本转换为数字,如[[ToNumber(LVAR1) + 10]]。2. 在计算前用条件判断值是否为空或是否为数字。 |
| 中继器过滤或排序无效 | 1. 过滤条件逻辑写错。 2. 列名拼写错误或大小写不一致。 3. 数据类型不匹配(如用数字比较文本)。 | 1. 使用简单的条件测试,如[[Item.ID == ‘1’]]。2. 核对中继器数据集的列名,必须完全一致。 3. 数字比较不用引号,文本比较要用引号。 |
| 日期函数显示不正常或报错 | 1..getMonth()返回0-11,直接显示会让人误解。2. 对非日期对象调用了日期方法。 | 1. 显示月份时加1:[[Now.getMonth()+1]]。2. 确保操作对象是日期类型, Now是日期对象,而Now.toDateString()是字符串。 |
| 交互逻辑复杂导致性能卡顿 | 在OnTextChange、OnMove等频繁触发的事件中使用了大量复杂函数或循环。 | 1. 优化条件逻辑,减少不必要的计算。 2. 对于实时搜索,可以加入延迟( Wait)动作,避免每次按键都触发过滤。3. 考虑将部分逻辑移到 OnClick等用户主动触发的事件中。 |
5. 高阶技巧与最佳实践
掌握了基础函数和常见问题后,遵循一些最佳实践能让你的原型更健壮、更易维护。
5.1 规划与命名规范
- 变量命名清晰:全局变量使用如
g_UserName、g_CurrentPage这样的前缀,局部变量虽自动生成,但在描述中注明用途。 - 中继器列名有意义:使用
Product_Name、Order_Date而非column1、col2。 - 先规划后动手:在Axure中画交互流程图或写下伪代码,理清“事件-条件-动作”的逻辑链,再开始配置。
5.2 模块化与复用
- 使用母版:将通用的函数交互(如导航栏、页脚、模态框)制作成母版,一处修改,全局更新。
- 利用“引发事件”:将复杂的、可复用的交互逻辑(如一个格式验证函数组)封装在一个元件的交互里,通过“引发事件”在多个地方调用,避免重复配置。
5.3 性能与体验优化
- 慎用实时触发:
OnTextChange、OnMove、OnResize等事件会频繁触发,其中的函数计算应尽可能轻量。 - 中继器数据量:当中继器数据行非常多时(如超过100行),过滤、排序操作可能会有可见延迟。在高保真演示中,考虑使用有代表性的少量数据。
- 提供加载状态:对于模拟网络请求的交互(如过滤大量数据),可以先用“显示”动作展示一个加载动画,用“等待”动作模拟延迟,再用“隐藏”动画和“设置文本”动作显示结果,提升真实感。
5.4 测试与交付
- 分段测试:不要等所有交互做完再测试。完成一个复杂功能模块(如搜索过滤)后,立即在预览中测试其各种边界情况。
- 边界值测试:测试输入为空、极值、特殊字符时函数的反应。
- 生成说明文档:在Axure中可以使用“注释”功能,为复杂的函数交互添加说明,方便团队协作和后续维护。在交付给开发或产品经理时,一份清晰的交互说明文档至关重要。
函数是Axure高保真原型的灵魂。从简单的文本转换到驱动整个动态数据列表,它们将静态线框图转化为可体验、可验证的交互模型。这份自查表旨在成为你手边的速查手册,但真正的掌握源于实践。建议你创建一个“Axure函数实验室”的RP文件,将每个函数都亲手尝试一遍,并构建文中的几个案例。当你能熟练地将这些函数像积木一样组合搭建时,你会发现,表达复杂的交互逻辑不再是一种障碍,而是一种乐趣。