Axure高保真原型函数速查手册：从基础语法到实战应用

在原型设计工作中你是否经常遇到这样的场景想要实现一个动态效果隐约记得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(假设LVAR15)所有数值计算如单价*数量。%[[10 % 3]]取模求余数。1判断奇偶、实现循环索引。Ceil[[Ceil(4.2)]]向上取整。5计算分页总页数。Floor[[Floor(4.8)]]向下取整。4Round[[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 GMT0800.getFullYear()[[Now.getFullYear()]]从日期对象中获取年份。2023.getMonth()[[Now.getMonth()]]获取月份 (0-110代表一月)。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-60代表星期日)。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]] 元。进阶提示要真正实现按天趋势图通常需要预先在数据集中处理好每天的总和或者使用多个中继器/矩形来模拟图表通过函数计算每个柱子的高度。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文件将每个函数都亲手尝试一遍并构建文中的几个案例。当你能熟练地将这些函数像积木一样组合搭建时你会发现表达复杂的交互逻辑不再是一种障碍而是一种乐趣。