做 B 端系统那几年我经手的交互稿基本都是 Axure RP 9 出的 HTML 包甲方会议室里投影一开点着原型走流程,比看静态图效率高太多。所以每次带新人第一件事就是让他们把 Axure RP 9 装上然后跑通一次画页面—加交互—发布预览的完整闭环。这篇东西不打算写成说明书我更想按自己实际踩坑的顺序把 Axure RP 9 的安装与使用捋一遍——从下载安装包、处理系统环境那几个容易卡住的点到工作区怎么配、三大核心元件动态面板、母版、中继器怎么用、原型发布后画布在浏览器里宽度对不上怎么办再到团队协作和交付。适合完全没用过的新手也适合用了一阵但总觉得效率上不去、产出物不够规范的老手翻一翻。1. 原型工具路线这么多为什么还要碰 Axure RP 91.1 先把 Axure 的位置说清楚现在的原型工具大概分三条路线。一条是以 Figma、Sketch 为代表的设计稿即原型路线视觉精致、协作顺滑做 C 端 App 的静态流程和简单跳转非常快一条是墨刀、即时设计这类在线轻量工具拖拽快、上手门槛低适合早期验证想法第三条就是 Axure 这种重交互、重逻辑的路线元件行为可以挂条件判断、变量运算、函数调用能模拟出接近真实系统的交互反馈。判断该不该用 Axure我一般看两个信号第一原型里要不要有状态概念比如选中态、加载态、分页、筛选后列表刷新第二评审时要不要让开发照着原型推逻辑。只要命中一条Axure RP 9 的性价比就很高。反过来如果只是画几个页面连一连用 Figma 反而更快别为了工具而工具。Axure RP 9 能做的事简单说就是把页面 元件 交互 数据四样东西拼起来最后发布成一个可点击的 HTML 站点任何人拿浏览器就能看不需要装插件也不需要对方有 Axure。这一点在跨部门评审里特别值钱——你发给业务方一个链接他在地铁上就能点。1.2 RP 9 相比 RP 8 和 RP 10选哪个RP 9 是 2019 年前后的大版本界面从 RP 8 那种样式面板堆成山改成了左右分栏的现代布局样式、交互、说明三块合并进右侧 Inspector中继器的编辑体验也重做过一轮。RP 9 相对 RP 8 最实用的几个变化矩形/文本等基础元件的样式面板更集中中继器的数据集编辑支持直接粘贴 Excel 表格交互的用例列表可以拖动排序页面和母版搜索变得好用。RP 10 是在 RP 9 基础上继续迭代的版本界面语言基本延续。团队里为什么还有一堆人守着 9主要是历史项目文件版本问题以及团队协作的工程文件一旦升级到 10用 9 的同事就打不开了。我的建议很直接新项目、单人做直接用能拿到的最新版本如果团队已有 RP 9 的 .rp 工程在维护就统一用 9别混着来。本文后续的操作以 RP 9 为主10 里绝大多数路径和概念是通的。2. Axure RP 9 安装前的准备和安装全过程2.1 系统要求与几个容易被忽略的前置条件官方对 RP 9 的要求不算高但真正让人卡住的往往不是硬件而是下面这几项。项目建议配置说明操作系统Windows 10/11 64 位或较新的 macOS老版本系统可能在安装阶段就报错内存8GB 起步16GB 更舒服中继器数据量大时很吃内存磁盘空间预留 2GB 以上安装包本身几百 MB加上缓存和工程文件屏幕分辨率1920×1080 或更高低于 1366×768 时左右面板会挤运行库Windows对应版本的 .NET Framework安装程序一般会提示具体版本号Windows 上最典型的坑是高分屏缩放。如果你的笔记本是 2K/4K 屏且系统缩放设了 125% 或 150%Axure 的界面字体可能发虚甚至左右面板的图标错位。处理办法是右键 Axure 的快捷方式进属性 — 兼容性 — 更改高 DPI 设置勾选替代高 DPI 缩放行为缩放执行选应用程序。改完重启一次界面会清晰很多。macOS 上的坑是首次打开被拦住。从网上下载的 dmg 拖进应用程序后第一次双击可能提示无法打开因为无法验证开发者。这时候别去关什么安全设置开关直接进系统设置 — 隐私与安全性在下方找到刚被拦下的那条记录点仍要打开再确认一次就行。这是系统对未上架应用的标准处理流程跟软件本身是否安全无关。2.2 下载渠道与安装包校验渠道这件事我只推荐一种官方站点。原因不是道德层面而是纯粹的实际考虑——第三方渠道的安装包经常被重新打包轻则捆绑别的东西重则替换掉可执行文件你后面遇到的各种启动闪退授权反复失效大多源于此。装原型工具的人和团队协作、交付挂钩一个来路不明的安装包会让你在后面排查问题上浪费掉大量时间。下载完成后建议做个简单校验。Windows 上右键安装包看属性 — 数字签名正规发布的包会有签名信息macOS 上可以用命令行核对哈希值。这一步十几秒但能挡掉不少麻烦。至于授权Axure 官方提供一段时间的全功能试用试用期内功能是完整的足够你把本文所有操作跑一遍。试用结束后需要购买授权官方分不同档位团队项目、云协作这类能力在高档位里。学生和教师可以关注官方的教育优惠通道需要提供证明材料。我特别想提醒一句网上流传的那些注册码激活工具别碰一是夹带恶意程序的风险很高二是这类工具的账号如果被官方判定异常你挂在云端的团队项目可能直接访问不了丢的是自己几周的工作量。2.3 安装步骤与首次启动Windows 的流程是标准的下一步式双击 exe选择安装路径路径里尽量别带中文和空格这是很多工具的通病勾选是否创建桌面快捷方式点安装等进度条走完。如果卡在某个百分比很久通常是杀毒软件在实时扫描把安装目录临时加白名单再重试。macOS 更简单打开 dmg把 Axure RP 9 图标拖进应用程序文件夹然后从启动台打开。别直接在 dmg 里双击运行那样每次都要重新挂载镜像。首次启动会有一个选择界面大致是登录账号、输入授权、继续试用几个选项。我建议直接登录账号因为登录后你的授权、云项目、团队协作会绑在同一个身份上换电脑时登录一下就能继续用比记一串授权码省心。启动完成后你会看到一个欢迎页最近打开的文件、新建文件、示例文件都在里面。这时候先别急着画花五分钟做一件小事新建一个空白文件随便画个矩形然后发布一次预览。这一步的目的是验证安装—运行—发布整条链路是通的。我见过太多次有人画了两天原型到要发布的时候才发现发布失败回头查环境问题心态直接崩。3. 第一次打开界面工作区怎么配才顺手3.1 界面分区与必须先改的几项设置RP 9 的界面是四块顶部菜单和工具栏、左侧的页面面板与元件库面板、中间的画布、右侧的 Inspector样式、交互、说明三合一。左侧页面面板管理的是整个原型的页面树可以建文件夹分组比如登录流程主流程异常态分开。这里有个习惯我从一开始就坚持页面命名用编号加中文比如01-登录页、02-工作台别用页面1页面2。原因是发布出来的 HTML 左侧导航是按页面名排的评审的时候业务方要靠这个导航跳转名字乱等于把导航废掉。右侧 Inspector 分三个标签页样式管外观交互管行为说明管标注和注释。新人最容易忽略的是说明标签觉得原型能点就行了。但开发拿到原型最需要看的恰恰是这里写的边界条件、字段规则、异常提示。我的做法是每个关键元件都在说明里写清楚哪怕只有一句话。必须先改的设置有三项一是单位进项目 — 全局设置把单位统一成像素避免厘米像素混用二是画布的网格和参考线网格大小设成 8 或 10 的倍数做出来的间距才整齐三是自动备份间隔默认的间隔可以调短一点Axure 崩溃虽然不常见但一旦崩了没备份那是真的一天白干。3.2 画布、页面尺寸和自适应视图新建页面时默认尺寸是 1024×768这个默认值在有自适应视图的情况下其实只是个起点。页面尺寸决定了原型在浏览器里的画布宽度也是后面画布适配浏览器问题的根源。RP 9 的自适应视图Adaptive Views是个很有用但被低估的功能。它允许你为一个页面定义多套断点布局比如基础视图 1024、桌面宽屏 1440你可以在每个断点下分别摆放元件。发布后原型会读取浏览器窗口宽度自动切到对应的视图。听起来完美但实际用起来有个前提你得为每个断点都老老实实排一遍工作量翻倍。所以我的实践是只有在项目明确要求多端适配时才开自适应视图否则宁可用单套 1440 宽的布局靠居中和留白去兼容。参考线Guides建议在搭建布局骨架时先拉。从左侧或顶部标尺往画布拖就能拉出参考线比如左右各留 80 的安全边距、顶部导航高度 64先把这几根线钉住后面所有元件都往线上贴整个原型的对齐质量会立刻上一个台阶。按住 CtrlmacOS 是 Command拖动元件可以临时关闭吸附需要微调的时候用得上。4. 三个核心元件撑起 Axure 的八成工作量4.1 基础元件与元件库的正确打开方式RP 9 内置的元件库分几类基础形状矩形、圆形、线段、表单类文本框、下拉框、单选多选、按钮、布局类动态面板、中继器、内联框架、标记类便签、箭头。日常用得最多的是矩形和文本因为矩形改一改就是按钮、卡片、容器。这里分享一个提效习惯把常用的组合做成母版而不是每次重新拼。比如带标题的卡片搜索栏 筛选按钮分页条做完一次右键转换为母版以后从母版面板直接拖。改一次所有引用处同步更新这个机制能帮你省掉大量重复劳动。元件样式上我建议在项目初期就把颜色、字体、圆角、阴影这几套规范定下来用元件样式保存后面所有元件套用样式不要逐个去调。原型阶段视觉不用多精致但一致性必须有——同一排按钮高度不一样、圆角有的 2px 有的 8px评审时会被揪着问浪费的是交互稿的沟通成本。4.2 动态面板状态管理的核心动态面板Dynamic Panel是 Axure 的灵魂也是新人最怕的东西。一句话解释它就是一个能装多页内容的盒子同一时刻只显示其中一页你可以通过交互切换显示哪一页。它解决的典型问题包括Tab 切换每个 Tab 对应面板的一页、轮播图多页循环切换、下拉菜单收起态和展开态两页、弹窗弹里面放一个面板默认隐藏、加载态内容页和骨架屏两页切换。你看几乎所有会变化的界面本质都是状态切换。操作路径是这样的拖一个动态面板到画布双击进入编辑状态在面板的图层面板里添加状态命名成默认态加载中空数据这种有意义的名字。退出编辑后选中面板在右侧交互里加单击时 — 设置面板状态选中目标状态。命名这件事千万别偷懒一个面板里塞五个状态还叫State1 到 State5过两天你自己都不记得哪个是哪个。动态面板还有个隐藏技能是固定到浏览器。选中面板在样式里勾选固定到浏览器再设好水平和垂直的对齐方式发布后这个面板会钉在浏览器窗口上不随页面滚动。顶部导航、右侧悬浮客服按钮、底部操作条都靠这个做。4.3 母版与中继器复用和数据驱动母版的逻辑前面提过——一次定义多处引用改一处全同步。它的拖放行为有三个选项值得说清楚普通模式放置到任意位置适合导航这类位置自由的组件锁定到母版位置适合全局固定的页头页脚脱离母版Break Away则是在引用时断开链接变成普通元件适合以这个为基础改一改但不想影响其他实例的场景。中继器Repeater是 Axure 里最像编程的部分也是它区别于轻量工具的关键。中继器本质是一张带样式的表格你有两部分要维护一是数据集就是一行行的数据列名自己定义比如 name、status、date二是项内部的布局也就是每一行长什么样里面的文本用[[Item.name]]这样的表达式去取数据集里的字段。我做过一个带筛选和分页的订单列表做法大致是中继器里放三列订单号、状态、金额数据集里粘贴十几行测试数据然后加一个筛选按钮交互里用添加筛选动作条件写成[[Item.status 待处理]]再配一个分页每页显示 5 条。整个原型跑起来点筛选真的会筛点下一页真的会翻页业务方看一眼就明白你想要什么。这里有个我踩过的坑中继器的行高不要靠项内部里元件的绝对坐标硬撑而是用项布局里的行间距和内部第一个元件的 y 坐标配合。硬撑的结果是数据一多行和行之间重叠或者留白忽大忽小。另外数据集里如果字段名用了中文表达式里也要跟着用中文一旦中英文混着写很容易出问题建议字段名统一用英文小写。5. 原型发布后画布在浏览器里宽度对不上怎么办5.1 预览、发布和生成 HTML 的区别RP 9 里看原型有三条路很多新人分不清。第一条是预览Preview在软件内按快捷键或点工具栏的眼睛图标会用内置浏览器打开一个本地临时地址改动即刷新适合自己边做边看。第二条是生成 HTML 文件把整个原型导出成一个文件夹里面有 index.html 和一堆资源双击就能在浏览器打开不需要联网也不需要 Axure适合发给不方便访问云端的人。第三条是发布到云端生成一个链接适合需要持续更新、多人评审的场景。我的习惯是自己调交互用预览给业务方看用云端链接给甲方做离线交付或者需要归档的发 HTML 文件夹。生成 HTML 的时候注意一点导出的文件夹路径别太深、别带特殊符号否则某些浏览器打开本地文件时会因为路径解析问题加载不出资源。5.2 画布怎么适应浏览器宽度三种可行做法axure rp 9 pro 画布怎么适应浏览器是个被问得特别多的问题。原因是默认情况下原型页面是按固定像素宽度渲染的浏览器窗口比它窄就出横向滚动条比它宽右边就空一大片观感很差。我实际用过三种解法按场景挑。第一种调页面尺寸配合居中。把页面宽度设成主流桌面宽度比如 1440然后让内容在这个宽度内居中排布。这种做法实现成本最低缺点是窄屏笔记本上还是要横向滚动。适合内部评审大家屏幕都差不多。第二种用自适应视图做断点。给页面加一组断点比如 1024 和 1440在 1024 视图里把侧边栏收起、卡片改成两列1440 视图里铺开。发布后原型会根据窗口宽度自动选视图。这是最正确的方案代价是要排两遍布局适合正式对外交付的项目。第三种用发布设置里的缩放选项。RP 9 发布 HTML 时有一些关于缩放和适配的选项勾选后原型会按浏览器宽度等比缩放整个画布。优点是零改稿成本缺点是缩放后字号会跟着变小或变大在极端窗口尺寸下文字可能偏小。我的用法是内部演示时开缩放正式交付时老老实实做自适应视图。提示不要靠把页面宽度设成 9999这种歪招去规避滚动条。页面宽度过大很多交互里的坐标计算和固定面板的定位都会跟着乱最后得不偿失。还有个细节值得单独说固定到浏览器的元件在缩放模式下位置计算基准会变。如果你既有缩放需求又有悬浮按钮务必两种浏览器窗口尺寸下都点一遍确认悬浮元素没跑偏。这个我吃过一次亏演示现场悬浮的返回顶部按钮跑到了屏幕外非常尴尬。6. 团队协作、标注交付和文件管理6.1 团队项目与版本冲突RP 9 的团队协作有两种模式。一种是把 .rp 文件放进共享盘大家轮流编辑——这个模式我强烈不推荐因为 Axure 的工程文件是整体读写的两个人同时打开同一文件后保存的会把前者的改动整体覆盖掉且没有任何提示。另一种是团队项目Team Project文件存在服务端每个人检出Check Out自己的副本提交时做差异合并冲突会提示。做原型协作务必用后者。即使有团队项目我也建议做物理上的分工隔离页面按模块拆分谁负责哪个流程谁就只改自己那部分页面和对应的母版。母版是中继器之外最容易冲突的地方因为大家都想改公共组件改着改着就打架。比较稳的做法是指定一个人专门管母版和公共样式其他人只引用不改。6.2 说明、标注和交付物清单交付给开发我一般给三样东西可以点的 HTML 原型链接、原型里写在说明面板里的字段和规则、以及一份单独的补充文档写接口字段之外的业务规则和异常流程。前两样在 Axure 里就能解决第三样通常用文档工具写。标注这件事RP 9 相比 RP 8 有个变化以前可以生成 Word 说明书的做法在 RP 9 里被弱化了规格信息更多是直接呈现在发布的 HTML 里通过说明面板和元件注释来承载。所以养成一个习惯很重要——每个需要开发关注的元件都在说明面板里补一句比如输入框写手机号11 位数字非法输入时下方红字提示下拉框写选项来源后端字典默认不选中。这些字写起来一分钟省掉的是后面无数轮这里想表达什么的追问。7. 常见问题速查与避坑经验7.1 安装和启动阶段的问题现象大概率原因处理办法安装卡在进度条杀毒软件实时扫描安装目录临时加白名单后重试双击没反应缺少对应版本的运行库按安装提示补装运行库界面字体发虚高分屏缩放未适配兼容性设置里替代高 DPI 缩放行为macOS 提示无法验证开发者系统拦截未上架应用隐私与安全性里选择仍要打开授权反复失效安装包来源不明或被改动用官方渠道的包重装登录账号启动慢这个问题也顺便提一句。Axure 启动时会加载最近的工程和元件库缓存如果你最近打开过几个几百兆的大文件启动会明显变慢。我的做法是定期清理最近文件列表把不用的工程归档到别的目录别都堆在默认的工作目录里。7.2 使用过程中的高频坑第一个坑是原型越做越卡。原因通常是两种一是页面里堆了太多高分辨率图片二是自适应视图开了但只做了一套。图片建议先压缩再导入位图控制在合理尺寸自适应视图不用就关掉。第二个坑是交互点了没反应。排查顺序我固定成这样先确认触发事件对不对是单击还是鼠标移入再确认动作的目标元件选没选对同名元件很容易选错最后确认有没有被上层元件挡住透明的大矩形盖在上面点击事件会被它吃掉。第三种情况最难发现排查办法是临时把上层元件的填充设成半透明一眼就能看出来。第三个坑是中继器数据改了不变。中继器的数据集有两层一层是全局的默认数据一层是页面级覆盖的数据改错了层就会出现明明改了却不生效。另外中继器要先加载完才会执行项内交互涉及依赖数据的动作放在载入时事件里更稳。第四个坑是文本溢出。Axure 的文本不会自动撑高容器长文本要么被裁掉要么溢出边框。解决办法是给文本元件开启自动调整高度或者在设计时就预留足够空间用真实的长文案去测别用测试文本四个字测那样什么问题都发现不了。第五个坑是发布后中文乱码或者字体变化。这通常是字体没跟着走发布设置里可以选择把字体嵌入代价是包会变大不嵌入的话交付方的机器上没装你用的字体显示就会变。给外部交付时我倾向于嵌入或者干脆统一用系统常见字体比如思源黑体、微软雅黑这类。注意中继器和动态面板叠在一起用的时候不要给动态面板设太小的尺寸又指望内容自动撑开动画会跳帧甚至错位。涉及面板切换的动画时长别超过 300 毫秒长了会显得迟钝。8. 我自己在长期使用里攒下的一点心得真正让我效率提升的不是学会某个功能而是把重复动作转化成可复用资产。我的每个项目都会先搭一个启动文件里面预置好页面目录结构、一套元件样式、常用的母版页头、页脚、卡片、分页条、一套已经配好筛选和分页逻辑的中继器模板。新项目直接复制这个文件改省掉的是每次从零开始搭骨架的一两个小时。另外一个经验是控制原型的精度。很多人做原型时忍不住把视觉做到像素级最后交付时间全耗在调色和间距上。我的原则是结构、交互、状态、文案要准视觉达到能表达层级关系就停手。业务方真正关心的是我点这里会发生什么不是按钮的阴影是 3px 还是 4px。最后留一个小技巧讲给需要频繁做演示的人。准备两套发布链接一套是完整版包含所有正常流程和异常态一套是精简版只保留主流程的关键页面把左侧导航精简掉。给领导演示用精简版给开发对照逻辑用完整版。演示的时候页面列表干干净净讲起来顺畅很多这个我试过很多次效果差别非常明显。