简介Axure RP是产品经理与交互设计师常用的原型设计工具这份图文教程系统讲解其核心用法。资源从原型设计工具选型讲起对比纸笔、Word、Visio、PS、DW等常见工具的适用场景说明Axure在快速创建带注释wireframe、一键生成HTML演示、自动输出Word文档等方面的独特优势同时提到自动保存等细节功能保证设计文件安全。教程基于Axure 4.6稳定版撰写并兼顾5.0新特性分步骤介绍欢迎界面、主界面、工具栏、站点地图、部件库、复用模板、交互功能与注释等模块配合实例演示操作流程帮助初学者理解动态面板、变量控制等进阶用法实现在不编写HTML和JavaScript的情况下制作可交互原型。资源为单个doc文档体积4.73MB内容结构清晰适合产品新人、交互设计师按章节循序渐进学习。该教程发布于CSDN已有164人浏览学习是入门Axure RP的高性价比参考资料。1. Axure图文教程到底在讲什么为什么原型工具里它最“重”也最“真”很多产品团队在“设计稿”和“开发排期”之间缺了一个能点击、能弹窗、能录数据的验证层。用 PPT 画线框图交互靠嘴讲用代码写 demo成本又高到接近半个上线项目。Axure 就是填这个空档的它不上线但能把跳转、表单校验、轮播、列表分页全部按真实逻辑跑起来。这份图文教程不会带着你背菜单而是从建页、摆组件、接事件、加变量到发布和踩坑把每一步背后的判断标准说清楚。适合刚入行的产品经理和交互设计师也适合想补中继器、动态面板功课的熟手。看完你会明白Axure 的本质不是画线框图而是用接近真实系统的逻辑把业务流推演一遍。2. 选对版本和启动方式Axure RP 9与RP 11的差异和落地配置2.1 版本怎么选RP 9的生态最稳RP 11的样式更现代打开搜索引擎你大概率会看到一堆关于 RP 9 和 RP 11 的争论。作为一线做交付的人我的判断标准是“同事的 .rp 文件能不能直接拖进来”。RP 11 改了交互面板的入口也改了默认组件的样式名直接打开旧文件经常会出现变量丢失的提示。RP 9 的默认组件更朴素但中继器、动态面板、全局变量这些核心能力已经足够完整而且网上 80% 的教程和答疑都基于 RP 9。团队没有明确升级计划前建议还是以 RP 9 为主力。对比项Axure RP 9Axure RP 11打开旧 .rp 文件直接打开无需转换提示迁移部分旧样式需重设界面主题浅色浅色/深色可切换组件库Default、Flow默认组件更扁平化学习资料多图文教程覆盖到细节少很多案例停留在演示稳定度经过多年验证新版本偶有插件兼容问题如果你所在公司买了新电脑且团队愿意统一用 RP 11那用它做新原型完全没问题。但保存时记得为协作方生成一个 RP 9 可打开的版本这个选项在存盘对话框里可以选。反过来RP 9 的文件在 RP 11 里打开后保存时软件会提示升级格式如果没有备份这一操作不可逆。血泪经验升级前一定复制一份 .rp 文件出来以防格式迁移后某些母版错位。2.2 安装和授权从官网下载到正式启用的关键步骤安装这个环节很多人会卡在授权上。我不建议也不鼓励你去搜破解版和注册机——原型文件里存着你的业务逻辑和交互设计用来路不明的工具打开等于把设计资产暴露在额外风险里。Axure 官方允许试用试用期内所有编辑功能都可用唯一不方便的是发布到云服务时带水印。对内部评审和本地演示来说试用版已经能跑完整流程。等真正需要长期协作时由公司采购团队授权属于研发成本的一部分。从官网进入 Download下载对应操作系统的安装包。双击安装包安装目录建议保持默认的C:\Program Files\Axure\Axure RP 9不要手动改成中文目录比如C:\原型工具\Axure。第一次启动时会让你登录账号或开始试用选择 Continue Trial 即可。如果要把 .rp 作为默认文件关联在安装完成时勾选 Associate .rp files。没有勾选也可以后期在文件属性里手动关联。Mac 上的安装逻辑类似。有一个常见坑从网上下载的 .rp 文件被系统标为“下载的文件”第一次打开时会被 Gatekeeper 拦截。右键文件选择打开再点打开确认一次就能进入 Axure。这个操作不是破解只是 macOS 对未公证文件的默认提示。2.3 先记四个面板页面、组件、样式、交互再开始动手进入 Axure 后工具栏反而不是重点。我习惯把界面分成四个区域。左上角是页面面板管理所有页面和文件夹左中是组件库也就是元件列表默认包含矩形、椭圆、文本框等右侧上方是样式面板调整尺寸、位置、填充、圆角、透明度右侧下方是交互和说明面板事件、用例、变量都从这里进去。这四个位置弄熟后其他浮动窗口比如大纲、项目都可以暂时关掉画布能再大一圈。页面面板的使用有一个容易忽略的操作选中页面后按 F2 重命名按回车创建子页面。图文教程里常出现的“文件夹-页面”两层结构我一般这样搭文件夹叫01-登录下面建login_page对应的页面。页面名称可以直接用中文但建议英文标识因为生成 HTML 时中文页面名会出现在 URL 里变成一堆百分号编码虽然还能访问但不利于排查。组件库面板顶部有搜索框可以搜 textbox、button但更快的做法是直接在画布上敲英文单词Axure 会弹出快速搜索组件。比如按 B 再输入 button就会从组件库里选中按钮。熟手通常先把常用组件从组件库拖到画布边缘建成自己的素材区再复制到各页面使用。2.4 自定义组件库与素材复用把高频模块变成预制件如果你每天画后台原型重复最多的模块就是表格、筛选栏、分页条。与其每次拖十个矩形不如把它们封装成自定义组件库。做法先画好一个标准的表格组件选中所有组成元素右键选择创建组件库部件。系统会提示保存到一个.rpl文件。以后在组件库面板右上角菜单选择 Load Library 加载这个 .rpl自定义组件就会出现在下方分组里。自定义组件库里的部件可以带交互。比如封装一个删除按钮它在自定义库中已经绑定单击弹窗动作拖到新页面后交互直接生效。这一点对团队标准化非常有效。注意Axure 的自定义组件库属于复制引用不是动态链接。更新组件库后需要重新拖入新的部件替换旧实例。这也是图文教程里很少提到的边界。到这里环境已经就绪。下一章我们从零开始画第一个页面把进入 Axure 后的操作串起来。3. 把静态图文变成动态原型的核心操作从矩形到页面交互3.1 页面规划与命名用文件夹把流程拆成可追溯的版本真正开始画之前先在页面面板里建好骨架。产品流程可以拆成几条线比如登录线、首页线、详情线。每条线建一个文件夹页面统一按“功能_状态”命名。我常用的命名是login_page、login_loading、home_page、home_empty。这样生成的文档目录会显得规划整齐开发拿到 HTML 后能直接顺着文件名定位页面。然后设置项目属性菜单“项目 项目设置”在页面样式里把画布背景设置成浅灰如 #F5F5F5。为什么要改背景色因为默认纯白画布容易让白色组件糊在一起视觉层级看不出来。页边距宽度按产品类型来Web 端按 1440 或 1920 拉稿移动端按 375。这个宽度会在发布 HTML 时作为默认视口。新建页面login_page双击进入。你可以直接从视觉稿里截一张登录界面图拖到画布上当作背景。然后把交互热区覆盖在用户名输入框、登录按钮上。这样既保留高保真视觉又不用重新拼组件。这种做法在图文教程里特别常用因为它解决了“Axure 画不出漂亮 UI”的瓶颈。注意图片拖入后默认带边框右侧样式面板里把边框去掉缩放时按住 Shift 保持宽高比。3.2 摆放登录页组件命名、层级和叠放顺序如果你不想用图片可以用基础组件拼一个登录页一个矩形作为背景板两个文本框作为输入框一个按钮矩形作为登录按钮。关键点是每个组件都要命名例如input_username、input_password、btn_login。选中组件后在右侧样式面板顶部有名称输入框直接改。名字不要带空格和特殊字符用下划线连接。层级关系决定谁遮挡谁。右键组件可以看到“置于顶层/底层”。背景图应该在最底层输入框在背景上方按钮再上方。拖动组件时按住方向键微调位置每次移动 1 像素按住 Shift方向键每次移动 10 像素。如果你把输入框和背景图完全重合选中输入框后按 Ctrl[ 可以下移一层避免按钮被背景图盖住无法点击。这里有一个新手容易忽略的细节按钮文本和按钮本身最好是一个整体。如果你把文字单独放到按钮上方文字就不是按钮的一部分点击按钮时文字不会被触发。正确做法是选中矩形直接双击输入文字让文本成为矩形的内容。这样按钮单击事件才会涵盖整个矩形区域。3.3 第一个交互按钮单击跳转页面的用例编辑器选中btn_login右侧交互面板上点击新建交互选择事件“单击”。在弹出的用例编辑器中左侧是条件列表右侧是动作列表。动作列表里找到“打开链接”在下方配置框里目标选择“项目中的页面”再选择home_page。打开方式选“当前窗口”。确认后这个按钮的交互用例里就有了第一条动作。要注意交互面板的事件类型区分得很细。如果没有选“单击Click or Tap”而选成了“鼠标移入MouseIn”鼠标扫过按钮就会跳转鼠标移走反而不跳。这个现象在演示时很尴尬。所以每建一个用例先看事件名再配动作。做完后按 F5 预览把鼠标移到按钮上再移开确认不会误跳。用例编辑器右侧动作是可以叠加的。比如“打开链接”之前先“设置变量值”再“显示提示”。动作从上到下顺序执行。同一按钮有两个用例时执行顺序是列表从上到下且默认满足条件的用例执行后后续用例不再执行。如果你希望两个用例都执行要在用例设置里改成不阻止后续执行。这个参数在复杂交互里非常关键。3.4 热区、动态面板与母版让图片变成可交互的高保真原型如果你用截图做背景按钮其实不是一个真正的按钮而是一张图片。此时需要给“区域”而不是“图片”绑定事件。组件库里有一个“热区”部件是一个透明矩形外观上不可见。把它拖到截图上的登录按钮位置大小稍微调大一点覆盖按钮区域然后给热区绑定单击跳转。这样用户看到的是漂亮截图点击行为却真实可触达。如果视觉稿有多个状态比如默认、点击、加载你应该用动态面板而不是替换图片。把三张状态图放到同一个动态面板的三个状态里交互动作设置面板状态触发点击时切到加载状态等待 1 秒后切到成功状态。这个过程模拟真实请求。等待动作在 Axure 里就叫“等待”时间单位毫秒1000 毫秒 1 秒。加上等待动作后页面逻辑会让人感觉像一个真的系统在跑。母版的应用场景后台管理系统的侧边导航、顶部栏每个页面都要出现。选中这些公共组件右键转换为母版命名layout_sidebar。然后把母版拖到新页面位置自动对齐。母版的作用是一处修改全局更新。视觉稿改版时只需要改母版所有页面同步这也是图文教程里“图”能保持一致性的底层做法。4. 动态面板、变量与中继器把原型做到能演示、能录入数据4.1 动态面板的三个高频用法轮播、抽屉、加载状态动态面板的本质是一块区域多个状态。三个高频用法覆盖了大部分原型交互需求。轮播图是入门首选拖一个动态面板命名banner双击进入状态管理添加状态1、状态2、状态3每个状态里放一张图片。选中面板在交互面板添加“载入时”事件动作设置面板状态为“下一项”勾选重复间隔 3000ms。这样原型一打开轮播图就自动切换非常接近真实网站。抽屉菜单的逻辑刚好相反面板默认处于收起状态点菜单按钮切到展开状态点遮罩又切回来。关键在设置面板状态动作里的进入动画。左侧滑入选“向左滑动”退出选“向右滑动”动画时长 200ms 就能获得顺滑效果。如果动画太慢原型会显得拖沓太快则没有过渡感。推荐 200-400ms具体根据内容长度调整。加载状态适合表单提交场景。做一个动态面板login_submit状态1是“登录中”小菊花状态2是“登录成功”。登录按钮点击后先设置面板状态为状态1再添加等待动作 800ms再设置面板状态到状态2。注意动作顺序设置状态、等待、设置状态。这三个动作在同一用例里从上到下执行Axure 会按顺序执行并等待。这样给用户一种确实在验证的真实感评审时不会被追问“底部怎么没 loading”。4.2 全局变量与赋值从登录表单读取用户名并跨页面显示动态面板只能展示预设内容要展示用户输入的内容必须用到变量。打开菜单“项目 全局变量”点加号添加一个变量命名为username。回到登录页选中输入框input_username在按钮的单击用例里添加“设置变量值”动作变量选username值填[[input_username.text]]。画布中一个组件的文本内容可以像对象属性一样通过.text取值。这是 Axure 最有价值的表达式入口。取值之后在首页放一个文本框设置文本为[[username 欢迎回来]]保存并预览从登录页填写任意内容点登录跳转到首页这个文本框会动态显示“张三欢迎回来”。如果显示成空白检查按钮用例里是否设了变量以及首页文本框是否用的是“设置文本”动作而不仅仅是默认占位文字。变量也可以参与逻辑判断。登录按钮两个用例用例1条件设input_username的文本等于空则动作显示提示并停止用例2无任何条件执行跳转首页。这里“停止”不是某种高级 API而是用例执行后不再继续后续用例。如果不加停止空输入时照样会跳转。所以必须把异常用例放在上面。这个经验来自我早期做登录流程翻车空值也能登录成功被开发当场指出逻辑缺漏。4.3 中继器用数据集生成列表、排序与分页中继器是 Axure 里唯一能存储多行数据的组件。从组件库拖入中继器画布上会出现一个三行的默认列表。双击它进入数据集编辑器将默认列改为符合业务的字段名如id, title, status。每一行代表一条数据直接在表格里编辑或者从 Excel 复制粘贴进来。数据来源可以是后台返回示例也可以是手工造的数据。让列表项显示数据需要把数据集字段绑定到列表项内部的文本标签。选中中继器内的标签组件在交互面板添加“载入时”事件动作设置文本值写[[Item.title]]这里Item代表当前行数据对象Item.title取当前行的 title 列。如果一列显示多个字段可以拼接[[Item.title]] - [[Item.status]]数据更新后所有行会自动重新渲染。这就是中继器最接近真实列表的地方评审时能直观看到有数据的状态。分页和排序是真正的加分项。在右侧属性面板的分页区域把“每页显示”设为 6再在按钮上添加单击动作动作列表中找到“数据集 移到上一页/下一页”。如果你还要做搜索框用“数据集 筛选”动作条件写[[Item.title]]包含输入框文本。注意筛选的条件是动态取的表达式里要引用输入框的.text。中继器数据量超过 100 行后低配电脑预览会有明显卡顿所以演示时数据量控制在 20 行以内。5. 发布与协作的常见问题排查为什么别人打开原型是空白页5.1 双击 HTML 打开空白本地跨域限制与本地服务器现象用 Axure 菜单“发布 生成 HTML 文件”得到整个文件夹后直接双击index.html浏览器页面空白按 F12 看到一堆 CORS 错误。原因Axure 生成的是静态站点运行时通过 JavaScript 读取同目录下的资源。浏览器在file://协议下禁用了跨文件读取这是 Chrome 的安全策略不是原型本身坏了。解决最简单的验证方式是用 Python 起一个本地静态服务器。在生成的原型目录打开终端执行python -m http.server 8080然后浏览器访问http://localhost:8080/index.html。这个办法适用于 RP 9 和 RP 11 导出的项目也适用于动态面板、中继器等交互。如果不想开命令行也可以安装http-server这类小工具但我还是习惯用 Python因为大多数机器自带。端口 8080 被占用时换成 8000 或 9000。5.2 Chrome 预览失败扩展缺失与本地文件权限现象点击 Axure 工具栏的预览按钮弹窗报错“No browser is available to open the preview”或者 Chrome 打开了但页面没有任何动态交互。原因Axure 的实时预览依赖 Chrome 扩展Axure RP Extension for Chrome。这个扩展没有安装或者浏览器设置里禁止扩展访问本地文件预览就会退化成纯静态页面。另一个原因是 Axure 找不到浏览器路径尤其在 Mac 和 Windows 混用的团队里。解决从官网扩展页安装扩展然后在chrome://extensions/中开启“允许访问文件网址”。再回到 Axure菜单“文件 偏好设置 浏览器”手动定位 Chrome 可执行文件路径。如果公司对浏览器有统一管控无法安装扩展那就使用 5.1 的本地服务器方式发布后手动打开 HTML。5.3 中文乱码与字体不一致原型在同事电脑上变成宋体方块现象同一份 .rp 文件在自己电脑显示微软雅黑发给同事后所有中文变成了宋体甚至部分文字变成方框。动态面板里的字体尤其明显。原因Axure 默认语言环境里字体列表是跟随本机安装字体的。如果你在样式面板里选了某个特殊字体同事电脑上没有客户端会按 fallback 渲染中文 fallback 通常是宋体或黑体。直接发布到 HTML 后浏览器解析中文字体名时也可能因字体名编码问题找不到对应字体。解决字体选择上优先用跨平台安全字体。中文用Microsoft YaHei, PingFang SC, Noto Sans CJK SC这类组合把微软雅黑放最前面macOS 会匹配苹方Linux 匹配 Noto。在 Axure 的样式面板里字体下拉框支持直接输入字体名。如果只选 Arial中文字符会 fallback 到系统默认。更稳妥的方案是团队设计规范里统一约定字体名称并在发布 HTML 时勾选“嵌入 CSS”里的字体设置——注意Axure 不会嵌入中文字体文件嵌入只是编码层面的。原型阶段不要把注意力耗在像素级字体一致上布局和交互更重要。5.4 母版覆盖导致部分页面不更新团队协作里的“黑匣子”现象你改了一个公共导航栏母版大部分页面都变了但有个别页面仍旧是旧的新跳转入口。检查母版源文件确实是最新内容再看那个页面的母版实例右上角多了一个“覆盖”标记。原因母版默认允许页面覆盖。某人为了调整当前页面高亮在某次演示前手动改过该页面的母版实例。之后这个实例就脱离了母版主控母版后续更新不再影响它。Axure 把这个状态称为 Overridden它不会弹窗提醒所以很容易变成黑匣子。解决右键这个母版实例选择“移除覆盖”或“重置覆盖”然后再次从母版源拖一个新的实例。如果只是想表达当前页面菜单高亮更推荐用“页面变量 条件样式”来做而不是直接覆盖母版内容。至少要在母版实例附近加一个文本注释写明“本页覆盖了导航高亮”这样协作同事不会误以为是全局改动。5.5 生成 Word 图文文档时缺失截图从 Word 到 PDF 的替代路径现象菜单“发布 生成 Word 文档…”后打开 doc 文件页面截图区域是一个红叉或者只有控件列表没有图像。原因Axure 的 Word 导出依赖系统打印渲染某些精简版 Office 或远程桌面环境没有对应的渲染组件会导致截图生成失败。此外导出窗口里没有勾选“页面截图”也会造成只有文字。解决进入生成 Word 文档窗口确认“包含页面截图”复选框被勾选。如果还是失败换一条更稳定的路径先用“发布 生成 HTML 文件”然后用浏览器打开用浏览器自带的“打印为 PDF”功能将每个页面导出为 PDF最后合并 PDF。这个做法截图不会失真而且对移动端页面也支持。做图文详细教程时我通常直接把网页截图粘贴进 doc再手动配上操作步骤比 Axure 自动生成的可读性更好。6. 不写代码也能“写逻辑”用条件判断和函数把原型做得更聪明到这一步你已经能用动态面板、变量和中继器搭起一套演示完整的原型。但要让它更聪明还需要学会用条件判断和函数。Axure 的条件不是编程语言里的 if但足够表达业务规则。比如登录逻辑除了校验空输入还要限制错误次数。做法是在全局变量里加一个login_fail_count密码错误时执行“设置变量值”值为[[login_fail_count 1]]然后用条件判断该变量是否等于 3是则禁用登录按钮并显示“已锁定请 30 秒后再试”。这些动作全部通过鼠标配置完成不需要手写 JavaScript。常用的表达式除了变量拼接还有字符串截取和随机数[[Math.random() * 100000]] [[username.slice(0, 2)]]第一个可以生成随机验证码第二个可以截取用户名前两个字符做默认头像。另一个值得掌握的动作是“等待”和“显示提示”。在表单校验里如果输入框为空你可以在用例编辑器里添加“显示提示”动作提示内容会自动出现在组件附近。组合顺序是条件为空 → 显示提示 → 添加等待 300ms → 聚焦输入框。聚焦动作在动作列表的“组件”里有“获得焦点”这样用户不用手动点回输入框。这个细节在演示时非常加分评审会以为你写了不少代码其实只是几个动作排了序。我的习惯是原型里的逻辑做到“能讲清业务规则”就停不要追求把所有边界都做成代码。逻辑越多演示分支越密反而容易把自己绕进去。而且每次发布前把每个分支至少走一遍尤其是空数据、错误数据。原型设计本质是提前发现产品漏洞不是画得越漂亮越好。希望帮到你。本文还有配套的精品资源点击获取