简介这是一份面向互联网产品经理、交互设计师及原型设计初学者的 Axure 图文入门教程系统讲解 Axure 在产品原型设计中的定位、功能特点与核心操作逻辑。内容涵盖快速创建带注释的 Wireframe、自动生成 HTML Prototype、一键输出 Word 文档三大能力并逐一介绍主界面中的工具栏、部件库、属性面板、页面框架区以及注释与交互设置便于读者建立对工具的整体认知。资源共 1 个 doc 文件压缩包大小 4.73MB文字配合图示展开讲解适合按章节逐步上手也适合团队内部作为基础培训材料。已有 123 人学习下载。教程从 Axure 诞生的背景与版本发展讲起结合欢迎界面、主界面功能区、站点结构与页面组织等实际界面帮助读者理解从绘制框架图到设置交互逻辑、再到生成演示文档的完整流程是一份可以对照软件边看边练的入门资料。1. 为什么说 Axure 图文教程解决的是原型设计里的“黑匣子”问题很多第一次打开 Axure RP 的人反应往往是同一个界面布局老气元件排列了一大排拖到画布上却不知道下一步该干什么。相比 Figma、即时设计这类轻量工具Axure 的上手曲线确实陡但有一说一它依然是产品经理和交互设计师做复杂业务原型绕不开的选择。Axure 能让你不写一行代码做出带登录判断、权限控制和复杂联动的交互原型产出是纯 HTML浏览器打开就能直接验证。这篇图文教程就照从 Axure 界面认识到交付可点击原型的完整路径来写适合第一次接触 RP 的新手也适合从其他工具转过来、想搞懂动态面板和固定背景滚动到底怎么用的人。先别急着下载所谓“精简版”和密钥把基础操作逻辑理顺后面能少走很多弯路。2. 认识 Axure 的界面与核心概念先把四类面板和母版吃透2.1 四区布局页面面板、元件库、画布与样式检查器安装 Axure RP 后建议直接选默认工作区布局不要一开始就自定义因为工具栏、面板位置会对后续的图文教程阅读造成干扰。你实际需要关注的是屏幕上的四个区域。左侧最上方是页面面板对应整个原型的页面结构类似网站导航。页面面板可以在不同页面之间跳转也可以拖拽调整页面顺序和层级相当于信息架构的可视化目录。页面面板下方通常还有母版面板专门用来放公共部分。中间大片空白区域是画布所有元件都放这里。画布支持多张页面同时打开以 Tab 形式切换这点和小型设计软件不太一样。画布左侧是元件库面板Axure 自带的 Default 元件库分成了基本元件、表单元件、标记元件等几类矩形、文本框、下拉框、复选框都在里面。选中某个元件后画布右侧的样式检查器会显示它的位置、尺寸、填充色、字体等属性交互事件面板则在同一侧的下方。用快捷键 F2 可以快速切换元件库和页面面板这个习惯可以从一开始就养成。2.2 母版、动态面板与组合元件层级关系先理清很多新手把母版和动态面板混为一谈其实两者的使用场景完全不同。母版用于页面之间共享的固定内容比如导航栏、顶栏、底部 Tab改动母版后所有引用它的页面同步更新适合统一管理。动态面板则是一个可以包含多状态的容器同一位置在不同状态下手不同内容用于轮播图、Tab 切换、弹窗等交互场景。组合元件只是把多个元件成组打包便于一起移动和设置交互但它不参与内容状态的管理。你可以记住一个简单的判断标准需要出现在所有页面里用母版需要同一区域根据条件反复变化用动态面板只是为了让画布不杂乱、方便选中用组合。在画布上选中元件后右侧顶部会有一个“概要”面板展示页面内所有元件名称。给每个元件起一个能看懂的名字比什么都重要比如“底部导航_首页按钮”而不是默认的“矩形 1”。后面做交互跳转、写图文教程注释时这些命名直接决定你的效率。2.3 版本选型与中文界面RP9 和 RP11 怎么选现在网上流传最多的是 Axure RP 9 和 RP 11 两个大版本搜索词里也常常出现“axure rp9”“axure rp 11 共享”之类的词。我的建议非常明确如果是团队协作统一版本是第一原则如果是一个人做主新项目优先考虑 RP 11但要看两个关键点你是否能接受对比项Axure RP 9Axure RP 11默认文件格式.rp.rp内部格式升级对低版本兼容可以打开更早版本文件11 保存的文件9 打不开新组件与样式能力成熟稳定自带更多布局模板和主题插件生态资源最多逐步在跟进电脑性能要求要求较低界面渲染更快但内存占用偏高如果你是在公司现有项目里接班打开现有文件用什么版本就继续用什么版本不要主动升级否则同事接力时很容易遇到“RP 9 打不开 RP 11 保存的文件”这种尴尬情况。关于中文界面Axure 安装时通常会跟随系统语言如果拿到的是英文版可以在安装目录下的语言配置里切换或者使用自带的多语言入口把界面切换为简体中文。不要盲目下载来路不明的“汉化包”这类文件经常被捆绑了额外的东西为了一个语言包承担安全风险完全不值得。3. 从线框到可点击的图文原型基础操作和固定背景滚动3.1 用矩形、文本和图片搭建第一个页面骨架新建页面后先从元件库拖入一个矩形到画布双击矩形即可输入文字。文本框和标签的区别是很多人最早踩的坑标签用于展示静态文字文本框用于输入内容两者虽然外观接近但交互能力完全不同。做搜索框、登录框一定要用文本框元件。搭建标准页面骨架的操作顺序如下在页面面板中新建两个页面一个命名为“首页”一个命名为“详情页”。从元件库拖入矩形拖到画布左上方宽度设为 375高度为 60颜色填充深灰色模拟移动端顶部导航栏。再拖入一个矩形放在导航栏下方模拟内容区。在元件库中拖入一个图片元件放入内容区中央。图片元件可以直接拖入本地图片也可以用右侧样式检查器的“交互样式”调整边框圆角让图片更像真实卡片。给每个元件重命名形成清晰的图层结构。完成后按 F5 预览浏览器里会看到一个静态页面。这是 Axure 最基础的产出也是所有原型的第一步。要注意的是元件在预览时的尺寸和画布显示尺寸是一致的所以如果不确定最终呈现效果画布上就得按照真实设备宽度来排版。移动端页面通常直接以 375 x 667 的尺寸画这也是图文教程里最常出现的画布设置。3.2 固定背景滚动让底部导航常驻浏览器窗口“axure固定背景滚动”是超高频搜索词很多人在做移动端原型时希望页面能上下滚动但底部导航栏始终固定在屏幕底部不要跟随内容一起滚出视口。这个需求在 Axure 里的实现方式非常直接别去动动态面板而是用元件右键菜单。具体操作路径如下在页面底部拖一个矩形宽 375高 56填充主色作为底部导航栏。在导航栏上再放三个标签比如“首页”“分类”“我的”把它们放在同一水平线上。选中整个底部导航栏包括标签右键单击在弹出的菜单中选择“固定到浏览器窗口”。弹出对话框后水平位置选居中垂直位置选底部。确认勾选“在所有页面中固定”或“仅固定于当前页面”取决于你的需要。按 F5 预览拖动页面内容滚动底部导航会一直停留在屏幕底部。这个功能的核心参数是“位置”和“应用页面”如果预览时发现导航栏偏左或偏右回检查对话框里水平位置是否设为了居中。如果是桌面端网页原型通常还需要配合固定到浏览器的顶部菜单一起使用。另外固定元素和页面内其他普通元素的层级关系也容易乱如果出现滚动时固定导航被某个大色块盖住的情况优先检查被盖住元件是否在概要面板里处于更上层。3.3 元件对齐、分布与自适应视图避免出现歪歪扭扭的原型新手拖元件时习惯肉眼对齐在 375 宽的画布上可能看不出问题一旦放到手机里预览偏差会非常明显。Axure 自带的对齐工具能解决这个痛点。选中多个元件后顶部工具栏会出现横向分布、纵向分布、左对齐、居中对齐等按钮。我的做法是每放置一组同层级元件就选中它们先做一次水平居中再做一次等间距分布。这个习惯能让你后面对齐时的成本降到最低。自适应视图是另一个容易被忽略的点。默认情况下页面是单尺寸的但在做多端适配时可以为页面设置多个视口比如桌面端 1280平板 768移动端 375。在页面面板底部点击“自适应视图”入口添加视口后可以为每个视口单独微调元件位置。这个功能不是必须一上来就用但如果你的目标是做高保真图文教程建议至少在页面设置里确认默认的手机端视口宽度避免输出到 HTML 后比例异常。3.4 内联框架与 HTML 嵌入让外部页面进到原型里热词里“html转axure”经常被搜索大多数人其实想要的不是把 HTML 转换成 Axure 源文件而是把已经做好的网页嵌进原型里展示。Axure 的内联框架元件专门干这个事。从元件库拖入“内联框架”然后在右侧属性面板指定要加载的链接或本地 HTML 文件路径即可。常见用法有两种。第一种是引用线上页面比如把已经开发好的页面 URL 填进去原型里就能直接看到线上效果。第二种是引用本地 HTML 文件适合把可视化图表、地图组件等独立页面嵌进去。需要注意的是如果本地 HTML 文件里引用了 JS 外部资源预览时会受浏览器安全策略限制正常运行不了。所以最好把相关脚本打包到同目录下。这个技巧在输出完整产品演示时非常加分因为评审方不需要跳转新标签页就能在一个原型里看到完整业务流程。4. 动态面板与交互事件让图文原型真正“动”起来4.1 动态面板的工作原理状态机与事件驱动动态面板是 Axure 交互能力的核心理解它只需要抓住两个概念状态和事件。动态面板内部可以定义多个状态每个状态就是一个完整的界面内容同一时间只显示一个状态。事件则是用户操作比如单击、鼠标移入、双击、选中。用事件触发状态的切换就完成了交互。以 Tab 切换场景为例一个内容区域根据用户点击的 Tab 不同展示不同的内容这就是动态面板最典型的用法。你只需要把内容区域做成一个动态面板内部放三个状态再给三个 Tab 按钮配置不同的单击事件让它们把面板切换到对应的状态即可。动态面板还可以设置默认显示进入动画和退出动画比如淡入淡出、向左滑动。这些动画参数能让交互显得更自然但要注意动画时长控制在 200 到 400 毫秒之间时间太短显得生硬太长则让评审人员觉得拖沓。4.2 做一个完整的 Tab 切换交互附参数表假设你现在要做一个新闻类 App 的首页顶部有三个 Tab“推荐”“视频”“关注”点击不同 Tab 时内容区变化。操作步骤如下在画布上拖入三个按钮或矩形作为 Tab分别命名为“Tab_推荐”“Tab_视频”“Tab_关注”并排排列。在 Tab 下方拖入一个动态面板命名为“内容面板”调整好大小。双击动态面板在左侧状态列表中添加三个状态依次命名为“内容_推荐”“内容_视频”“内容_关注”。每个状态下拖入一张图片和一段文本用来区分不同内容。回到页面层选中“Tab_推荐”在右侧交互面板中添加“单击”事件。在事件配置中选择“设置面板状态”目标选择“内容面板”状态选择“内容_推荐”。为了让选中效果更明显再添加一个交互样式将当前 Tab 的文字颜色改为主色。最终的事件配置可以参考下面的表格触发元件事件类型动作目标元件参数Tab_推荐单击设置面板状态内容面板状态内容_推荐无动画Tab_视频单击设置面板状态内容面板状态内容_视频动画向右滑动Tab_关注单击设置面板状态内容面板状态内容_关注动画淡入淡出配置完成后F5 预览点击不同 Tab内容区就会切换。如果发现切换无效优先检查是不是交互事件加错了对象。新手经常把事件加在动态面板本身而不是 Tab 按钮上导致点击毫无反馈。另外动态面板内部如果有透明背景的占位矩形也会遮挡点击事件导致底部按钮点不到这个问题会在后面的避坑章节详细展开。4.3 变量与条件逻辑让原型具备“判断能力”动态面板解决了状态切换但要模拟真实的业务规则还需要变量和条件。比如登录功能用户输入了正确的账号密码跳转到主页面输入错误则提示错误信息。这不需要后端Axure 自己就能完成。先在顶部菜单中打开“全局变量”设置创建一个变量比如命名为“isLogin”初始值为 false。然后回到登录页面选中登录按钮添加“单击”事件在条件中设置如果文本框内容等于“admin”且另一个文本框内容等于“123456”则执行跳转并设置变量 isLogin 为 true否则设置一个提示文本为“账号或密码错误”。这里的重点是把条件判断分支写好Axure 支持 if / else if / else 三段逻辑足够覆盖绝大多数原型演示场景。变量不仅可以存布尔值也可以存字符串和数字比如在购物车场景里统计数量。做原型时不需要把变量名起得过于复杂用 user_name、cart_count 这种简单名字就够用。5. Axure 常见问题排查与避坑指南5.1 浏览器预览空白页面只有一片灰色现象在 Axure 里按下 F5 预览浏览器打开后页面空白没有任何内容。原因Axure 生成的原型会调用本地一些渲染脚本如果你用的是 Chrome 且没有安装对应的 Axure 插件部分浏览器版本会把生成内容拦截或拒绝加载。这个问题在 Chrome、Edge 上非常常见尤其是首次使用 Axure 时。解决前往 Chrome 网上应用店搜索“Axure RP Extension for Chrome”安装官方扩展然后刷新预览页面。安装之后一般不会再出现空白页。也可以直接用浏览器打开内部预览地址如果仍然空白检查是否有广告拦截插件把 localhost 请求拦掉了临时关闭后重试。5.2 动态面板状态切换了但内容还是不变现象点击 Tab内容没有按预期切换甚至完全无反应。原因大多数情况是给动态面板本身添加了交互而不是给按钮添加交互。另一种情况是动态面板状态里存在透明矩形点击事件被透明元件拦截了。解决在画布上选中触发交互的按钮元件确认交互事件是挂在按钮上的。如果动态面板内部确实需要占位元素把它的填充色设为透明并在概要面板里检查它是否在顶层。若顶层有透明遮挡右键选择“置于底层”。5.3 RP 11 保存的文件RP 9 打不开现象同事用 RP 11 改完文件发给你你用 RP 9 打开提示文件格式不兼容或直接报错。原因Axure 的 .rp 文件格式一直跟随版本升级高版本保存的文件不会向下兼容低版本。网络上的“安装即永久免费激活”之类的工具也救不了这个它改的是授权校验不是文件兼容性。解决团队内部统一版本没有商量余地。如果必须跨版本协作约定最终交付方式为导出 HTML 或者导出图片不直接传 .rp 源文件。已经存在的兼容问题没有任何官方降级导出方案不要浪费时间搜索不存在的功能。5.4 固定背景滚动不生效导航栏依然跟着页面跑现象设置“固定到浏览器窗口”后预览时导航栏还是跟随页面滚动没有固定在屏幕底部。原因最常见的情况是你固定的是一个组合元件但是组合内部元件各自设置了样式且在不同层级。另外有些版本中已经处于动态面板内部的元件不能单独固定到浏览器窗口需要把整体动态面板设置固定。解决先确认要固定的元件不在动态面板内部。如果它在组合中直接把组合作为整体右键设置固定。如果还不行在预览面板的“设备”设置里检查是否启用了移动端视口缩放手势有些缩放模式会干扰固定定位。5.5 激活密钥与授权别在来路不明的“破解版”上浪费时间现象网上到处是“Axure RP 9 破解版”“axure免费永久激活”“axure rp11免费密钥”的搜索结果点了下载安装后报毒或者用一段时间后提示授权密钥失效。原因这些所谓密钥和破解工具本质上修改了程序的授权验证逻辑一旦官方更新校验机制就集体失效。打包者往往在安装包里捆绑了其他程序这也是为什么很多下载站会被浏览器拦截。解决Axure 官方提供免费试用期个人学习完全够用。公司项目建议走正规采购渠道。如果你只是想把流程跑通直接用试用版配合这篇教程学一遍比折腾任何激活工具都节省时间。6. 进阶技巧用 Chrome 扩展验证交互细节把注释导出成图文教程原型做完后验证工作是真正拉开效率差距的环节。我自己的固定流程是先在 Axure 里按 F5 预览再用 Chrome 打开生成的本地 HTML 文件夹配合“Axure RP Extension for Chrome”跑一遍所有核心路径。这个扩展的价值不只是解决白屏它还能让你在浏览器里以真实设备尺寸检查交互距离和点击热区反馈。验证时我会刻意检查三类问题第一所有跳转目标页面是否正确第二动态面板在连续多次点击后状态是否依然稳定第三固定背景滚动在浏览器缩放时是否会出现错位。每次发现一个交互问题不要只改一次就完事把触发条件记在元件注释里后面统一复查。说到注释Axure 自带的注释功能非常值得善用。选中任意元件在右侧面板的“注释”栏里写下这个元件的行为说明和需求备注比如“点击后跳转详情页参数 id3”。当整个原型完成后通过文件菜单里的导出功能可以把这些注释连同页面截图生成 Word 文档也就是类似“Axure图文详细教程.doc”的产物。这样交付给开发或测试的文档就不需要再手动截图一个个贴了原型本身就是图注释本身就是文。把这套流程固化成自己的习惯之后你会发现从原型设计到交付文档的时间几乎缩短了一半。我的血泪经验是不要在演示前一晚才补注释而是每完成一个模块就顺手把关键交互和边界条件写进去。这样导出的图文教程既完整又真实新人照着原型就能独立理解业务逻辑。希望这个工作流能帮你少走弯路做出真正能落地的 Axure 原型产品。本文还有配套的精品资源点击获取