简介面向产品经理与交互设计师的 Axure RP 图文教程系统讲解原型设计中的线框图、批注、流程演示与文档生成方法适合希望摆脱纸笔、Word、PPT 等通用工具局限的初学者。资源为 1 个 doc 格式文档压缩包约 4.73MB内容先从 Axure 软件定位、界面与欢迎页讲起再依次介绍工具栏、站点地图、部件库、复用模块、交互与动态面板、注释与变量并通过实例演示如何快速创建带注释的 wireframe、一键生成 HTML 演示页面以及自动产出规范的 Word 原型文档。同时还提到 4.6 稳定版与 5.0 beta 的演进便于读者按版本选择学习。已有 164 人学习下载适合作为产品经理岗位入门自学或团队内部培训的配套资料也可用于日常快速查找 Axure 基础操作。1. 为什么把 Axure RP 9 当成“逻辑设计工具”而不是画图工具很多刚接触 Axure 的人拿到软件第一反应是拿它画界面画完导出几张图片丢给开发就完事了。这是对 Axure 最大的误用。Axure 的价值不在“画得像”而在“跑得动”同样是登录页面静态图只能让开发猜交互细节而用 Axure RP 9 做的原型能把输入校验、按钮置灰、跳转提示、权限拦截这些逻辑直接点出来评审会上当场演示省掉一大半口头扯皮。这篇教程按我平时从零搭高保真原型的路径来写先讲软件里最该先摸清的三个面板再把交互逻辑怎么做、中继器怎么用、导出交付有哪些坑逐一讲透。适合产品经理、交互设计师以及所有需要在开发前把需求“说清楚”的从业者。2. Axure RP 9 的界面与静态原型从新建文件到可点击的高保真页面2.1 页面导航、画布与组件库打开软件后先看这三个地方Axure RP 9 的界面布局和 8.0 相比变化不小但核心区域就三块左侧的页面导航面板、中间的画布工作区、右侧的样式与交互面板。新手最容易犯的错是拿到软件就拖组件完全不看页面导航——结果做了一百个页面全部堆在“Page 1”里后来想找某个界面只能靠滚动条碰运气。我一般的习惯是开工前先花五分钟把页面结构搭好。比如做一个电商项目的原型页面导航里就先建好电商后台原型 ├── 01-登录注册 │ ├── 登录页 │ ├── 注册页 │ └── 找回密码 ├── 02-商品管理 │ ├── 商品列表 │ ├── 商品详情 │ └── 商品上下架 ├── 03-订单中心 │ └── 订单列表 └── 04-会员管理 └── 会员列表页面导航里用中文数字编号前缀是团队协作时的常见做法。原因有两个第一Axure 导出 HTML 时页面文件名会直接使用这里的命名带着编号的命名在浏览器标签页里一眼就能看出层级第二后续做全局事件跳转时下拉选择目标页面的列表是按名称排序的规范命名能节省找页面的时间。画布工作区默认是 1000 像素宽无限高。做 Web 端原型时我习惯把画布宽度调到 1280用右侧的样式面板改掉而不是直接用默认尺寸。移动端原型则建一个独立的页面画布宽度设成 375再把画布底色改成浅灰让手机界面视觉上有边界感。组件库是另一个容易被忽略的地方。RP 9 默认的组件库里除了常见的矩形、文本框、按钮之外还有一个“图标库”里面是矢量图标。拖图标进来后可以直接改填充颜色和大小比起截图贴图矢量图标在导出高保真原型时不会发虚。不过默认图标库数量有限真做后台管理系统时我一般会再引入第三方组件库常见做法是在“库”面板右上角点下载按钮从 Axure 官方社区拉一套后台管理模板组件。提示第三方组件库本质上是一个 .rplib 文件导入后只是多了可复用的组件不会影响当前原型文件的运行速度。但同一次会话里加载的组件库越多编辑器越卡建议只加载一到两套日常用的。2.2 用中继器做动态列表表格数据也能像真实系统一样刷新静态原型里一张商品列表通常就是画一个表格然后一行行填数据。问题是如果一个商品要增加库存字段、要排序、要按条件筛选画出来的静态表格改起来会让人崩溃——每改一个数据就要手动挪一次格子。中继器Repeater就是解决这个问题的。中继器在 Axure RP 9 里位于组件库的默认分组下拖到画布上会看到一个带“中继器”三个字的方框。双击它内部会进入一个类似表格的编辑界面列名对应字段行对应数据。把表格数据填进去之后画布上的中继器会自动把每一行渲染成你设计好的行样式。做一个商品列表的中继器核心步骤是这样的从组件库拖一个“中继器”到画布。双击进入中继器内部编辑态把默认的 5 列改成商品名、价格、库存、状态 4 列。在画布上双击中继器内部的第一行把四个列值分别拖出一个文本组件并设置每个文本组件的值分别为[[Item.Name]]、[[Item.Price]]、[[Item.Stock]]、[[Item.Status]]。回到画布主页点预览按钮中继器的每一行会自动按内部行模板渲染。这里的[[Item.Name]]就是中继器自带的数据函数。Item指当前遍历到的数据行点号后面的字段名对应该列的列名。这个语法不需要背选中文本组件后在右侧交互面板的值里点 fx 按钮弹出的“编辑文字”对话框里就能可视化插入这些函数。数据绑定之后如果想要“库存为 0 的商品行标红”不需要逐行去改样式只需要在中继器的“样式”事件里加条件判断如果[[Item.Stock]] 0则设置该行背景色为浅红。中继器的行样式是循环渲染的条件逻辑只写一次所有符合条件的行都会自动生效。这就是为什么说 Axure 能不能做出“真系统”的感觉很大程度上看你有没有用好中继器。中继器的数据量上也有讲究。默认的中继器表格可以手动追加行也可以使用“导入数据”功能从 CSV 文件批量导入。超过两百行数据时预览性能开始下降编辑器里滚动会变卡。所以原型阶段别把全量数据都塞进中继器放 10 到 30 条有代表性的数据就够演示了真实系统对接是开发的事。2.3 样式与母版让一套头部导航复用一百次做后台类项目几乎每个页面都有同一套顶部导航和左侧菜单。如果每个页面都复制一份后来说要改菜单文字就得进上百个页面里一个个改这就是新手最常见的“复制一时爽改版火葬场”。母版Master就是给这种场景用的。在 RP 9 的页面导航面板底部有一个“母版”区域。把做好的顶部导航整体选中右键选择“创建母版”就可以把它存成母版。之后从母版区域把它拖到任意页面里它就变成该页面的一个引用组件。母版有两种引用方式双击画布上的母版实例在弹出的对话框里可以选“仅当前页面”还是“所有页面”。想要所有页面统一变化就在创建母版后右键母版选择“添加到所有页面”。这样改一次母版内部的内容所有引用它的页面同步更新不用再担心漏改。母版的样式细节也值得注意。母版内部组件的固定定位属性例如让导航栏始终吸顶需要单独设置选中母版内部的导航栏矩形在“交互”面板的“固定到浏览器窗口”里勾选“固定到浏览器窗口”并选择“水平居中”。如果不做这一步光把母版拖进页面页面往下滚动时导航栏会跟着滚走效果就达不到“后台系统”的标准了。3. 交互逻辑的落地交互面板、用例与事件链的正确写法3.1 交互面板的四个事件层鼠标、焦点、载入与键盘事件从哪配静态原型做完接下来是让它“活”起来。Axure RP 9 的交互面板在画布右侧选中任意组件后会显示“交互”栏和“样式”栏。交互里默认列出该组件支持的事件矩形、图片这类可见组件最常见的是“单击”“鼠标移入”“鼠标移出”文本框还会多出“获得焦点”“失去焦点”“文本改变”事件而整个页面能在“页面样式”里给页面本身加“载入时”事件。这四个事件层在实际需求里对应着常见的交互场景。“单击”事件做跳转和弹窗“鼠标移入”做悬停显示“获得焦点”和“失去焦点”配合做输入框的高亮和校验提示“页面载入时”则用来做初始数据的加载逻辑比如进入列表页时自动给中继器排序。配置事件的入口是选中组件后在右侧交互栏点“新建交互”下拉菜单。以“单击时”为例点进去之后会弹出一个“用例编辑器”。Axure 的交互逻辑是基于用例Case的一次点击可以配置多条用例每条用例按顺序执行。默认情况下所有用例都会执行除非你在用例上加了条件判断让它只在满足某些条件时才执行。写交互时我习惯遵循一个原则一个组件的一个事件只做一件完整的事。比如登录按钮的“单击时”用例就应该是“校验 → 反馈 → 跳转”三连而不是在校验逻辑里顺便去改列表数据。逻辑拆分清晰后边排查问题会省很多事不然在九个用例叠在一起的事件列表里找一个失效条件真的是翻车的血泪来源。3.2 用条件逻辑做“如果-那么”判断登录校验与权限控制的交互写法只做跳转不加判断的原型本质上还是静态的。真正让 Axure 原型有“系统感”的是条件判断。最常见的场景就是登录页校验用户输入空账号或者空密码点击登录时不应该直接跳到首页而应该提示“请输入账号/密码”。在 RP 9 里实现这个逻辑的步骤画布上拖入两个文本框组件分别命名为account和pwd再放一个登录按钮。选中登录按钮“新建交互”里单击时在用例编辑器上方点击“启用条件”。条件设置为组件文字“account”等于空字符串条件编辑里可以直接选“text of widget”。满足条件下添加动作“显示”一个预设的提示文本组件内容写“请输入账号”。再新建第二条用例同样启用条件判断pwd是否为空为空则显示“请输入密码”。第三条用例不加条件动作是跳转到首页并隐藏所有提示文本。这里的执行顺序很关键。Axure 里用例是按创建顺序从上到下判断的第一条用例如果条件成立执行完之后不会自动跳过后面用例除非你在用例编辑器里把该用例的后继行为改成“停止后续用例”。所以正确的做法是给校验通过的那条用例比如跳转首页那条设置成“停止后续用例”或者反过来给前面的每条校验用例都设置“停止后续用例”这样才不会出现“账号为空还跳转了首页”的翻车现场。权限控制的思路也类似只是判断的对象不是文本框内容而是全局变量里存放的登录状态。先约定一个全局变量isLogin默认值设成false。当登录成功时把它改为true。然后在需要鉴权的页面“载入时”事件里判断isLogin true才放行否则先弹提示再跳回登录页。这样做出来的原型演示的时候就很有说服力——别人能真真切切感受到“没登录不能用系统”而不是口头上说“这里需要登录权限”。3.3 全局变量与局部变量跨页面传参可以不写一行后端代码Axure 里变量分两种全局变量和局部变量。全局变量定义在顶部菜单“项目 → 全局变量”里原型运行期间一直存活能跨页面读取和写入局部变量则是表达式里临时引用的值比如中继器[[Item.Price]]里的Item就是一个局部变量只在当前循环里有效。跨页面传参的典型场景是列表页点某一行跳转到详情页并且详情页要显示对应行的数据。纯静态做法是把详情页复制好几份每个对应一条数据但数据多了完全不现实。正确做法是列表页中继器里给行内元素设置“单击时”交互。在交互动作里选择“设置变量值”把全局变量productId设为当前行的[[Item.Id]]。接着添加动作“打开链接”跳转到详情页。详情页在“载入时”事件里用中继器或者文本组件读取productId再根据 ID 设置显示内容。这一步的原理就是“先存后取”列表页负责把当前点击行的关键值存入全局变量详情页负责读出来并渲染。用中继器做详情页时回读变量后调用中继器的“添加排序”或“设置当前显示”功能就能让中继器只显示从列表传过来的那一条数据。提示变量名建议使用驼峰命名例如productId、userName不要用中文名。虽然 Axure 支持中文变量名但在表达式里混用中文和函数时偶尔会出现编辑器光标错位的玄学问题用英文命名能少踩一个坑。4. 从原型到可演示系统预览、检查与导出交付4.1 用浏览器预览与 Chrome 扩展调试真实交互交互逻辑写完之后在编辑器里点预览按钮可以直接打开浏览器调试。默认预览用的是 Axure 自带的本地服务器页面会在浏览器新标签里打开。但我强烈建议你在 Chrome 里装一个 Axure RP Extension for Chrome 扩展理由在字体渲染上Axure 导出的 HTML 页面默认使用系统字体如果不装扩展页面字体和设计稿会有明显偏差装了扩展后浏览器能正确加载 Axure 生成页面里的字体样式预览效果才贴近编辑器里的样子。预览的另外两个实用技巧一是按 F12 打开浏览器开发者工具切到 Console 面板查看报错。Axure 产生的交互逻辑出问题时经常会在 Console 里打出红色报错定位到出错的函数名顺着去编辑器里找对应组件。二是预览时如果发现某个交互没反应别急着回编辑器先确认浏览器地址栏里是否出现了#page标记。如果没有这个标记说明页面跳转动作压根没配上问题大概率出在动作漏选目标页面上。预览调试阶段的体感速度也很重要。RP 9.0 的官方版本号 9.0.0.3746 是相对稳定的一版修早期 9.0 版本里中继器性能卡顿的问题。如果你用的版本在预览中继器列表时有明显的拖拽卡顿先升级到这个版本号再排查别的能省半个小时。4.2 将原型导出为 HTML 与图片交付物形态与文件组织方式原型的交付物无非三种形态HTML 离线包、图片长图、以及带说明的需求文档。HTML 离线包是最推荐的交付方式因为它保留了全部交互逻辑评审会上可以直接点开演示客户也能自己在浏览器里点来点去。导出操作在“发布 → 生成 HTML 文件”里。生成之后会得到一个文件夹里面是 .html 文件和一堆 js、css 资源。把这整个文件夹压缩成 zip 发给别人让对方解压后双击 index.html 开始浏览是最稳妥的交付方式。单独发一个 html 文件是不行的因为 Axure 生成的页面依赖同目录下的资源文件单独的文件打开后多半是白屏。导出图片的路径在“文件 → 导出 → 图片”。这里有两种粒度导出整个页面的长图或者导出当前选中的组件区域为图片。做方案汇报时我一般会把关键页面导出成 1280 宽的长图插进文档里让没装 Axure 的人也能快速浏览。导出长图时注意页面高度——画布高度超过 10000 像素时长图导出可能会裁断所以超长页面要做成动态面板分屏看而不是无限往下拖画布。HTML 转 Axure 的需求在热词里也常见但这通常不是指把网页变成 Axure 源文件而是别人给你一套现成的 HTML 页面想基于它出原型。常见做法是把 HTML 页面截图贴在画布上作背景然后在上面用透明热区覆盖按钮最后把链接和悬停交互补上。这个做法能快速做出一版“看起来和线上系统一模一样”的高保真原型适合做改动方案演示缺点是不能改动原有文字和间距只能加覆盖层。4.3 把线框图转成 Axure 可用组件导入与规范化不少团队还在用 Balsamiq 或者手绘线框图做初版方案等方案确认后再用 Axure 做高保真。这个流程没问题问题在于很多人把线框图的图片直接贴在 Axure 画布里当组件用结果页面一放大就糊。规范的转法是线框图只用来看布局Axure 里照着搭一套新的。把图片拖进画布作为陪衬层铺在最底然后照着图片上的结构用矩形、文本框、占位符等组件一层层重建。搭完之后删掉陪衬图片留下的是干净可编辑的 Axure 原生组件。占位符Placeholder是线框图转高保真时很省力的一个组件。在 RP 9 的组件库里叫“占位符”拖到画布上默认是带斜纹的灰色区域双击可以改成文字说明。项目早期不确定某块区域放什么时用占位符代替后边确认了再替换成具体组件。占位符在 HTML 预览中会显示为文字而不是实际内容所以正式交付前记得全部替换掉。5. Axure 踩坑排查我最常被问到的五个翻车现场5.1 现象中继器删了一行整个列表的行样式全乱有人用中继器做列表删掉中间一行数据后预览时发现行背景色的交替效果错乱原本偶数行是白色、奇数行是浅灰现在连续几行都是同一个颜色。原因在于中继器内部的行样式里用了[[Item.Index]]或者[[repeater.visibleItemCount]]这类基于行序号的计算而删除数据行后索引不会自动重排到“从 1 开始连续”筛选状态下的可见序号和真实序号对不上交替色自然乱套。解决不要依赖行序号的奇偶来做交替色改用中继器内部的“交替样式”功能。选中中继器内部的行模板在样式面板的“填充”里点交替颜色设置指定两种颜色后 Axure 会自动按显示顺序交替不受删除行和筛选影响。5.2 现象动态面板滚动失效内容跟着页面一起滚走把动态面板里的内容设置成滚动做法是在动态面板的“样式 → 滚动条”里选择“垂直滚动”。但有时预览时发现面板里的内容完全不受滚动条控制反而是整个页面在滚。原因动态面板的滚动属性只对面板自身的尺寸边界生效。如果动态面板没有设置固定高度而是被内容“撑开”了Axure 认为面板不需要滚动条于是所有内容直接溢出到页面上。解决回到动态面板的样式设置把“高度”改成固定像素例如 600px宽度不动再重新设置滚动条为“垂直滚动”。如果内容很多记得把面板的“溢出隐藏”也勾上否则内容超出面板区域时会在画布上露出一截视觉上很怪。5.3 现象条件判断永假按钮始终没反应做了一个条件判断按理说文本框输入“admin”时按钮显示另一个按钮但预览时不管输什么按钮都没反应就像条件判断是黑匣子一样。原因Axure 的文本值判断里默认比较的是文本框的“值”还是“显示文字”要看你在条件编辑器里选的是“组件文字”还是“文本框值”。如果选成“组件文字”对文本框来说它取值取的是组件名称而不是你输入的内容条件永远比不中。解决重新打开事件的条件编辑器把条件对象从“组件文字”改成“文本框值”。另外还要注意大小写问题Axure 的文本比较默认区分大小写如果输入了Admin而条件是admin结果也是假。需要忽略大小写时在表达式里用[[Value.toLowerCase()]]包一层。5.4 现象全局变量被莫名其妙覆盖跳转带参数失效列表页设置了单击时给全局变量赋值再跳详情但详情页读出变量时值不对有时是空有时是上一次点击的旧值。原因页面“载入时”事件也在读这个全局变量而 Axure 的用例执行顺序默认是事件触发的第一刻就并行开始。如果详情页的“载入时”里先执行了“设置变量值”的用例把变量初始化成空字符而后列表页写入的变量值又还没到达就会出现读取到空值。解决在列表页的“打开链接”动作里把“设置变量值”这个动作放到“打开链接”之前执行。用例编辑器的动作列表是按顺序执行的拖动动作条目的上下位置可以调整执行顺序。另一个更稳妥的做法是不要用全局变量传参改用 URL 参数跳转时在“打开链接”的目标地址里追加?id[[Item.Id]]详情页用[[location.search]]解析这样即使页面刷新参数也不会丢。5.5 现象两人协作时保存的原型互相覆盖谁后保存谁倒霉团队协作用 Axure Cloud 或者局域网共享文件夹两个人同时编辑同一个 .rp 文件后保存的人会把先保存的人的改动整个覆盖掉。原因Axure RP 9 的本地文件不像在线文档那样有实时协同共享文件夹只是“共享这一个文件”没有任何冲突合并机制。谁后点保存谁就把对方的改动冲掉这是没有后悔药的。解决如果团队有协作需求优先用 Axure Cloud 的 Team Project 功能它能做到分支和合并。没有云服务的话采用“先抢编辑权再动手”的约定要动哪个页面先在工作群里说一声改完立刻保存并退出文件不要长时间占用。同时每天下班前导出一份 .html 备份到独立文件夹万一文件坏了还能把备份源文件翻出来。6. 让原型更像真系统的三个进阶习惯很多人的 Axure 原型做到“能点、能跳”就收手了但演示效果总差一口气开发看了还是觉得“这不就是个壳子”。拉近距离的办法有三个都是我在实际项目里验证过有效的小习惯。第一个习惯是用 Mock 数据和随机函数给原型“造内容”。修改中继器单元格的文字时可以用[[Math.random()*1000]]生成随机数配合[[Math.floor()]]取整让列表里的库存、订单金额看起来像真实数据而不是整整齐齐的测试占位符。造数的时候注意随机范围要和业务匹配——订单金额不会是一百万库存也不该每次刷新都变成负数稍微调一下函数参数就能让原型看起来“有人用过”。第二个习惯是把固定背景和滚动内容分层实现。常见的后台布局是左侧菜单固定、右侧内容区滚动。做法是把动态面板设置成固定尺寸后放在右侧内容区动态面板内部再放一个“内容容器”容器高度大于面板高度时面板出现滚动条。想要“背景固定、内容滚动”的效果记住一个口诀固定的是面板滚动的永远放在面板内部。第三个习惯是善用外部素材辅助搭建。RP 9 的图标库不够用的时候找设计规范里的 SVG 图标导成图片贴进来或者用 AI 画图工具生成需要的插画占位图再导入画布都比手动画一个歪歪扭扭的图形来得专业。这个做法谈不上多高明但确实能让原型在视觉层面接近“可交付的设计稿”评审时少挨几刀。这三个习惯做完你的 Axure 原型已经不再是一个“暂停在画布上的图片合集”而是一个可以拿着去和开发对需求的脚本级文档。每当我发现有人开始用中继器做真实数据的增删改查、用 URL 参数传递页面状态就知道他真正把 Axure 当成工程工具而不是画图玩具了。希望这篇教程里的细节和踩坑记录能帮你少走几段没必要的弯路。本文还有配套的精品资源点击获取