第6章 函数系统：赋予商业原型逻辑智能与动态响应
第6章 函数系统：赋予商业原型逻辑智能与动态响应
6.1 函数：从静态交互到智能计算的跃迁
在产品原型设计的初期，我们满足于让按钮可以点击、让页面能够跳转、让面板切换状态。这构建了产品的“骨架”与“肌肉”。然而，当我们需要原型模拟真实商业场景中那些细微的、基于数据和逻辑的智能行为时——比如根据用户输入实时计算费用、基于当前时间显示不同的内容、或者对一段文本进行格式校验——我们就需要为原型注入“神经系统”。这个神经系统，就是Axure RP 11的函数系统。
函数，本质上是一系列预封装好的功能模块。你可以把它们理解为一个个专业的“工具箱”：有的工具箱擅长处理文字（字符串函数），有的精于计算（数学函数），有的内置了日历（日期函数），还有的能告诉你用户正在点击哪里（指针函数）或屏幕有多大（窗口函数）。产品经理不需要懂得这些函数背后的复杂代码，只需知道在什么业务场景下，调用哪个工具箱里的哪个工具，就能让原型“活”起来，具备响应环境和处理数据的能力。
掌握函数的核心价值在于提前验证复杂逻辑的可行性与用户体验。举个例子，在设计一个跨境物流的费用估算器时，你可以用数学函数和条件逻辑，在原型里嵌入真实的、包含首重、续重、燃油附加费、关税计算公式的完整逻辑。在产品评审会上，市场、运营、财务的同事可以直接输入不同国家、不同重量、不同服务类型，实时看到估算结果。这不仅能收集他们对计算模型本身的反馈，更能观察他们在使用这个“计算器”时的操作路径和困惑点，从而在开发之前就优化界面引导和交互设计。这比拿着一份写满公式的PRD文档要直观、高效得多。
6.2 指针与窗口函数：构建精确的交互感知系统
6.2.1 指针函数：捕捉用户的意图与焦点
指针函数（Cursor）围绕着鼠标（或手指）的位置与动作展开。它让原型能够“感知”用户的指向，从而实现诸如拖放定位、跟随鼠标的提示、以及基于点击位置的差异化反馈等高级交互。
商业实例：设计一个企业级Dashboard的图表自定义模块
假设你正在设计一个数据可视化后台，用户可以将不同的图表组件（如折线图、柱状图）拖拽到一个画布上进行自由排版。
- 拖拽实现：每个图表组件是一个动态面板。在其“拖动开始”交互中，使用
[[Cursor.x]]和[[Cursor.y]]记录下拖拽起始点的坐标。 - 精准放置与对齐线：
- 在“拖动时”交互中，持续获取当前指针位置。通过计算与画布上其他组件边缘或网格线的距离，判断是否进入“吸附范围”。
- 使用
Math.abs()函数计算距离绝对值。例如，如果[[Math.abs(Cursor.x - WidgetA.right)]] < 10，即当前指针距离组件A的右边缘小于10像素，则在画布上显示一条垂直的对齐参考线，并自动将正在拖动的组件与组件A右边缘对齐。 - 这模拟了专业设计工具（如Sketch、Figma）中的智能对齐功能，极大地提升了排版效率的用户体验。
- 右键上下文菜单：利用“鼠标右键单击时”事件，结合
[[Cursor.x]]和[[Cursor.y]]，在鼠标点击的精确位置显示一个动态面板作为上下文菜单（包含“编辑”、“复制”、“删除”等选项），而不是固定在某个角落。这符合用户对桌面应用交互的直觉预期。
指针函数让交互从粗放的“区域点击”进化到精细的“坐标级操作”，是构建专业、高效工具类产品原型不可或缺的能力。
6.2.2 窗口函数：打造自适应的界面容器
窗口函数（Window）关注的是浏览器或应用视图窗口本身的状态——它的尺寸、滚动位置。这在响应式网页设计（RWD）和单页应用（SPA）的模拟中至关重要。
商业实例：设计一个产品宣传页的沉浸式叙事体验
你需要设计一个通过滚动来触发动画和内容切换的“滚动叙事”长页面。
- 视差滚动效果：页面包含背景层、内容层等多个动态面板。在“窗口滚动时”交互中，持续读取
[[Window.scrollY]]（垂直滚动距离）。通过设置不同层级的动态面板以不同的速度移动（例如，背景层移动速度为[[Window.scrollY * 0.5]]，内容层为[[Window.scrollY * 1]]），可以创造出富有深度的视差滚动效果，增强视觉冲击力。 - 滚动触发动画：当页面滚动到某个区域时，该区域的图表或插图需要开始播放入场动画。
- 为目标图表元件设置“载入时”隐藏或设置为初始状态。
- 在页面交互的“窗口滚动时”事件中，添加条件判断：如果
[[Window.scrollY]]大于图表的Y坐标（可通过[[This.top]]或元件函数获取），则触发图表的显示或状态切换动画。 - 这比传统的“进入视口再触发”更可控，可以精确设计叙事节奏。
- 响应式布局切换：在“窗口尺寸改变时”交互中，通过读取
[[Window.width]]，判断当前是桌面端（>1024px）、平板端（768px-1024px）还是手机端（<768px）。根据不同的区间，使用“设置面板状态”动作，将页面的主布局动态面板切换到对应设计好的状态。这样，你可以在一个原型文件中，完整演示产品在不同设备上的完整适配方案，向客户或团队展示全面的兼容性思考。
窗口函数使你的原型从一个固定尺寸的“画框”，变成了一个能感知环境、灵活变化的“智能容器”，为多端适配和复杂交互动效提供了实现基础。
6.3 页面、数字与数学函数：驱动业务逻辑的核心引擎
6.3.1 页面函数：管理流程与状态的总指挥
页面函数（Page）主要用于获取当前页面的信息，最典型的是 [[PageName]]。它在构建需要明确页面上下文的流程时非常有用。
商业实例：设计一个多步骤的在线申请流程（如贷款申请、签证申请）
流程包含“基本信息”、“资产证明”、“工作信息”、“确认提交”等多个步骤页，顶部有一个进度指示器。
- 动态进度指示：在每个步骤页面，放置一个进度条组件。该组件是一个动态面板，其状态根据当前所在页面改变。
- 自动高亮当前步骤：在进度条上，“当前步骤”的样式需要高亮。可以在每个页面的“页面载入时”交互中，通过判断
[[PageName]]等于哪个页面名称，来设置进度条动态面板切换到对应状态。例如，如果[[PageName]] == “页面_工作信息”，则设置进度条面板状态为“步骤3高亮”。 - 智能导航与校验：“上一步”、“下一步”按钮的逻辑也可以基于页面函数来简化。可以创建一个全局变量
CurrentStep，在每次页面跳转时更新其值。然后根据CurrentStep的值，决定下一步该去哪个页面，并可以在跳转前执行针对该步骤的特定表单校验（使用条件逻辑与元件函数结合）。
6.3.2 数字与数学函数：商业计算的基石
数字函数（Number）用于处理数值的格式转换，如 toFixed() 用于保留小数点位数。数学函数（Math）则提供了强大的计算能力，包括四舍五入、取最大值/最小值、绝对值、随机数、幂运算等。
商业实例：设计一个动态定价的SaaS产品订购页面
产品价格根据用户选择的“席位数量”、“订阅年限”和“增值模块”动态变化，并提供“年付折扣”和“量大优惠”。
- 基础计算：
- 单价 = 基础席位费 × 折扣系数。折扣系数可通过
Math.pow()函数实现阶梯折扣，例如：折扣 = 0.98 ^ (年限-1)，实现第二年98折，第三年96折的效果。 - 总价 = (单价 × 席位数量 + 增值模块总价) × 年限折扣。
- 单价 = 基础席位费 × 折扣系数。折扣系数可通过
- 实时反馈：为席位数量、年限的选择器设置“选项改变时”交互。
- 在交互中，调用上述计算逻辑，使用
[[(单价*数量+模块费)*折扣]]这样的表达式。 - 使用
toFixed(2)确保显示的价格总是两位小数，例如：[[TotalPrice.toFixed(2)]]。 - 同时，可以使用
Math.max()和Math.min()来约束用户选择的席位数量在许可范围内（如1-1000个）。
- 在交互中，调用上述计算逻辑，使用
- 价格比较与优惠提示：计算“月度付款”和“年度付款”的总价差异，并使用
[[(月付总价-年付总价).toFixed(2)]]计算出节省金额，动态显示“选择年付节省XXX元”的提示标签。
通过数学函数，你将一个静态的价格表变成了一个交互式的报价模拟器。销售和客户成功团队可以在与客户沟通时，直接使用这个原型进行现场配置和报价，极大地提升了专业性。
6.4 日期与字符串函数：处理现实世界的信息
6.4.1 日期函数：让时间成为交互维度
日期函数（Date）能获取、创建和操作日期时间对象。这在任何与预约、时效、日程、内容 freshness（新鲜度）相关的产品中都是核心。
商业实例：设计一个智能会议预约系统
系统需要避免预约冲突，并只能预约未来时间。
- 禁用过去日期：在日期选择器中，需要灰化不可选的日期。虽然Axure原生控件不支持，但我们可以用中继器模拟一个日历。在生成每一天的格子时，使用日期函数判断：如果
[[ThisDate]] < [[Now]]（当前日期），则将该格子的交互设置为禁用，样式置灰。ThisDate可以通过Now的addDays()、addMonths()函数配合循环来生成。 - 计算会议时长：用户选择开始时间和结束时间后，需要自动计算并显示时长。
- 将选择的时间存入全局变量（如
StartTime,EndTime）。 - 使用
[[EndTime.getTime() - StartTime.getTime()]]得到毫秒差，再通过除以(1000*60)得到分钟数，并格式化为“X小时Y分钟”的文本。
- 将选择的时间存入全局变量（如
- 动态文案：在会议邀请的预览区域，生成诸如“会议定于 [[StartTime.getFullYear()]]年[[StartTime.getMonth()+1]]月[[StartTime.getDate()]]日，本周[[StartTime.getDay()]]，[[StartTime.getHours()]]:[[StartTime.getMinutes()]] 举行”的详细描述，提升确认感。
6.4.2 字符串函数：规范、校验与动态文本生成
字符串函数（String）用于处理一切文本信息：长度、查找、替换、截取、大小写转换等。它是表单验证、动态内容生成和数据处理的基础。
商业实例：设计一个用户注册与个人资料编辑系统
- 实时表单校验：
- 邮箱格式：在邮箱输入框“文本改变时”，判断
[[This.text.indexOf(‘@’)]] > 0且[[This.text.indexOf(‘.’)]] > This.text.indexOf(‘@’) + 1。 - 密码强度：通过检查
This.text.length（长度）、This.text.match(/[A-Z]/)（是否包含大写字母）、This.text.match(/d/)（是否包含数字）等，实时显示密码强度提示条。 - 用户名规范：使用
replace()函数过滤非法字符，例如[[This.text.replace(/[^a-zA-Z0-9_]/, ‘’)]]，并实时显示净化后的结果。
- 邮箱格式：在邮箱输入框“文本改变时”，判断
- 智能显示：在个人主页，欢迎语为“你好，[[UserName]]！”。但如果用户名太长（比如
[[UserName.length > 10]]），则使用substring()截断显示，如“你好，[[UserName.substring(0,8)]]…！” - 数据格式化：从数据库（用中继器模拟）拉取的产品代码可能是“PROD-00123”，在界面上显示时，你可能想用
split(‘-’)函数将其拆开，然后格式化为更易读的“产品号：00123”。
字符串函数确保了用户输入的数据是“干净”的，系统生成的信息是“友好”的，这是产品体验中专业性和细致度的直接体现。
6.5 元件函数：实现精细化的界面控制与反馈
元件函数（Widget）是所有函数中与界面元素绑定最紧密的一类。它可以获取和设置元件的各种属性，如尺寸、位置、文字、是否选中等。这实现了元件间的动态联动和基于状态的复杂交互。
商业实例：设计一个可自由配置的仪表板（Dashboard）
用户可以添加、移除、调整大小和拖放各类数据卡片。
- 动态布局参考线：
- 如之前指针函数案例所述，在拖动卡片时，需要与其他卡片的边缘对齐。这里需要频繁使用
[[TargetWidget.left]]、[[TargetWidget.width]]、[[TargetWidget.right]]等函数来获取其他卡片的几何信息，以计算距离和判断是否吸附。
- 如之前指针函数案例所述，在拖动卡片时，需要与其他卡片的边缘对齐。这里需要频繁使用
- 调整大小：
- 在卡片的右下角放置一个隐藏的“调整手柄”（一个小三角形图标）。鼠标移入卡片时显示。
- 为该手柄设置“拖动时”交互。在拖动过程中，需要动态设置当前卡片的宽度和高度：
新宽度 = [[Cursor.x - This.left]]，新高度 = [[Cursor.y - This.top]]。同时，可以加入Math.max()函数，限制一个最小尺寸，例如[[Math.max(新宽度, 200)]]。
- 自适应容器：
- 当卡片内的数据表格（中继器模拟）行数变化时，卡片高度应自动调整。可以在中继器“每项加载后”的交互中，使用“设置尺寸”动作，将卡片高度设置为
[[RepeaterDatatable.height + 100]]（表格高度加页眉页脚余量）。这里RepeaterDatatable.height就是元件函数。
- 当卡片内的数据表格（中继器模拟）行数变化时，卡片高度应自动调整。可以在中继器“每项加载后”的交互中，使用“设置尺寸”动作，将卡片高度设置为
- 状态同步：一个“全局筛选器”面板上的选项，需要同步影响仪表板上多个图表卡片。可以为筛选器的每个选项设置交互，当选中时，设置一个全局变量。在每个图表卡片的“页面载入时”或监听该变量变化的事件中，通过元件函数
[[This.text]]或[[This.state]]来改变自身显示的数据或状态。
元件函数让你的原型不再是各自为战的孤立元件的集合，而是一个内部紧密联动、可以自我调整的有机整体。它使得模拟像Windows桌面或现代IDE那样高度可定制、响应式的复杂界面成为可能。
6.6 综合商业实战：构建一个“智能客户关系管理（CRM）仪表板”
让我们将所有函数知识融入一个综合案例：为一家B2B软件公司设计下一代CRM系统的智能仪表板。
核心需求：
- 全局智能摘要：顶部显示根据登录用户角色和当前时间动态生成的问候语与关键指标。
- 可定制化Widget区：中间主体部分，销售代表可以自由添加如“我的本周待办”、“近期高意向客户”、“业绩完成率”、“销售漏斗”等Widget，并能拖放排序、调整大小。
- 智能提示：侧边栏有一个“智能助手”面板，基于当前数据（如久未跟进客户、合同即将到期）推送提示。
- 响应式布局：支持从桌面大屏到笔记本电脑的尺寸适配。
Axure实现与函数应用：
1. 全局智能摘要（字符串、日期函数）
- “页面载入时”交互。
- 使用日期函数
[[Now.getHours()]]判断当前是上午、下午还是晚上，生成时间问候语变量。 - 使用
[[PageName]]或全局变量UserName，拼接字符串：[[时间问候语]]，[[UserName]]经理，这是您今日的作战看板！。 - 关键指标（如“今日新增商机数”）从模拟数据的中继器中，通过计算
[[数据集.列名.length]]或满足特定条件的数据项数来动态获取。
2. 可定制化Widget区（元件、指针、数学函数）
- 每个Widget都是一个动态面板，内部包含特定内容（如中继器列表、进度条图表）。
- 拖放排序：利用指针函数记录拖拽起始点，在“拖动时”计算与其他Widget的位置（
[[OtherWidget.top]],[[OtherWidget.height]]），使用数学函数判断重叠区域，触发位置交换的动画。 - 调整大小：如前述，使用元件函数获取和设置被拖拽Widget的尺寸，并用
Math.max/min约束边界。 - 保存布局：用一个“保存布局”按钮，遍历所有Widget，将其
left,top,width,height等属性值，通过字符串函数拼接成一个JSON格式的字符串，存入一个全局变量或Axure的本地存储变量（高级用法），模拟布局持久化。
3. 智能助手（日期、数学、字符串、条件逻辑）
- 创建一个“智能提示”中继器，数据集中包含“客户名”、“最后跟进日期”、“合同到期日”等。
- 在“页面载入时”，为中继器添加“筛选”：
- 筛选1（久未跟进）：
[[Now.getTime() - Item.LastFollowUp.getTime() > 7*24*60*60*1000]]（超过7天）。 - 筛选2（合同到期）：
[[Item.ContractExpiry.getTime() - Now.getTime() < 30*24*60*60*1000]]（30天内）。
- 筛选1（久未跟进）：
- 将筛选结果的数量通过元件函数显示在助手面板的徽章上。点击后，展开列表，每一项都是可点击的，点击后跳转到对应客户详情页。
4. 响应式布局（窗口函数）
- 在“窗口尺寸改变时”交互中，读取
[[Window.width]]。 - 当宽度小于1200px时（切换到笔记本模式），可能将两栏的Widget布局自动调整为单栏，或者将某些次要的Widget动态面板的状态切换为“紧凑视图”。
通过这个综合原型，你向客户或团队展示的，不再是一张张孤立的界面图，而是一个功能完整、数据驱动、交互智能的解决方案仿真。函数在其中扮演了“粘合剂”和“催化剂”的角色，将数据、逻辑、交互和界面无缝地融合在一起。这极大地提升了产品方案的说服力，降低了跨部门沟通的成本，并能在开发启动前，就对产品最核心的“智能”体验进行充分的验证和迭代。掌握函数，就是掌握了用原型语言进行“产品逻辑编程”的能力，这是现代产品经理构建强大专业护城河的关键技能之一。
