简介面向产品经理、交互设计师及需要提升原型演示效果的学习者《Axure RP 9 使用详解》以单份docx文档系统梳理从基础界面到高阶交互的操作路径帮助摆脱只会简单画图、备注堆砌、难以向客户演示的困境。全文围绕页面与工具栏、元件样式与部件库、下拉列表、文本框、多选框、内链框架、热区、动态面板、右键效果、函数运算、图形外显批注和取色工具等模块展开并延伸到隐藏/显示顺序、水平与垂直菜单及HTML演示文件生成形成较完整的实操知识框架。资源包共1个docx文件约2.54MB目录层级清晰便于按知识点检索与对照练习。目前已有6587人学习下载适合希望系统掌握Axure RP 9、提升项目投标与团队协作沟通效率的初、中级原型设计者。1. 原型不是画图Axure RP 9 里真正拉开差距的是状态与事件评审桌上最常见的一幕一份 Axure RP 9 做的原型几十个页面画得工工整整备注密密麻麻客户点了一下按钮没反应再点一下下拉框还是没反应。设计者赶紧补一句“这里点下去会跳到详情页”客户点点头翻到下一页。差距不在画得好看不好看而在于这份原型里只有“页”没有“态”和“事”。多数人把 Axure RP 9 当成画布工具它实际上是一个带状态机和事件驱动的小型运行时。元件属性、动态面板当前处于哪个 State、全局变量此刻的值三者合起来构成一份运行时快照你配的每一条交互都是在这份快照上做的状态转移。血泪经验是原型拿不出手八成不是视觉问题是这份快照根本没被设计过。2. 动态面板为什么它是唯一能装下“时间”的元件除了动态面板Axure 里所有元件都是无状态的。矩形、文本、图片、按钮在模型里就是一组属性位置、尺寸、样式、文本内容、可见性。它们没有“过去”你把一个矩形改成红色它就只是红色没有“从蓝色变过来”这回事。动态面板是唯一一个把历史维度塞进模型的元件这也是为什么几乎所有复杂交互最后都要绕回它。2.1 无状态元件与有状态元件的分界线动态面板在模型里多了一个 States 数组。每个 State 不是一组属性覆盖而是一棵完整的子元件树有自己的坐标系原点在面板左上角有自己的尺寸有自己的元件层级。切换 State 的语义是整体替换当前渲染的子树不是把 A 里的几个元件隐藏、把 B 里的几个元件显示出来。这个区别决定了很多行为。State A 里放了一个输入框State B 里没放切到 B 之后那个输入框就不存在了你在页面上写Set Text去改它的值改的是一个不在渲染树里的对象不报错但用户看不见。反过来如果两个 State 里各放了一个同名输入框它们是两个不同的元件交互要分别绑绑错一份是极常见的翻车点。从 HTML/CSS 的视角类比动态面板更像一个只渲染当前分支的容器而不是把多个分支都渲染出来再用display控制显隐。这一点想通了后面很多“为什么我改了没生效”的疑问会自己消失。2.2 Set Panel State 的参数切换动画与执行语义动态面板的核心动作是Set Panel State它在交互编辑器里的配置项不多但每一项都影响结果。{ action: SetPanelState, panel: dpContent, state: Next, transition: slide-left, duration: 300, wrap: true, pullWidgets: false }这段配置表达的是把名为dpContent的面板切到“下一个”状态用 300 毫秒向左滑动过渡如果已经是最后一个状态就回到第一个不拉伸面板尺寸。state有三个取值方向Next、Previous或者直接指定某个状态名。Next配合wrap就是轮播图无限循环的全部秘密不需要写任何判断。transition决定过渡动画none是硬切fade是淡入淡出slide-*是位移duration是动画时长单位毫秒。pullWidgets容易被忽略勾选后如果目标 State 的尺寸比面板当前尺寸大面板会被拉到目标尺寸不勾选则维持原尺寸超出的部分被裁掉。pullWidgets是我见过最多人踩坑的参数。面板被拉大之后因为 Axure 里所有元件都是绝对定位、没有文档流的概念周围的元件不会让位只会被盖住。演示时看起来就像“点了一下下面的按钮消失了”。要不要开取决于你希望面板尺寸跟着内容走还是内容被面板尺寸约束。2.3 选项卡、折叠、轮播为什么会收敛到同一个模型把常见交互拆开看会发现它们都是同一个东西的不同外观。交互形态State 数量触发源关键配置选项卡等于标签数标签元件的 OnClick指定状态名无动画折叠面板等于展开项数或 2标题行的 OnClick指定状态名滑动动画轮播图等于图片数OnLoad Wait OnClickNext wrap位移动画步骤条等于步骤数上一步/下一步按钮Next / Previous弹层2空 / 内容触发按钮 OnClick淡入配合 Show/Hide这张表背后的思路是有限状态机把界面看成“若干个互斥的稳定状态 状态之间的转移”动态面板是状态寄存器交互配置是转移函数。用这个视角看一个选项卡组件不是“三个按钮加三块内容”而是“一个三状态的寄存器三个转移入口”。这种抽象的价值在于可穷举。状态数一旦确定你就可以列出所有转移路径逐条验证而如果按“显示隐藏一堆元件”的方式做状态是组合爆炸的永远测不完。做原型做得久的人往往不是元件用得多是状态数控制得住。3. 交互事件链一次点击之后动作是按什么顺序跑完的动态面板解决了“状态存在哪”接下来的问题是“状态怎么变”。Axure 的交互系统是三层结构事件是触发源用例是策略动作是效果。这三层的顺序语义如果没搞清楚写出来的交互就是玄学有时候对有时候不对而且改一个地方会影响另一个地方。3.1 事件、用例、动作三层结构事件是元件或页面上的钩子常见的有OnClick、OnMouseEnter、OnMouseOut、OnShow、OnHide、OnLoad、OnWindowResize、OnSelectionChange。事件本身不做事它只负责“被触发”。用例Case挂在事件下面一个事件可以挂多个 Case每个 Case 可以带条件。动作Action挂在 Case 里面一个 Case 可以挂多个 Action按你排的顺序执行先Set Text再Show再Wait再Set Panel State。这里有个容易忽略的细节Wait是异步的。它不会阻塞后面动作的“定义”但会阻塞后面动作的“执行”。也就是说Wait 500之后的动作实际生效时间被推迟了 500 毫秒而在这 500 毫秒里用户完全可以再点一次按钮触发第二轮。做轮播自动播放时OnLoad里挂一个循环的Wait Next如果用户手动点了“下一张”两套计时器就会叠在一起动画开始抽搐。这是原型里最典型的时序 bug。3.2 If 与 Else If最容易翻车的判定顺序Axure 的 Case 判定不是if / else而是顺序扫描加显式截断。这个差别值得单独说清楚。// Axure 用例判定器的等价逻辑简化 function runEvent(cases, ctx) { let executed false; for (const c of cases) { // Else If只要前面已经有 Case 执行过就整条跳过 if (c.isElseIf executed) continue; // 没有条件的 Case 恒为真 const pass c.condition ? evaluate(c.condition, ctx) : true; if (pass) { runActions(c.actions, ctx); // 动作按顺序同步执行 executed true; // 注意不 break } } }关键在最后那个不break。Axure 会从上往下把每一条 Case 都判定一遍条件成立就执行然后继续往下走。这意味着如果你写了两个都没有条件的 Case两个都会执行如果你写了三个 Case第一个无条件、第二个有条件且成立两个都会执行。想实现互斥必须在后面那些 Case 上勾Else If。它的语义是“前面已经执行过任何一条就跳过本条”而不是“前面的条件不成立”。这两个理解差异是新手写交互时最常出现的逻辑错乱来源明明想表达“如果已登录就跳转首页否则提示登录”结果写成了两个独立 Case用户既跳转了首页又看到了提示。我的习惯是只要一段交互里出现两个以上的 Case第二个开始一律先勾Else If再回头确认第一个是否真的需要无条件。多勾一下比事后在演示现场被客户问“为什么两个都出来了”要便宜得多。3.3 变量作用域全局变量、局部变量与内联框架的墙Axure 的变量分两种。全局变量在项目设置里定义生成后挂在原型运行时的一个共享上下文上所有页面、所有动态面板的 State 读到的是同一份。局部变量不写在项目设置里它是在“设置值”或“条件”对话框里临时定义的别名只在当前这一次表达式求值期间有效典型用途是引用当前元件的属性比如把This.text起个别名叫LVAR1后面反复用。全局变量的默认值会随工程一起序列化进产物。这一点的实践含义是任何一个依赖全局变量的条件判断只要变量没被赋过值读到的就是默认值如果默认值留空读到的就是空字符串比较时既不等于 0 也不等于 1条件恒假界面永远走 else 分支。我一般会要求每个全局变量都必须有非空默认值哪怕是0或none让“未初始化”这个状态不存在。内联框架是一堵墙。它加载的是另一个页面文档有自己独立的运行时上下文元件引用不能直接跨过去页面上写的Set Text改不到框架里的元件。但全局变量是例外它挂在共享层框架内外读写的是同一份。所以跨框架传值的标准姿势是框架内页面把结果写进全局变量框架外页面用OnClick或OnShow读这个变量再回填到自己的元件上。反方向同理。用Raise Event也能跨但那是母版到宿主页面的方向和内联框架不是一回事下一章会讲清楚这条边界。3.4 [[ ]] 表达式与函数原型的“计算”能力Axure 里凡是可以填值的地方基本都能写表达式语法是双中括号包裹里面按 JavaScript 的规则求值。这给了原型真正的计算能力而不只是静态文本替换。// 截断长文本最多显示 10 个字符超出加省略号 [[This.text.length 10 ? This.text.substring(0, 10) … : This.text]] // 分页计算每页 20 条当前第 3 页算出起始序号 [[(LVAR1 - 1) * 20 1]] // 拼日期今天往后推 7 天显示成 2024-06-01 这种格式 [[Now.addDays(7).getFullYear() - (Now.addDays(7).getMonth() 1) - Now.addDays(7).getDate()]]第一段的三元表达式用来做文本溢出处理This指当前元件.length是字符串长度.substring(0, 10)取前 10 个字符。第二段是LVAR1局部变量参与算术运算注意表达式里可以直接做四则运算不需要额外函数。第三段暴露了 Axure 日期函数的一个真实陷阱getMonth()返回 0 到 11所以显示月份必须加 1getDate()才是“日”。可用的函数大致分几类字符串有length、substring、indexOf、replace、split、trim、toUpperCase数学有Math.floor、Math.ceil、Math.abs、Math.random、Math.max日期有Now、getFullYear、getMonth、getDate、getDay、addDays、addMonths还有环境类的PageName、Window.width、Window.height。函数用得对不对直接决定条件判断能不能成立。而条件判断成不成立又要回到 3.2 那个顺序扫描的语义里去看。这两块是咬合的函数负责算出“是什么”Case 负责决定“做什么”。4. 层级与命中显示顺序、热区、母版背后的渲染模型原型里有一类问题特别隐蔽逻辑全对变量全对就是点不动。这类问题几乎都出在渲染层谁在上谁在下、点到了谁、显示隐藏之后留下了什么。Axure 的渲染模型比想象中更像浏览器只是它把一些概念藏进了面板里。4.1 显示顺序就是 z-index元件列表的方向问题Axure 的概览面板里元件是从上往下排列的。列表越靠上的元件在画布上越靠上层。这个方向和很多设计工具相反也和“后来居上”的直觉相反所以经常有人在画布上怎么也选不中下面那个元件。这就是 z-index。列表顺序即堆叠顺序靠上的压住靠下的。右键菜单里的“置于顶层”“置于底层”“上移一层”“下移一层”改的就是这个顺序。动态面板的每个 State 内部也各有一份独立的顺序互不影响。为什么这件事重要因为交互绑在元件上而点击事件只会命中最上面那个元件。你在一个按钮上面盖了一个透明的矩形做装饰按钮就废了而且画布上看不出来因为透明矩形没有视觉痕迹。这类问题不会报错只能靠概览面板的列表顺序去排查。一个可复现的排查手法是在概览面板里从上往下扫一遍凡是覆盖了交互元件的、面积较大的、颜色透明的元件都标出来确认它们有没有绑定交互或者能不能直接删掉。通常能扫出至少一处。4.2 热区的命中判定为什么它必须压在最上面热区Hot Spot是一个透明矩形唯一用途是承载交互。它没有视觉命中判定就是它的矩形边界和它下面压着什么形状无关。所以一个圆形按钮点圆外一点点、只要还在热区的矩形范围内照样触发。想让点击严格限制在不规则形状内有两条路。一条是用图片元件的图像映射在图片上画矩形、圆形、多边形区域每个区域单独绑链接命中按区域形状算这是 Axure 里唯一真正按非矩形判定命中的地方。另一条是把那个形状本身当成热区用让形状自己承载OnClick代价是形状要参与堆叠很容易被别的元件挡住。热区最常见的用法是做“扩大点击区域”按钮本身很小上面盖一个更大的热区用户点按钮附近也能触发。用这个手法的时候记住 4.1 的规则热区必须在按钮上面否则它点不到因为点击命中的是最上层。我一般会把这类热区在概览面板里命名成hs-xxx和视觉元件区分开方便最后走查。4.3 隐藏不等于移除占位、动画与状态残留Show/Hide动作有三个效果Show、Hide、Toggle配合淡入、滑动、尺寸变化等动画。隐藏之后的元件仍然存在于模型里不参与命中判定也不占位。不占位这件事值得强调因为从 HTML/CSS 转过来的人会本能地以为“隐藏了下面的内容会上移”。Axure 里所有元件都是绝对定位的没有文档流隐藏一个元件其他元件的位置一动不动。想让布局跟着变必须显式地在同一个 Case 里加Move动作把下面的元件挪上去。这也是为什么手风琴式的折叠列表在 Axure 里做起来比 CSS 麻烦它需要“隐藏面板 移动下面元件”成套走。状态残留是另一个方向元件被隐藏时你依然可以改它的文本、位置、样式改完之后再显示出来用户看到的是新状态。这在多数场景下是想要的行为但也有反例一个隐藏的输入框在隐藏期间被清空显示出来用户会以为自己填的东西丢了。做多步骤表单时这类“看不见的时候被改了”的情况需要在交互设计里显式确认一次。4.4 母版与内联框架两种复用的边界Axure 有两种复用母版Master和内联框架Inline Frame。它们长得像机制完全不同混用会出问题。母版是编译期展开。你定义一个母版拖进多个页面生成时每个页面里各有一份完整的内容副本。所以母版里的元件可以被宿主页面的交互直接引用和控制就像它本来就在这个页面上。母版里也可以挂Raise Event把内部事件冒泡给宿主页面处理这是母版和页面通信的标准方式。内联框架是运行时加载。它生成出来是一个真正的iframe加载另一个页面文档有独立的加载生命周期、独立的上下文、独立的滚动条。宿主页面改不到框架里的元件框架里也看不到宿主的元件两边只能通过全局变量交换数据。这个区别解释了两个常见困惑为什么母版里改了样式所有页面都变因为改的是定义展开时统一生效为什么内联框架里的页面在编辑器里预览不了交互因为它是一个独立文档要在生成后的产物里才完整跑起来。选择标准很直接需要被宿主页面控制、需要共享交互上下文的用母版需要独立文档、独立滚动、独立生命周期的用内联框架。拿母版去做“嵌入一个完整子页面”的事最后一定会因为控制不了内部元件而返工。5. 避坑与排查五类让原型在评审现场翻车的细节前面四章讲的是机制这一章讲机制的失效方式。下面五条都是我实际碰到过的、在现场演示时出问题的类型每条按现象、原因、解决来写。这些坑的共同点是编辑器里预览不报错逻辑看起来也对只有真正走一遍流程才暴露。5.1 动态面板尺寸写死内容被裁或被盖现象切到某个 State里面的内容显示不全下沿被切掉或者切过去之后面板突然变大把下面的按钮整个盖住了。原因动态面板的尺寸是独立属性不随 State 内容自动变化。不勾“适应内容”时面板保持固定尺寸超出的部分被裁勾了pullWidgets之后面板会被拉到目标 State 的尺寸但因为所有元件绝对定位周围元件不会让位。解决内容高度不固定的 State在面板属性里开启“适应内容”让面板尺寸跟随当前 State 的最大内容高度。确实需要pullWidgets的场景先把面板下方留出足够空间再确认被盖住的那几个元件没有被埋。验收方式很土但有效把每个 State 都切一遍截图叠在一起看有没有内容互相遮挡。5.2 内联框架的路径在生成后失效现象编辑器里内联框架区域正常显示生成 HTML 后打开那块区域白屏或者报 404。原因内联框架的目标填了本地文件路径或者外部地址而生成后的产物有自己的一套目录结构相对路径对不上另一种情况是目标页面被排除在生成范围之外产物里根本没有那个文件。解决内联框架的目标优先用页面选择器指向原型内的页面而不是手填路径这样生成时会自动处理引用关系。必须用外部地址时在生成设置里确认那个目标被包含进产物。验收时不要双击 HTML 文件打开用静态文件服务器起一个本地服务再访问双击打开时浏览器的同源策略和路径解析会制造一堆假故障浪费排查时间。5.3 变量未初始化条件判断恒为假现象一段带条件的交互不管怎么操作都走 else 分支改条件、改动作都没用。原因全局变量在项目设置里没设默认值运行时读到空字符串比较时既不大于 0 也不等于 1或者变量名在表达式里拼错了一个字母Axure 不报错直接当空值处理还有一种是把局部变量的别名写在了另一个动作里作用域已经过期。解决每个全局变量必须有非空默认值命名统一加前缀按业务域分组减少拼错概率条件写完后在同一个 Case 里临时加一个Set Text把变量值输出到页面上的调试文本里确认读到的到底是什么再删掉。这个土办法比猜快得多。5.4 生成 HTML 后部分交互失效现象编辑器预览里点击有效生成后某一个按钮怎么点都没反应其他按钮正常。原因三种情况最常见。一是那个元件被一个透明的热区或图形盖住了编辑器预览时你可能点的是边缘生成后视角不同就点不中二是交互绑在了动态面板某个不活跃 State 里的元件上用户看到的是另一个 State 里的同名元件两者不是同一个对象三是元件本身被设成了“隐藏”初始状态虽然逻辑上会显示但首次渲染时命中区域还没建立。解决对每个关键交互做一份清单逐条在生成后的产物里点一遍覆盖到每个 State用浏览器的元素检查功能看点击位置最上层是什么元素动态面板里同名元件统一加 State 后缀命名绑交互时对着名字确认而不是对着画布位置点。5.5 批注图形挡住交互现象加了图形批注之后原本能点的元件点不动了或者点击效果变得很奇怪。原因批注是用普通图形加文本画的默认可见位置往往就压在交互元件上方按 4.1 的堆叠规则它抢走了点击。即使把批注设成隐藏如果隐藏动作没有正确的触发点首次显示时它仍然在最上层。解决把批注统一收进一个专门的“批注层”动态面板默认 State 为空需要展示时再切过去展示完切回空状态这样堆叠问题和显隐问题一次解决。或者干脆用元件自带的“说明”面板记录批注生成时选择是否随产物显示把批注和视觉层彻底分开。后悔药是留给没分层的人的提前分层就不需要。6. 从工程文件到 HTML生成演示文件时的取舍Axure 生成的产物是一份数据驱动的解释执行环境不是把每个页面编译成静态 HTML。工程被序列化成一份页面模型页面树、每个页面的元件树、每个元件的事件与动作定义、全局变量的默认值全部打进去再加一份运行时脚本浏览器打开之后由脚本读模型、建 DOM、绑事件。这解释了几个现象产物体积和页面数、元件数正相关而不是和页面复杂度正相关同一份工程重新生成只要模型没变产物行为就完全一致某些依赖浏览器环境的能力比如Window.width只在运行时才有值。也解释了为什么产物必须用静态文件服务器打开模型文件和脚本之间的加载有路径依赖。取舍在于这套模型能表达的东西有边界。状态数少、转移明确、信息密度高的原型Axure 跑得又快又稳状态数一多、跨页面数据依赖一复杂配置量会指数上升改一处牵动十处维护成本超过直接写代码。我通常按下面这条线判断。场景适合 Axure 产物适合直接写代码投标演示、方案评审是改得快、演示稳否改一次成本太高交互逻辑验证3 到 5 个状态是状态机一目了然否杀鸡用牛刀复杂表单联动、多步校验勉强用例数量会失控是逻辑集中更好维护需要真实接口数据否只能靠变量模拟是需要长期维护的交互文档是模型本身就是文档否代码可读性差最后说个习惯。我每次生成产物之前会强制走一遍“三页流程”从入口页开始只用鼠标不看编辑器把主流程从头点到尾中间不跳步、不回头改配置。走不通就说明模型有问题不是演示技巧的问题。这个习惯是被一次评审现场救回来的那次是内联框架的路径在生成后失效编辑器里一切正常现场白屏客户等着看下一步我只能切回静态图讲。从那以后我每次生成前都强制走一遍这个流程宁可多花二十分钟也不在台上赌运气。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/11/4 8:25:13 · 阅读 1.2k Axure RP 9 原型进阶：动态面板状态机与事件驱动交互
简介面向产品经理、交互设计师及需要提升原型演示效果的学习者《Axure RP 9 使用详解》以单份docx文档系统梳理从基础界面到高阶交互的操作路径帮助摆脱只会简单画图、备注堆砌、难以向客户演示的困境。全文围绕页面与工具栏、元件样式与部件库、下拉列表、文本框、多选框、内链框架、热区、动态面板、右键效果、函数运算、图形外显批注和取色工具等模块展开并延伸到隐藏/显示顺序、水平与垂直菜单及HTML演示文件生成形成较完整的实操知识框架。资源包共1个docx文件约2.54MB目录层级清晰便于按知识点检索与对照练习。目前已有6587人学习下载适合希望系统掌握Axure RP 9、提升项目投标与团队协作沟通效率的初、中级原型设计者。1. 原型不是画图Axure RP 9 里真正拉开差距的是状态与事件评审桌上最常见的一幕一份 Axure RP 9 做的原型几十个页面画得工工整整备注密密麻麻客户点了一下按钮没反应再点一下下拉框还是没反应。设计者赶紧补一句“这里点下去会跳到详情页”客户点点头翻到下一页。差距不在画得好看不好看而在于这份原型里只有“页”没有“态”和“事”。多数人把 Axure RP 9 当成画布工具它实际上是一个带状态机和事件驱动的小型运行时。元件属性、动态面板当前处于哪个 State、全局变量此刻的值三者合起来构成一份运行时快照你配的每一条交互都是在这份快照上做的状态转移。血泪经验是原型拿不出手八成不是视觉问题是这份快照根本没被设计过。2. 动态面板为什么它是唯一能装下“时间”的元件除了动态面板Axure 里所有元件都是无状态的。矩形、文本、图片、按钮在模型里就是一组属性位置、尺寸、样式、文本内容、可见性。它们没有“过去”你把一个矩形改成红色它就只是红色没有“从蓝色变过来”这回事。动态面板是唯一一个把历史维度塞进模型的元件这也是为什么几乎所有复杂交互最后都要绕回它。2.1 无状态元件与有状态元件的分界线动态面板在模型里多了一个 States 数组。每个 State 不是一组属性覆盖而是一棵完整的子元件树有自己的坐标系原点在面板左上角有自己的尺寸有自己的元件层级。切换 State 的语义是整体替换当前渲染的子树不是把 A 里的几个元件隐藏、把 B 里的几个元件显示出来。这个区别决定了很多行为。State A 里放了一个输入框State B 里没放切到 B 之后那个输入框就不存在了你在页面上写Set Text去改它的值改的是一个不在渲染树里的对象不报错但用户看不见。反过来如果两个 State 里各放了一个同名输入框它们是两个不同的元件交互要分别绑绑错一份是极常见的翻车点。从 HTML/CSS 的视角类比动态面板更像一个只渲染当前分支的容器而不是把多个分支都渲染出来再用display控制显隐。这一点想通了后面很多“为什么我改了没生效”的疑问会自己消失。2.2 Set Panel State 的参数切换动画与执行语义动态面板的核心动作是Set Panel State它在交互编辑器里的配置项不多但每一项都影响结果。{ action: SetPanelState, panel: dpContent, state: Next, transition: slide-left, duration: 300, wrap: true, pullWidgets: false }这段配置表达的是把名为dpContent的面板切到“下一个”状态用 300 毫秒向左滑动过渡如果已经是最后一个状态就回到第一个不拉伸面板尺寸。state有三个取值方向Next、Previous或者直接指定某个状态名。Next配合wrap就是轮播图无限循环的全部秘密不需要写任何判断。transition决定过渡动画none是硬切fade是淡入淡出slide-*是位移duration是动画时长单位毫秒。pullWidgets容易被忽略勾选后如果目标 State 的尺寸比面板当前尺寸大面板会被拉到目标尺寸不勾选则维持原尺寸超出的部分被裁掉。pullWidgets是我见过最多人踩坑的参数。面板被拉大之后因为 Axure 里所有元件都是绝对定位、没有文档流的概念周围的元件不会让位只会被盖住。演示时看起来就像“点了一下下面的按钮消失了”。要不要开取决于你希望面板尺寸跟着内容走还是内容被面板尺寸约束。2.3 选项卡、折叠、轮播为什么会收敛到同一个模型把常见交互拆开看会发现它们都是同一个东西的不同外观。交互形态State 数量触发源关键配置选项卡等于标签数标签元件的 OnClick指定状态名无动画折叠面板等于展开项数或 2标题行的 OnClick指定状态名滑动动画轮播图等于图片数OnLoad Wait OnClickNext wrap位移动画步骤条等于步骤数上一步/下一步按钮Next / Previous弹层2空 / 内容触发按钮 OnClick淡入配合 Show/Hide这张表背后的思路是有限状态机把界面看成“若干个互斥的稳定状态 状态之间的转移”动态面板是状态寄存器交互配置是转移函数。用这个视角看一个选项卡组件不是“三个按钮加三块内容”而是“一个三状态的寄存器三个转移入口”。这种抽象的价值在于可穷举。状态数一旦确定你就可以列出所有转移路径逐条验证而如果按“显示隐藏一堆元件”的方式做状态是组合爆炸的永远测不完。做原型做得久的人往往不是元件用得多是状态数控制得住。3. 交互事件链一次点击之后动作是按什么顺序跑完的动态面板解决了“状态存在哪”接下来的问题是“状态怎么变”。Axure 的交互系统是三层结构事件是触发源用例是策略动作是效果。这三层的顺序语义如果没搞清楚写出来的交互就是玄学有时候对有时候不对而且改一个地方会影响另一个地方。3.1 事件、用例、动作三层结构事件是元件或页面上的钩子常见的有OnClick、OnMouseEnter、OnMouseOut、OnShow、OnHide、OnLoad、OnWindowResize、OnSelectionChange。事件本身不做事它只负责“被触发”。用例Case挂在事件下面一个事件可以挂多个 Case每个 Case 可以带条件。动作Action挂在 Case 里面一个 Case 可以挂多个 Action按你排的顺序执行先Set Text再Show再Wait再Set Panel State。这里有个容易忽略的细节Wait是异步的。它不会阻塞后面动作的“定义”但会阻塞后面动作的“执行”。也就是说Wait 500之后的动作实际生效时间被推迟了 500 毫秒而在这 500 毫秒里用户完全可以再点一次按钮触发第二轮。做轮播自动播放时OnLoad里挂一个循环的Wait Next如果用户手动点了“下一张”两套计时器就会叠在一起动画开始抽搐。这是原型里最典型的时序 bug。3.2 If 与 Else If最容易翻车的判定顺序Axure 的 Case 判定不是if / else而是顺序扫描加显式截断。这个差别值得单独说清楚。// Axure 用例判定器的等价逻辑简化 function runEvent(cases, ctx) { let executed false; for (const c of cases) { // Else If只要前面已经有 Case 执行过就整条跳过 if (c.isElseIf executed) continue; // 没有条件的 Case 恒为真 const pass c.condition ? evaluate(c.condition, ctx) : true; if (pass) { runActions(c.actions, ctx); // 动作按顺序同步执行 executed true; // 注意不 break } } }关键在最后那个不break。Axure 会从上往下把每一条 Case 都判定一遍条件成立就执行然后继续往下走。这意味着如果你写了两个都没有条件的 Case两个都会执行如果你写了三个 Case第一个无条件、第二个有条件且成立两个都会执行。想实现互斥必须在后面那些 Case 上勾Else If。它的语义是“前面已经执行过任何一条就跳过本条”而不是“前面的条件不成立”。这两个理解差异是新手写交互时最常出现的逻辑错乱来源明明想表达“如果已登录就跳转首页否则提示登录”结果写成了两个独立 Case用户既跳转了首页又看到了提示。我的习惯是只要一段交互里出现两个以上的 Case第二个开始一律先勾Else If再回头确认第一个是否真的需要无条件。多勾一下比事后在演示现场被客户问“为什么两个都出来了”要便宜得多。3.3 变量作用域全局变量、局部变量与内联框架的墙Axure 的变量分两种。全局变量在项目设置里定义生成后挂在原型运行时的一个共享上下文上所有页面、所有动态面板的 State 读到的是同一份。局部变量不写在项目设置里它是在“设置值”或“条件”对话框里临时定义的别名只在当前这一次表达式求值期间有效典型用途是引用当前元件的属性比如把This.text起个别名叫LVAR1后面反复用。全局变量的默认值会随工程一起序列化进产物。这一点的实践含义是任何一个依赖全局变量的条件判断只要变量没被赋过值读到的就是默认值如果默认值留空读到的就是空字符串比较时既不等于 0 也不等于 1条件恒假界面永远走 else 分支。我一般会要求每个全局变量都必须有非空默认值哪怕是0或none让“未初始化”这个状态不存在。内联框架是一堵墙。它加载的是另一个页面文档有自己独立的运行时上下文元件引用不能直接跨过去页面上写的Set Text改不到框架里的元件。但全局变量是例外它挂在共享层框架内外读写的是同一份。所以跨框架传值的标准姿势是框架内页面把结果写进全局变量框架外页面用OnClick或OnShow读这个变量再回填到自己的元件上。反方向同理。用Raise Event也能跨但那是母版到宿主页面的方向和内联框架不是一回事下一章会讲清楚这条边界。3.4 [[ ]] 表达式与函数原型的“计算”能力Axure 里凡是可以填值的地方基本都能写表达式语法是双中括号包裹里面按 JavaScript 的规则求值。这给了原型真正的计算能力而不只是静态文本替换。// 截断长文本最多显示 10 个字符超出加省略号 [[This.text.length 10 ? This.text.substring(0, 10) … : This.text]] // 分页计算每页 20 条当前第 3 页算出起始序号 [[(LVAR1 - 1) * 20 1]] // 拼日期今天往后推 7 天显示成 2024-06-01 这种格式 [[Now.addDays(7).getFullYear() - (Now.addDays(7).getMonth() 1) - Now.addDays(7).getDate()]]第一段的三元表达式用来做文本溢出处理This指当前元件.length是字符串长度.substring(0, 10)取前 10 个字符。第二段是LVAR1局部变量参与算术运算注意表达式里可以直接做四则运算不需要额外函数。第三段暴露了 Axure 日期函数的一个真实陷阱getMonth()返回 0 到 11所以显示月份必须加 1getDate()才是“日”。可用的函数大致分几类字符串有length、substring、indexOf、replace、split、trim、toUpperCase数学有Math.floor、Math.ceil、Math.abs、Math.random、Math.max日期有Now、getFullYear、getMonth、getDate、getDay、addDays、addMonths还有环境类的PageName、Window.width、Window.height。函数用得对不对直接决定条件判断能不能成立。而条件判断成不成立又要回到 3.2 那个顺序扫描的语义里去看。这两块是咬合的函数负责算出“是什么”Case 负责决定“做什么”。4. 层级与命中显示顺序、热区、母版背后的渲染模型原型里有一类问题特别隐蔽逻辑全对变量全对就是点不动。这类问题几乎都出在渲染层谁在上谁在下、点到了谁、显示隐藏之后留下了什么。Axure 的渲染模型比想象中更像浏览器只是它把一些概念藏进了面板里。4.1 显示顺序就是 z-index元件列表的方向问题Axure 的概览面板里元件是从上往下排列的。列表越靠上的元件在画布上越靠上层。这个方向和很多设计工具相反也和“后来居上”的直觉相反所以经常有人在画布上怎么也选不中下面那个元件。这就是 z-index。列表顺序即堆叠顺序靠上的压住靠下的。右键菜单里的“置于顶层”“置于底层”“上移一层”“下移一层”改的就是这个顺序。动态面板的每个 State 内部也各有一份独立的顺序互不影响。为什么这件事重要因为交互绑在元件上而点击事件只会命中最上面那个元件。你在一个按钮上面盖了一个透明的矩形做装饰按钮就废了而且画布上看不出来因为透明矩形没有视觉痕迹。这类问题不会报错只能靠概览面板的列表顺序去排查。一个可复现的排查手法是在概览面板里从上往下扫一遍凡是覆盖了交互元件的、面积较大的、颜色透明的元件都标出来确认它们有没有绑定交互或者能不能直接删掉。通常能扫出至少一处。4.2 热区的命中判定为什么它必须压在最上面热区Hot Spot是一个透明矩形唯一用途是承载交互。它没有视觉命中判定就是它的矩形边界和它下面压着什么形状无关。所以一个圆形按钮点圆外一点点、只要还在热区的矩形范围内照样触发。想让点击严格限制在不规则形状内有两条路。一条是用图片元件的图像映射在图片上画矩形、圆形、多边形区域每个区域单独绑链接命中按区域形状算这是 Axure 里唯一真正按非矩形判定命中的地方。另一条是把那个形状本身当成热区用让形状自己承载OnClick代价是形状要参与堆叠很容易被别的元件挡住。热区最常见的用法是做“扩大点击区域”按钮本身很小上面盖一个更大的热区用户点按钮附近也能触发。用这个手法的时候记住 4.1 的规则热区必须在按钮上面否则它点不到因为点击命中的是最上层。我一般会把这类热区在概览面板里命名成hs-xxx和视觉元件区分开方便最后走查。4.3 隐藏不等于移除占位、动画与状态残留Show/Hide动作有三个效果Show、Hide、Toggle配合淡入、滑动、尺寸变化等动画。隐藏之后的元件仍然存在于模型里不参与命中判定也不占位。不占位这件事值得强调因为从 HTML/CSS 转过来的人会本能地以为“隐藏了下面的内容会上移”。Axure 里所有元件都是绝对定位的没有文档流隐藏一个元件其他元件的位置一动不动。想让布局跟着变必须显式地在同一个 Case 里加Move动作把下面的元件挪上去。这也是为什么手风琴式的折叠列表在 Axure 里做起来比 CSS 麻烦它需要“隐藏面板 移动下面元件”成套走。状态残留是另一个方向元件被隐藏时你依然可以改它的文本、位置、样式改完之后再显示出来用户看到的是新状态。这在多数场景下是想要的行为但也有反例一个隐藏的输入框在隐藏期间被清空显示出来用户会以为自己填的东西丢了。做多步骤表单时这类“看不见的时候被改了”的情况需要在交互设计里显式确认一次。4.4 母版与内联框架两种复用的边界Axure 有两种复用母版Master和内联框架Inline Frame。它们长得像机制完全不同混用会出问题。母版是编译期展开。你定义一个母版拖进多个页面生成时每个页面里各有一份完整的内容副本。所以母版里的元件可以被宿主页面的交互直接引用和控制就像它本来就在这个页面上。母版里也可以挂Raise Event把内部事件冒泡给宿主页面处理这是母版和页面通信的标准方式。内联框架是运行时加载。它生成出来是一个真正的iframe加载另一个页面文档有独立的加载生命周期、独立的上下文、独立的滚动条。宿主页面改不到框架里的元件框架里也看不到宿主的元件两边只能通过全局变量交换数据。这个区别解释了两个常见困惑为什么母版里改了样式所有页面都变因为改的是定义展开时统一生效为什么内联框架里的页面在编辑器里预览不了交互因为它是一个独立文档要在生成后的产物里才完整跑起来。选择标准很直接需要被宿主页面控制、需要共享交互上下文的用母版需要独立文档、独立滚动、独立生命周期的用内联框架。拿母版去做“嵌入一个完整子页面”的事最后一定会因为控制不了内部元件而返工。5. 避坑与排查五类让原型在评审现场翻车的细节前面四章讲的是机制这一章讲机制的失效方式。下面五条都是我实际碰到过的、在现场演示时出问题的类型每条按现象、原因、解决来写。这些坑的共同点是编辑器里预览不报错逻辑看起来也对只有真正走一遍流程才暴露。5.1 动态面板尺寸写死内容被裁或被盖现象切到某个 State里面的内容显示不全下沿被切掉或者切过去之后面板突然变大把下面的按钮整个盖住了。原因动态面板的尺寸是独立属性不随 State 内容自动变化。不勾“适应内容”时面板保持固定尺寸超出的部分被裁勾了pullWidgets之后面板会被拉到目标 State 的尺寸但因为所有元件绝对定位周围元件不会让位。解决内容高度不固定的 State在面板属性里开启“适应内容”让面板尺寸跟随当前 State 的最大内容高度。确实需要pullWidgets的场景先把面板下方留出足够空间再确认被盖住的那几个元件没有被埋。验收方式很土但有效把每个 State 都切一遍截图叠在一起看有没有内容互相遮挡。5.2 内联框架的路径在生成后失效现象编辑器里内联框架区域正常显示生成 HTML 后打开那块区域白屏或者报 404。原因内联框架的目标填了本地文件路径或者外部地址而生成后的产物有自己的一套目录结构相对路径对不上另一种情况是目标页面被排除在生成范围之外产物里根本没有那个文件。解决内联框架的目标优先用页面选择器指向原型内的页面而不是手填路径这样生成时会自动处理引用关系。必须用外部地址时在生成设置里确认那个目标被包含进产物。验收时不要双击 HTML 文件打开用静态文件服务器起一个本地服务再访问双击打开时浏览器的同源策略和路径解析会制造一堆假故障浪费排查时间。5.3 变量未初始化条件判断恒为假现象一段带条件的交互不管怎么操作都走 else 分支改条件、改动作都没用。原因全局变量在项目设置里没设默认值运行时读到空字符串比较时既不大于 0 也不等于 1或者变量名在表达式里拼错了一个字母Axure 不报错直接当空值处理还有一种是把局部变量的别名写在了另一个动作里作用域已经过期。解决每个全局变量必须有非空默认值命名统一加前缀按业务域分组减少拼错概率条件写完后在同一个 Case 里临时加一个Set Text把变量值输出到页面上的调试文本里确认读到的到底是什么再删掉。这个土办法比猜快得多。5.4 生成 HTML 后部分交互失效现象编辑器预览里点击有效生成后某一个按钮怎么点都没反应其他按钮正常。原因三种情况最常见。一是那个元件被一个透明的热区或图形盖住了编辑器预览时你可能点的是边缘生成后视角不同就点不中二是交互绑在了动态面板某个不活跃 State 里的元件上用户看到的是另一个 State 里的同名元件两者不是同一个对象三是元件本身被设成了“隐藏”初始状态虽然逻辑上会显示但首次渲染时命中区域还没建立。解决对每个关键交互做一份清单逐条在生成后的产物里点一遍覆盖到每个 State用浏览器的元素检查功能看点击位置最上层是什么元素动态面板里同名元件统一加 State 后缀命名绑交互时对着名字确认而不是对着画布位置点。5.5 批注图形挡住交互现象加了图形批注之后原本能点的元件点不动了或者点击效果变得很奇怪。原因批注是用普通图形加文本画的默认可见位置往往就压在交互元件上方按 4.1 的堆叠规则它抢走了点击。即使把批注设成隐藏如果隐藏动作没有正确的触发点首次显示时它仍然在最上层。解决把批注统一收进一个专门的“批注层”动态面板默认 State 为空需要展示时再切过去展示完切回空状态这样堆叠问题和显隐问题一次解决。或者干脆用元件自带的“说明”面板记录批注生成时选择是否随产物显示把批注和视觉层彻底分开。后悔药是留给没分层的人的提前分层就不需要。6. 从工程文件到 HTML生成演示文件时的取舍Axure 生成的产物是一份数据驱动的解释执行环境不是把每个页面编译成静态 HTML。工程被序列化成一份页面模型页面树、每个页面的元件树、每个元件的事件与动作定义、全局变量的默认值全部打进去再加一份运行时脚本浏览器打开之后由脚本读模型、建 DOM、绑事件。这解释了几个现象产物体积和页面数、元件数正相关而不是和页面复杂度正相关同一份工程重新生成只要模型没变产物行为就完全一致某些依赖浏览器环境的能力比如Window.width只在运行时才有值。也解释了为什么产物必须用静态文件服务器打开模型文件和脚本之间的加载有路径依赖。取舍在于这套模型能表达的东西有边界。状态数少、转移明确、信息密度高的原型Axure 跑得又快又稳状态数一多、跨页面数据依赖一复杂配置量会指数上升改一处牵动十处维护成本超过直接写代码。我通常按下面这条线判断。场景适合 Axure 产物适合直接写代码投标演示、方案评审是改得快、演示稳否改一次成本太高交互逻辑验证3 到 5 个状态是状态机一目了然否杀鸡用牛刀复杂表单联动、多步校验勉强用例数量会失控是逻辑集中更好维护需要真实接口数据否只能靠变量模拟是需要长期维护的交互文档是模型本身就是文档否代码可读性差最后说个习惯。我每次生成产物之前会强制走一遍“三页流程”从入口页开始只用鼠标不看编辑器把主流程从头点到尾中间不跳步、不回头改配置。走不通就说明模型有问题不是演示技巧的问题。这个习惯是被一次评审现场救回来的那次是内联框架的路径在生成后失效编辑器里一切正常现场白屏客户等着看下一步我只能切回静态图讲。从那以后我每次生成前都强制走一遍这个流程宁可多花二十分钟也不在台上赌运气。希望帮到你。本文还有配套的精品资源点击获取