Axure RP 9 交互原型实战:动态面板、内联框架与HTML交付
简介《Axure RP 9 使用详解》是一份面向产品经理、交互设计师及原型初学者与进阶用户的实操文档重点解决只会画静态图、备注堆砌、难以向客户演示等常见问题。全文围绕页面与工具栏认识、原件样式和部件库运用展开并系统梳理下拉列表、文本框、多选框、内链框架、隐藏显示顺序、水平与垂直菜单、热区、动态面板、右键效果、函数、图形外显批注及取色工具等设计方法最后落到HTML演示文件生成帮助读者把零散功能串成可展示、可沟通的交互原型。资源包共1个docx文件约2.54MB目录按页面简介、工具简介、设计过程及方法、演示文件生成组织便于按模块查阅。已有6582人学习适合需要提升原型专业度、投标演示效果与团队协作效率的读者参考。1. 演示现场点不动的原型问题往往不在画得丑某公司投标前最后一次内部预演投影切到笔记本评审指着屏幕问这个订单点开能看详情吗鼠标点下去页面纹丝不动再点下拉框弹出来的是一张图片。这一幕跟审美没关系问题出在原型的状态建模上——Axure RP 9 里真正决定演示效果的是动态面板的状态、元件命名和交互动作的先后顺序而不是你把按钮画得多圆。这份《Axure RP 9 使用详解》文档把页面与工具栏、元件样式与交互属性、设计过程下拉列表、文本框、多选、悬浮说明、内联框架、显隐与层序、水平垂直菜单、热区、动态面板、交互功能、函数、图形外显批注、取色工具到生成演示文件串成了一条完整链路适合需要把原型拿去给客户或评审现场点击的产品、交互和售前同学也适合那些会画不会点的初中级选手照着补课。2. 元件、样式与命名从能画出来到能被交互面板认出来2.1 工具栏与元件库先分清能点的和只能看的Axure RP 9 的界面在结构上分成四块顶部是模式与对齐工具区左侧是 Pages页面、Masters母版、Outline大纲三个面板中间是画布右侧是 Inspector检查器Inspector 里又拆成 Style样式和 Interactions交互两块。新手最容易犯的错是把左侧元件库当成一个图形素材箱拖一个矩形当按钮、拖一个图片当下拉框画完看着挺像但它永远不会响应点击。元件库里真正要分清楚的是三类。第一类是纯展示元件矩形、椭圆、图片、文本标签它们没有内置状态交互全靠你手动加第二类是表单元件Droplist下拉列表、List Box列表框、Text Field文本框、Checkbox复选框、Radio Button单选按钮它们自带 selected、checked、disabled 这些状态函数取值时直接读得到第三类是容器与导航元件Dynamic Panel动态面板、Inline Frame内联框架、Menu水平/垂直菜单、Hot Spot热区它们的作用是把别的页面或状态装进来。元件类别代表元件演示时的作用是否自带状态形状展示Rectangle、Ellipse、Image布局、按钮外观、占位否文本展示Text Label、Heading标题、说明、动态文本输出否文本可被 Set Text 改写表单输入Text Field、Droplist、List Box、Checkbox收集与展示用户选择是容器Dynamic Panel、Inline Frame多状态切换、内嵌页面是面板状态导航Horizontal Menu、Vertical Menu顶部/侧边导航是选中项辅助Hot Spot、批注图形不规则点击区、说明层否这张表建议打印出来贴在显示器边上。因为后面所有为什么我的交互目标列表里找不到这个元件为什么取值取到空十有八九是元件类别选错了——用图片做下拉框就注定读不到选中项。2.2 原件样式颜色、圆角、内边距决定观感但不决定交互Style 面板里常用的字段是 Fill填充、Border边框、Corner Radius圆角、Shadow阴影、Padding内边距、Typography字体排印和 Alignment对齐。这套东西对演示的影响比想象中大同一个原型圆角 4px 和 12px 给人的完成度感受完全不同内边距不一致会让一排按钮看起来歪歪扭扭评审的第一印象分就是这么丢的。我的习惯是先定三档颜色再动手主色导航、主按钮、辅助色次级按钮、标签、警示色错误提示、必填标记。取色工具Eyedropper就派上用场了——从设计稿截图或者已有的品牌页上吸一个色值直接应用到 Fill比手动输十六进制颜色靠谱得多也避免了同一个蓝出现五种色号这种血泪经验。具体做法是选中目标元件在 Style 面板点 Fill 的色块弹出色板后点右上角的吸管图标鼠标变成取色状态移到画布上任意位置单击即可吸取该像素颜色吸完之后顺手把这个色值记在一个隐藏的色板页里后面所有页面从这里吸风格就统一了。样式属性演示中的实际影响建议Corner Radius决定现代感强弱按钮 4–8px卡片 8–12px全站统一Padding文字贴边会显得廉价按钮左右 16px、上下 8px 起Shadow弹层与底层页面分离弹层统一一档别每个元件都加Typography字号跳级会打乱信息层级标题 20/16正文 14注释 12Border输入框没有边框就看不出可输入表单控件保留 1px 边框样式层面的坑在于逐个调。十个按钮调十遍改一次主色要改十次。正确姿势是先调好一个CtrlD 复制或者干脆做成母版后面统一改。2.3 命名Name 字段是交互面板的索引选中任意元件Inspector 最上方有一个 Name 输入框。大多数人直接跳过它结果在加交互时目标下拉列表里全是Rectangle、Button、Text Field同名的一堆选谁全凭运气。这是 Axure RP 9 里最划算的一分钟投资。命名规范不用复杂能自解释就行我一般用类型_页面_用途三段式btn_login_submit、txt_login_phone、dp_order_detail、if_checkout。前缀区分类型中间标页面后面写用途。这样在交互面板里按名字排序时同一类元件会聚在一起找起来非常快。还有两个细节一是页面本身也要命名Pages 面板里双击页面名改掉Page 1这种默认值否则生成演示文件后浏览器标签页全是无意义的编号二是动态面板的每个 State 也要命名State 1、State 2在切换动作里根本分不清哪个是列表态哪个是空态。命名这件事属于后悔药事后补的成本是事前的五倍。2.4 页面与母版导航和页脚不要重复画Pages 面板支持建文件夹分组一个稍微像样的原型至少分三组公共页登录、首页、404、业务流程页、组件演示页。Masters 面板放的是跨页面复用的块最典型的就是顶部导航和页脚。操作上很简单在 Masters 面板新建一个母版画好导航条再从 Masters 把它拖到各个页面上。改母版所有引用它的页面同步生效。这里有个容易忽略的点——母版里如果要放当前选中项高亮得用母版的交互或者给每个页面的母版实例单独设状态别指望一份母版自动知道自己在哪个页面。页面骨架的建议是每页顶部留 56–64px 给导航左侧留 200px 给菜单如果是后台类系统内容区用一个矩形占位并命名bg_content。这样做的好处是后面加动态面板时有明确的边界参照不会出现面板切过去把导航盖住了这种低级翻车。2.5 一个可复现的练习30 分钟搭出双页面骨架把上面几条串起来做一遍就记住了第一步Pages 面板建两个页面命名p_home_list和p_home_detailPage Style 里把背景色设为浅灰#F5F6F8页面宽度按目标设备定桌面端 1440移动端 375。第二步Masters 里新建m_top_nav画一条 60px 高的矩形做导航底上面放 Logo 占位和三个文本标签首页 / 订单 / 我的全部命名。第三步把m_top_nav拖到两个页面上位置对齐到顶部。第四步在p_home_list上放一个 List Box 模拟订单列表命名lb_order编辑选项为三条假数据。第五步放一个按钮btn_view_detail加交互Click or Tap → Open Link → 选p_home_detail动作选当前窗口。第六步F5 预览点按钮看是否跳转。跳不过去八成是页面没被勾选进发布范围回 Publish 的配置里检查一遍。提示练习阶段就把命名做对后面所有交互的调试时间会减半。命名混乱的原型改一次交互要重新认一遍元件。3. 动态面板与内联框架把静态页面串成可点击的三层交互链3.1 动态面板的 State 模型它不是切图是独立画布Dynamic Panel动态面板是 Axure RP 9 里最被低估也最容易用错的元件。很多人把它理解成一叠图片点一下换一张于是把一个完整页面截图塞进每个 State结果文字全是图片、按钮点不了、缩放就糊。正确的理解是每个 State 是一块独立的画布有自己的坐标系、自己的元件树面板本身只是一个规定尺寸的窗口。创建方式是选中一组元件比如一个卡片列表 一个空状态提示右键选择 Create Dynamic Panel这组元件就会被收进默认的 State 1。双击面板进入编辑态面板上方会出现 State 管理条点加号新增 State双击名字改成有语义的state_list、state_empty、state_loading。退出编辑态后面板显示当前选中的 State。切换靠交互选中触发元件比如一个筛选按钮Add Interaction → Click or Tap → Set Panel State → 选目标面板 → 选目标 State → 动画选 Slide Left、时长 300ms。如果要做再点一次切回去勾上 Wrap in cycle或者在动作里加条件判断当前 State。面板用途State 命名典型切换触发列表 / 空态 / 加载态state_list / state_empty / state_loading筛选、搜索、首次加载弹层 / 关闭state_closed / state_open按钮点击、遮罩点击步骤条state_step1…state_step4上一步 / 下一步折叠面板state_collapsed / state_expanded标题行点击关键参数有三个State 的尺寸、动画方向、是否循环。尺寸这块面板尺寸由第一个 State 决定后续 State 如果内容更高超出的部分会被裁掉不会自动撑开——这是切过去文字被切了一半的最常见原因解决方法是进入每个 State 单独调面板尺寸或者把内容放进可滚动的固定高度区域。3.2 内联框架Target 选 Page 还是 URL差别很大Inline Frame内联框架的作用是在当前页面里挖一个窗口把另一个页面或一个外部地址装进来。双击框架可以设 Target两种模式一种是选本地页面Page从下拉里挑一个已存在的页面。这种方式生成 HTML 后是站内相对路径离线打开也能跳适合主框架 内容区这种后台布局也适合把公共页比如帮助文档嵌进流程里。另一种是填 URL比如一个外部地址或者一段在线文档。这种方式在本地双击start.html用file://协议打开时很多浏览器会因为安全策略直接白屏或者拒绝加载必须起一个本地 HTTP 服务才正常。场景Target 类型优点注意后台主框架 内容区Page离线可用、跳转可控目标页必须包含在发布范围嵌入外部帮助/文档URL内容不用重画需要 HTTP 环境离线易白屏嵌入自己做的另一个原型Page 或 URL模块化两层滚动条会很难看记得隐藏内层滚动框架属性里还有个常被忽略的开关隐藏滚动条。演示时一个窗口里出现两条滚动条观感直接掉一档。3.3 显示/隐藏与层叠顺序Axure 的层级不是玄学Show/Hide 是使用频率最高的动作但它的行为跟元件在画布上的堆叠顺序强相关。Axure 里没有显式的 z-index 数字元件的上下关系由谁后放进来决定后放的在上层需要调整时用右键菜单的 Bring to Front / Send to Back或者 Order 子菜单里的几个选项。做遮罩弹层是最典型的例子一个半透明黑色矩形铺满全屏当遮罩一个内容面板居中。正确的动作顺序是——先 Show 遮罩并勾选 Bring to Front再 Show 内容面板关闭时顺序反过来先 Hide 内容再 Hide 遮罩。顺序写反会出现内容闪在遮罩下面 0.1 秒的诡异效果这种细节在投影仪上会被放大。还有一个坑是 Show 动作里那个 Bring to Front 勾选框。它只在那一次显示时把元件提到最前如果之后又有别的元件被 Show 出来层级关系又会变。稳妥的做法是提前把遮罩层和弹层在画布上摆到最上层动作里只做显隐不依赖运行时提层。3.4 热区与右键菜单不规则点击区怎么处理Hot Spot热区是一块透明的、能响应事件的矩形。它的价值在于视觉是 A点击区是 B比如一张不规则的产品图、一个用图片拼出来的按钮组、一个需要斜着切分的区域。用法是把热区拖到目标位置调整到覆盖点击范围命名成hs_product_01然后给它加 Click 交互。热区在预览时完全不可见所以它天然适合做隐形入口。右键菜单稍微特殊一点。选中元件后Add Interaction 的事件列表里选 Right Click然后在动作里 Show 一个事先画好的菜单组垂直排列的三个文本标签 一个底矩形组合后命名menu_context默认隐藏。要让它出现在鼠标位置可以用 Move 动作配合 [[Cursor.x]] 和 [[Cursor.y]] 这类游标变量嫌麻烦就固定在元件右上角演示时也能接受。记得再加一个全屏热区做点空白关闭菜单否则菜单弹出来关不掉演示节奏就断了。3.5 串起来一条从列表到详情弹层的完整链路把上面四件套组合成一条可演示的链路按这个顺序做第一步列表页放 List Box 命名lb_order右边放详情区容器用一个 Dynamic Panel 命名dp_detail初始 State 设为state_empty显示请选择一条记录。第二步给lb_order加交互Click or Tap → Set Panel State →dp_detail→state_detail。第三步在state_detail里放一个 Inline Frame 命名if_detailTarget 选本地页面p_home_detail隐藏滚动条。第四步在主页面放一个遮罩矩形bg_mask铺满填充黑色 40% 透明默认隐藏层级置于最上。第五步做一个高级设置按钮点击后先 Showbg_maskBring to Front再 Show 一个设置面板dp_setting。第六步给设置面板里的每一行加 Right Click 交互弹出menu_context。第七步F5 走一遍全流程列表点击 → 详情出现 → 设置弹层 → 右键菜单 → 点空白关闭。注意链路里每个元件都要有名字调试时交互面板按名字排序列出所有动作一眼能看出顺序对不对。这一条比任何教程都管用。4. 表单控件与函数表达式让下拉框和文本框真的算出数4.1 下拉列表选项、默认项与取值Droplist下拉列表是演示里出镜率最高的表单控件也是最容易被做成图片的。正确用法是拖一个 Droplist 到画布双击或者在 Inspector 的属性区编辑选项列表一行一个。设默认选中项时在选项列表里选中某一行点设为默认或者用交互在页面加载时 Set Selected。取值靠表达式。给 Droplist 命名dd_city然后在另一个文本标签的 Set Text 动作里加局部变量 LVAR1 指向dd_city值写// 读取下拉列表当前选中项的文本 [[LVAR1.text]] // 拼一句话输出验证取值是否成功 [[你选择的城市是 LVAR1.text]]这两行的逻辑很直白[[ ]]是 Axure 的表达式定界符只有被它包住的内容才会在运行时求值外面的文字原样输出LVAR1是局部变量需要在动作面板的 Local Variables 区先声明并绑定到具体元件.text取的是元件上的文本属性对 Droplist 来说就是当前选中项的显示文本。参数上要注意两点一是 Droplist 的选项文本里不要带多余空格否则取值会带上做字符串比较时永远不相等二是如果选项是请选择这种占位项记得在条件判断里排除掉不然用户没选也会被当成有效输入。4.2 文本框类型、默认值、只读与输入校验Text Field 的属性区里有一个 Type 下拉选项包括 Text、Password、Email、Number、Phone、URL、Search、Date 等。这个 Type 不只是装饰它会影响浏览器渲染出来的输入类型——选 Number 在移动端会唤起数字键盘选 Password 输入内容显示为圆点选 Date 会带日期选择器。演示时客户看到密码框能打码、手机号能弹数字键盘信任感立刻不一样。Type演示效果适用场景Text普通单行输入姓名、地址Password输入显示为圆点登录密码Number数字键盘、只允许数字数量、金额Email校验邮箱格式提示注册Date日期选择器时间范围筛选Axure 本身不做服务端校验所谓必填校验要用交互模拟给文本框加 Text Change 或者 Lost Focus 事件加条件判断[[This.text.length 6]]满足条件就 Show 一个红色提示标签、把边框改成警示色不满足就 Hide 提示、恢复边框。这一套做完演示时客户输入短密码真能看到红字提示效果比嘴上说这里会校验强太多。默认值直接在属性区填只读勾上 Read-only禁用勾上 Disabled——注意 Disabled 的元件在浏览器里通常不响应事件如果只是想看得见点不着用只读更合适。4.3 多选列表框多选与复选框组两条路下拉列表多选框这个说法在实际操作里对应两种实现。第一种是 List Box列表框在属性里勾选允许多选用户按住 Ctrl 或 Shift 可以选多项视觉上是一个常驻的多行列表第二种是 Checkbox 组成的复选组视觉上是一列独立的小方块移动端更友好。两条路的取舍很清楚选项少于 6 个、需要每项独立说明的用 Checkbox 组选项多、需要滚动浏览的用 List Box 多选。取值方式也不同Checkbox 要逐个判断checked状态List Box 多选则是读选中项集合处理起来更麻烦一些。用 Checkbox 做已选 N 项的计数器是个很实用的技巧页面上放一个隐藏文本txt_count存当前数量每个 Checkbox 的 Click 交互里加条件——如果自身 checked 为真就把txt_count设为[[LVAR1 1]]否则设为[[LVAR1 - 1]]其中 LVAR1 指向txt_count自己。表达式里的加减是数值运算前提是那个隐藏文本里存的确实是数字混进中文就会得到 NaN。4.4 函数表达式数学、字符串、日期、随机数函数是这份文档里最容易被跳过、但一旦用上就回不去的一块。Axure 的表达式语法接近 JavaScript 的子集写在[[ ]]里常见的有四类// 数学向下取整、四舍五入、取最大最小、随机 [[Math.floor(3.9)]] // 结果 3 [[Math.round(3.5)]] // 结果 4 [[Math.max(LVAR1, LVAR2)]] // 两个数取大 [[Math.floor(Math.random() * 100)]] // 0-99 的随机整数 // 字符串长度、截取、查找、大小写 [[This.text.length]] // 当前输入长度 [[This.text.substr(0, 4)]] // 取前 4 位 [[This.text.indexOf()]] // 返回 的位置-1 表示没有 [[This.text.toUpperCase()]] // 转大写 // 日期注意 getMonth 从 0 开始 [[Now.getFullYear() - (Now.getMonth() 1) - Now.getDate()]] [[Now.getHours() : Now.getMinutes()]] // 条件表达式三元写法 [[LVAR1.text.length 0 ? 已填写 : 未填写]]逐条说一下容易翻车的地方。Math.floor(Math.random() * 100)生成的是 0 到 99想生成 1 到 100 要写成Math.floor(Math.random() * 100) 1边界值差一是最常见的错误。substr(0, 4)的两个参数是起点和长度不是起点和终点写成substr(1, 4)会从第二个字符开始取四个。日期里getMonth()返回 0–11不 1 就会在演示时把 12 月显示成 11 月这种错误在评审面前非常尴尬。三元表达式在 Axure 里可以正常求值用来做有值/无值的文案切换很方便。还有一个前提表达式只在值字段里求值比如 Set Text 的文本值、Set Size 的宽高、Move 的坐标、条件判断的比较值。如果直接把[[...]]写在一个普通文本标签的内容里有时能显示有时不显示取决于它在不在交互链条里——这就是很多人反馈表达式偶尔失效的真相。4.5 条件逻辑If / Else If 与 Enable/Disable条件逻辑挂在动作上。选中元件加交互后动作行右侧有一个添加条件的入口点开可以选判断对象某个元件的文本、选中状态、可见性、启用状态和比较方式等于、不等于、包含、大于、小于、为空等。典型用法有三个一是登录按钮的可用性——输入框为空时把按钮设为 Disabled两个框都有内容时 Enable二是步骤条的推进——当前步骤等于 2 时才允许进入下一步否则提示请先完成上一步三是列表筛选——下拉选全部就显示完整列表选具体分类就切换动态面板的 State。条件判断的顺序有讲究。多个条件用 Else If 串联时Axure 从上往下依次匹配命中一个就跳出。所以要把最特殊、最窄的条件放前面最宽泛的放最后否则永远走不到后面的分支。这个逻辑跟写代码一样但在可视化面板里很容易被忽略因为所有分支看起来是平铺的。4.6 悬浮说明与批注给演示对象看的说明层原型交付时最尴尬的是评审问这里为什么这么设计你翻半天找不到说法。解决方案是两层一层是 Tooltip元件属性里可以填一段悬浮提示文本鼠标悬停时显示适合给按钮、图标加一句话解释另一层是图形外显批注插入批注图形一个带小尾巴的标注框里面写设计说明给它命名然后在页面加载时统一设为隐藏再放一个显示批注的开关按钮统一 Show。批注的颜色可以用取色工具从主色板里吸一个浅色跟整体风格保持一致。批注框默认隐藏这件事一定要做成批量动作——把所有批注图形组合成一个组命名grp_notes一个 Show/Hide 动作搞定别挨个加。提示给客户演示时默认关批注给内部评审时打开批注。这个开关本身就是专业度的体现。5. 避坑排查Axure 9 原型在别人电脑上翻车的五个高频原因5.1 现象我这能点发过去点不动最典型的一次本地 F5 预览一切正常压缩包发过去对方双击start.html页面出来了但所有跳转和内联框架全是空白。原因不在 Axure在浏览器对file://协议的限制。内联框架加载站内页面、部分脚本行为、跨文件请求在本地文件协议下会被安全策略拦住再加上很多人打包时只发了start.html一个文件resources、data、files这些目录没带上页面框架有了内容全丢。解决办法有两条一是发给对方时把整个生成目录压缩一个文件都不许挑二是在本地先用 HTTP 服务验证一遍确认无误再发。起服务的命令很简单进入生成目录执行# 进入生成好的原型目录目录名以实际为准 cd prototype_dist # 起一个本地静态服务端口随意别和已有服务冲突 python3 -m http.server 8000 # 浏览器访问 http://localhost:8000/start.html逻辑说明http.server是 Python 自带的静态文件服务器把当前目录当根目录对外提供这样浏览器就以http://协议访问前面那些协议限制全部消失。参数上只需要注意端口别撞车8000 被占就换 8080。这一步做完如果还是空白再去看发布配置里目标页面有没有被勾选。5.2 现象动态面板切过去文字被裁了一半列表态高度 400详情态内容有 600一切过去底部就没了也没有滚动条。原因是动态面板的尺寸在创建时由第一个 State 定死后续 State 的内容超出部分直接被裁不会自动撑开。Axure 里面板尺寸是面板级属性不是 State 级属性——很多人以为每个 State 能各设各的其实改的是同一个。解决方式有两种一是把所有 State 的容器尺寸统一到最高的那个内容少的 State 里留白二是把内容区做成固定高度加内部滚动用一个矩形设成可滚动容器。我一般选第一种因为演示时不需要真滚动留白比滚动条好看。改完记得每个 State 都进去看一眼别只改当前这个。5.3 现象弹层被遮罩盖住或者弹层盖住了导航点了按钮弹层出来了但压在它上面的是一层灰色遮罩内容看不清或者反过来弹层把顶部导航整个盖掉了。原因有两个层面。第一是 Show 动作的顺序先 Show 弹层再 Show 遮罩遮罩就会盖在弹层上。第二是运行时提层只对当次生效后面别的元件被 Show 出来时层级关系又变了所以不能依赖 Bring to Front 到处救火。解决办法是把层级在画布上一次性摆对从下往上依次是页面内容、遮罩、弹层、右键菜单四层的顺序用右键的 Order 菜单调好动作里只做 Show/Hide不勾提层。关闭时严格反序先关菜单、再关弹层、最后关遮罩。这套顺序固化下来之后弹层相关的翻车基本绝迹。5.4 现象表达式不生效页面上原样显示 [[...]]明明写了[[LVAR1.text]]预览时页面上就显示这串字符一点没求值。原因通常有三种。第一种写的位置不对——表达式必须写在交互动作的值字段里比如 Set Text 的文本输入框、条件判断的比较值、Move 的坐标如果写在文本标签的内容里且这个标签没有参与任何交互就不会求值。第二种局部变量没声明LVAR1是个空引用整个表达式失效。第三种中括号用了中文全角【【和[[在编辑器里看着差不多机器完全不认。排查顺序建议是先看变量声明区有没有 LVAR1 并绑定了元件再看括号是不是半角最后确认这个字段本身是不是求值上下文。这三步走完九成的问题能定位。5.5 现象换台电脑字体全变了排版整体错位自己电脑上排版精致客户那边一打开标题溢出、按钮文字换行、行高全乱。原因是原型里用了本机安装的字体对方机器没有浏览器回退到默认字体字宽变化导致整个布局重排。Axure 生成的是 HTML字体不会打包进去。解决方式是整套原型只用系统安全字体中文用系统默认的黑体/苹方回退栈英文用 Arial、Helvetica、system-ui 这一类别用下载的艺术字体。真需要特殊字体就把关键文字做成图片或者接受它只在演示机上好看。字体这件事属于上线前必须过一遍的检查项别等到现场才发现。6. 生成与交付把 .rp 变成双击就能演示的 HTML 包6.1 三种发布方式怎么选Axure RP 9 的发布入口有三个F5 是快速预览只在本地临时生成关掉就没了适合边做边看Generate HTML Files 是生成到本地目录产物完整、可打包、可拷给别人是对外交付的主力还有一种是在线发布适合团队内部共享链接但对网络有依赖现场演示不推荐。我的固定流程是开发阶段全程 F5交付前用 Generate HTML Files 生成一份完整目录本地起 HTTP 服务自测一遍再压缩发给对方。生成时注意勾选包含所有页面别只勾当前页——很多人图快只勾一页结果对方点导航全是空白。6.2 生成产物自检清单生成出来的目录大致是这些内容文件名在不同版本里可能略有差异以实际为准产物作用自检点start.html / index.html入口页双击能否正常打开resources/样式与脚本缺失会导致布局全乱data/页面结构与交互数据缺失会导致点不动files/图片等素材缺失会显示裂图plugins/依赖库缺失会导致部分交互失效自检动作就三步整个目录拷到另一台没装 Axure 的电脑上起本地服务打开把主流程点一遍。这三步能挡掉八成现场事故。6.3 一个我常用的收尾技巧给原型加初始化开关页面级有一个 Page Loaded 事件很多人没用过。我习惯在每个主要页面的 Page Loaded 里做三件事把动态面板重置到初始 State、清空所有输入框Set Text 为空、把批注组和调试用的辅助元素统一隐藏。这样做的好处是演示时不管上一轮点到什么状态刷新页面就是干净的起点不用手动收拾。这个习惯是被一次现场坑出来的连着演示三条流程上一条流程把筛选面板留在了打开状态切到新页面时弹层直接盖住了标题当着评审的面手忙脚乱找关闭按钮。从那以后我每次生成演示文件前都会把 Page Loaded 的初始化动作强制走一遍再刷新三次确认状态干净。这个开关不显眼但它是演示稳定性的最后一道保险。希望帮到你。本文还有配套的精品资源点击获取