简介《Axure教程[汇编].pdf》是一份面向产品经理、UI/UX 设计师及软件开发人员的 Axure RP Pro 原型设计实战指南内容结构完整从基础操作到高级交互循序渐进。教程从新建项目、拖拽组件、编辑属性等基本操作讲起逐步覆盖组件位置与尺寸精确调整、对齐工具、交互事件设置及动态面板应用并结合 SNS 社区首页原型制作详细拆解了页面头部、Logo、登录框、网站介绍、快速注册等元素的设计过程。作者在步骤中穿插了大量个人经验 Tips如使用快捷键 CtrlL 调用编辑位置和大小、复制组件保持对齐、中文输入异常时的处理方式等能直接提升实际工作效率。资源为单个 PDF 文件共 1 个文件压缩包大小 5.57MB便于离线阅读与检索。目前已有 484 人学习下载适合希望快速上手 Axure RP Pro 的初学者也适合需要梳理交互设计细节的进阶读者。1. 拿到这份《Axure教程[汇编].pdf》它是老版本实操记录但组件逻辑到今天还能用第一次拿到这份《Axure教程[汇编].pdf》是给组里新人做原型入门训练的时候。PDF 不厚通篇就干一件事照着一个 SNS 社区的未登录首页从头部矩形一路做到发布 HTML。它没有讲 Axure 有多少功能菜单而是告诉你一个真实页面是怎么被一步步拖出来的。这种「跟着做完一整个页面」的资料比功能清单有用得多。教程主场景用的是 RP Pro 老版本界面跟现在的 Axure RP 9、RP 11 有差异但矩形、文本框、动态面板、交互事件这套核心对象和逻辑今天依然是同一个骨架。适合刚上手想快速产出页面原型的人也适合老手想补齐对齐、母版、菜单这类基础细节。它解决的不是「Axure 怎么装」而是「一个可评审、可点击、有交互逻辑的原型文档怎么做出来」。2. 组件与画布坐标系把「拖矩形」变成像素级精确排版2.1 先从矩形开始页面骨架为什么用它打底Axure 里最容易被低估的组件是 Rectangle矩形。教程里做 Header第一步不是画 logo也不是摆输入框而是先拖一个矩形出来把位置定在画布左上角left: 0, right: 0宽高拉到 850 × 80边框设为无色背景填深蓝。这一步的意义在于矩形是原型里最稳定的「底」它既能当色块也能当容器。后来的复选框、文字、按钮全都以它为对齐参照。这个矩形的工作区信息栏里会实时显示四个数值left、right、width、height单位是像素。早期版本里信息栏只有这一行现在 RP 9 里位置和尺寸在 Style 面板也能看到但画布顶上的快捷数值栏依然在。我一般会养成一个习惯组件丢上画布后第一眼先看左上角的位置值别凭感觉「感觉放得差不多了」。原型越到后期评审越会在意像素级对齐尤其当你要把原型文档直接交给 UI 做视觉稿时一个偏了 2px 的输入框都会被问。精确改位置和尺寸教程给出的是右键菜单里的Edit Location and Size快捷键CtrlL。调出后可以一次性把 X、Y、Width、Height 四个值都锁定。这里有个细节值得注意直接用鼠标拖矩形宽高数值是「视觉上大概齐」用CtrlL改才是精确值。对有点像素强迫症的人这个弹窗就是后悔药每次输完按 Tab 切换输入框能明显感觉到数值在联动的节奏。常见属性修改位置汇总要改的东西入口老版本快捷键位置与尺寸右键 → Edit Location and SizeCtrlL边框颜色/粗细公共栏Toolbar样式区无默认快捷键填充背景色公共栏填充色块无默认快捷键组件名称右侧 Annotations Interactions → Label双击组件名也可以改公共栏里还能直接改矩形填充色和边框色Header 的深蓝底色就是这么来的。边框设成 None无色之后矩形就变成一个纯色块这是最常见的信息区做法。做原型不像做视觉稿不需要每个矩形都加描边描边一多整个页面会显得脏。2.2 对齐逻辑基准是第一个被选中的组件登录框那一节教程里有一段特别容易被忽略的话多选组件执行对齐时是以第一个被选中的组件为基准其余组件都向它看齐。这句话翻译成人话就是——你想让谁不动就先点谁。举例来说页面上现在有登录按钮、密码输入框、电子邮件输入框三个组件它们上下错落。对齐步骤是鼠标先单击「登录」按钮此时它处于选中态按住 Ctrl 继续单击「密码」和「电子邮件」这时候三个组件都被选中了再在公共栏里点「向下对齐」结果是三个组件的下边线都对齐到登录按钮的下边线而不是取中间值或对齐到最后一个组件。这个特性从 RP Pro 5.0 一直保持到 RP 11属于用了十年都不会变的交互逻辑。很多人对齐翻车不是因为不知道对齐按钮在哪而是基准选错了。多选时鼠标拖选也是一种选法但教程提醒拖选会把附近不想被选中的组件一起框进去。解决办法是先锁定附近不动的组件或者干脆用 Ctrl 逐个加选宁可点四次鼠标也别拖一次选错一片。对齐还分上对齐、下对齐、左对齐、右对齐、水平居中、垂直居中六种。做表单时最常用的组合是先对一组输入框做左对齐再对按钮做垂直居中。教程里登录框的处理方法是先选中按钮再加选两个文本框然后做向下对齐——这样做比分别调 Y 坐标快得多而且不会出现「文本框挨着按钮、按钮比文本框矮半截」的尴尬。2.3 复制的两种用法文本框变密码框矩形变垫底页面下半部分的网站介绍区需要一块新的底色区域教程的做法不是重新拖一个矩形再设置宽高而是按住 Ctrl 键从上方 Header 的底色矩形处直接拖出一个副本。复制出来的矩形继承了原宽高、底色、边框样式只需要改位置和背景色然后把它的层级设为最底层这样之前的 Header 和登录框就不会被它盖住。层级操作在右键菜单的 Arrange排列里老版本叫 Bring to Back / Send to BackRP 11 里是 Bring to Front / Send to Back 的图标按钮。这个「复制改属性」的思路值得专门学一下。做原型最费时间的不是画组件而是重复设置样式。Header 矩形既然已经把宽度、圆角、颜色基调都定好了复制一份再改色节约的是重新拖拽、重新输入宽高的时间。登录框里把「电子邮件」文本框复制成「密码」文本框用的也是同一招先选中文本框按住 Ctrl 拖动松开后改里面的文字。复制时有一个交互坑改变过插入图片时如果工作区预设的图像大小和图片原尺寸不一致Axure 会弹一个确认框。选「是」表示保留图片原尺寸图片会以真实比例展示显示质量最好但可能把布局撑乱选「否」表示按你预设的框来放图片可能被拉伸变形。碰到这个提示我的判断标准是如果图片是临时占位选「否」更省事因为页面结构不会变如果图片是最终素材选「是」然后手动调整放置位置。3. 交互事件与动态面板复现关键字匹配的查询建议3.1 交互事件不是什么高深东西就是「用户做了什么原型回应什么」表单组件摆上页面之后原型开始变得有价值的地方在于它能对用户的操作做出反应。Axure 里这个机制叫 Interactions交互老版本也叫 Events。教程明确列了四个最常用的事件OnClick点击时触发按钮跳转页面、弹窗显示都用它。OnKeyUp键盘按键抬起时触发最典型的场景就是搜索框边打字边出建议。OnFocus组件获得焦点时触发比如点击输入框后边框变色。OnLostFocus组件失去焦点时触发比如输入框内容校验后提示格式不对。添加方式不复杂选中工作区里的组件在右侧 Interactions 面板点 Add Case添加用例然后选触发事件再配置动作。RP 9 之后的事件面板变成了 Case 列表形式每次添加都会生成一条记录可以单独命名和调整顺序。这里要理解一个底层逻辑Axure 的交互最终会转换成浏览器里的事件监听。你在 Axure 里画的每一个 OnKeyUp 用例导出成 HTML 后本质就是一个 JavaScript 事件绑定。所以做原型交互时心里可以自带一个等式——Axure 的 Case 等于浏览器里的 addEventListener。这么想之后很多交互设计上的取舍会变得清晰能让用户少敲一次键盘的交互就值得做一个页面事件超过二十个就该考虑交互逻辑是不是太重了。3.2 动态面板三状态空状态、状态一、状态二教程里的「关键字匹配」实例模拟的是搜索框边输入边出现建议列表的效果。做法是先在 Text Field 下方拖一个 Dynamic Panel动态面板命名为matching然后为它设置三个状态State。第一个状态是空内容用于初始状态第二个状态放一个 List Box选择框里面预置几个姓「李」的好友名字第三个状态再放一个选择框预置的是叫「李查」那批好友。进入动态面板编辑的方法是双击面板组件在编辑界面底部能看到状态标签。给两个列表分别命名为matchingList1和matchingList2才是关键的标识动作否则后面写交互时引用哪个状态会分不清。命名规范这个习惯在老版本里就被人反复强调到了 RP 11 反而容易被忽略——反正有图层面板撑着但交互 Case 多了之后名字不写清楚自己都找不到哪个状态对应哪个 Case。关于 List Box选择框有一个细节坑属性里有个Allow multiple允许多选选项做查询建议下拉列表时一定不要勾选。勾选后列表会从单选变多选用户每次点击都会累计选中项视觉上完全不是建议列表该有的样子。Axure 里下拉菜单用 Droplist查询建议这种展开列表用 List Box两者交互形态不同组件也要用对。动态面板在编辑状态下边缘会显示一条蓝色虚线——那是面板预设的显示区域大小。超出蓝色虚线的组件内容在页面预览里是看不到的。教程里的建议列表如果做长了哪怕列表里有二十个人名超出虚线框的那一部分也不会显示出来。所以动态面板尺寸是跟着内容走的不是随便拉一个框就完事。3.3 OnKeyUp 绑定输入「李」显示状态一输入「李查」显示状态二交互的核心动作是为keyword文本框添加 OnKeyUp 事件输入内容变化时控制matching动态面板切换到对应状态。Axure 里操作是选中文本框 → Interactions 面板 → Add Case → 触发条件选 OnKeyUp → 动作里选 Set Panel State设置面板状态→ 指定matching面板切到matching1。第二个 Case 同理输入内容匹配「李查」时切到matching2。这个交互逻辑如果用浏览器里的等价代码来表达大概是这样input idkeyword typetext placeholder输入关键字查找好友 onkeyupmatch(this.value) div idmatching select idmatchingList1 styledisplay:none option李雷/option option李梅/option option李涛/option /select select idmatchingList2 styledisplay:none option李查德/option option李查理/option /select /div script function match(value) { var list1 document.getElementById(matchingList1); var list2 document.getElementById(matchingList2); // 输入以“李”开头、又不是“李查”开头时显示第一组建议 list1.style.display (value.indexOf(李) 0 value.indexOf(李查) ! 0) ? block : none; // 输入以“李查”开头时显示第二组建议 list2.style.display (value.indexOf(李查) 0) ? block : none; } /script这段代码里indexOf(李) 0判断的是输入内容是不是以「李」字开头indexOf(李查) ! 0排除掉已经进入「李查」分支的情况。显示/隐藏用display: none/block控制。Axure 动态面板的 Set Panel State 本质上就是在做同一件事——根据条件切换显示区块。写交互 Case 的时候判断条件不会像代码里这样精细。老版本 RP Pro 的 Case 编辑器只支持比较简单的条件组合比如「Text on widget 包含 李」这类内置判定函数。到了 RP 9 之后条件编辑器增强了不少也已经可以写更复杂的组合逻辑。这里有一个实践经验教程里的关键字匹配做了状态一和状态二但实际交付原型时我通常会在前面加一条「无匹配」状态也就是输入内容不含「李」时建议列表隐藏或显示「无结果」。这样评审人员演示时不会出现输了个「X」结果列表还挂着上一组建议的诡异场面。动态面板三状态的容错性比两状态高不少。4. Masters 与菜单体系用通用模块把重复页面收进一处4.1 通用模块 Masterfooter 改一处全站页面跟着变教程做完首页后发现底部的网站信息和链接区域在所有页面里都要出现。与其复制粘贴不如建一个通用模块。Axure 老版本里这个功能叫 Masters通用模块新版 RP 9 之后改叫 Masters 的英文本名中文版翻译成「母版」或「主版」。创建方式是在页面管理栏找到 Masters 分类右键新增命名为footer然后双击进入母版编辑页把 Home 页里 footer 的内容整体剪贴进去。剪贴完成后再把这个footer母版拖回 Home 页相应位置。母版的价值在于后续修改如果公司地址、底部链接内容变了只需要在母版里改一次所有引用了这个母版的页面都会同步更新。没有母版时你面对的是十几个页面逐个改底部的灾难场景。我见过新人把同一段底部信息连续粘贴了五个页面第五个页面做完后发现首页改了个链接于是又从头把五个页面重新过一遍——典型的血泪经验。母版在原型阶段就帮你踩住了这个坑。母版放回页面后默认是可编辑的你也可以在母版属性里把它设为「锁定」让引用它的页面无法单独改动内部组件。做高保真原型时我一般会把 header 和 footer 都设为锁定母版防止评审过程中有人悄悄把某个页面的页脚字体改成了 16px最后视觉走查时又说不清是谁改的。4.2 Menu 菜单宽度联动与样式翻转的记忆点Axure 的菜单组件有两种方向Vertical 垂直菜单和 Horizontal 水平菜单。拖出来之后默认带三个一级菜单项想加选项右击已有项菜单里会同时出现「增加同级菜单项」和「增加下级子菜单」两个操作。这个右键菜单的层级和无序列表的概念很像一级项下面挂二级子菜单二级下还能再挂可以无限嵌套。有两条使用细节特别容易被忽略。第一条按 Tab 键不会新增菜单项Tab 只是让焦点在已有菜单项之间浮动。想加菜单项只能靠右键操作。第二条菜单宽度有一套自己的「玄学」规则——新加的菜单项宽度会继承被操作项的宽度修改其中任意一项的宽度整个菜单所有项的宽度都会被联动修改拉长或缩短整个菜单组件时只有最后一项的宽度被改变。也就是说菜单总宽度是由各个一级菜单项的宽度加总决定的你想把菜单整体拉宽但不改变每一项的宽度分配基本做不到系统一定会把增量算到最后一级项上。针对这两条我的实际操作习惯是先往菜单里加完所有项最后统一修改每一项的宽度值而不是拖整个菜单边框。因为拖整体边框只改最后一项结果就是前面几项挤得紧凑最后一项异常宽丑到没法看。要改就选中每一项在 Style 面板里把 Width 值逐一输入这样总宽度才会按你的预估值平均分布。菜单的悬停效果用 Rollover Style翻转样式来做。右击某个菜单项选 Edit Rollover Style可以设置鼠标移上去时的背景色、文字颜色等变化参数。弹出框里有一个 Apply to 作用域的选择This menu item only只影响当前项This menu only影响所有同级菜单项This menu and all submenus则覆盖所有级联菜单。常见用法是给一级菜单的所有项做统一 hover 底色给当前选中项再做一次单独的强调样式所以这个作用域选项几乎每次都会用到。4.3 Quick Link 快速链接从菜单跳转到页面地图菜单做好之后要给「首页」这个菜单项挂上链接。操作是选中菜单里的「首页」项在 Interactions 面板找到 Quick Link快捷链接打开 Link Properties 对话框。这里能看到四种链接目标Link to a page in this site跳转到页面地图中的指定页、Link to an external url or file外部链接或文件、Reload current page重新加载当前页、Back to previous page返回上一页。页面地图里其实不止有最终交付的页面还包括你在绘制过程中产生的临时草稿页。建议给菜单项挂链接时先确认目标页面在页面管理栏里的命名避免链接指向了同名但内容废弃的旧页面。跳转到当前页面时不会有任何可见变化所以「Reload current page」这种选项在实际评审里很少用「Back to previous page」倒是常出现在多步骤流程原型里。Quick Link 是最轻量级的链接方式它只做页面跳转不做参数传递。如果要做带逻辑的分支跳转比如点击按钮后先判断勾选框状态再决定去哪个页面就不能用 Quick Link得在按钮的 OnClick Case 里写条件判断。区分这两种用法能帮你判断原型在什么阶段该用哪种链接方式——早期草稿用 Quick Link 足够进入高保真阶段后逐步替换成语义化的条件跳转。5. 避坑清单五个我在照着教程做时翻过的车5.1 表单组件中文输入乱码老版本的遗传病现象在文本输入框、按钮上直接输入中文显示出来是乱码或直接没反应。原因RP Pro 5.0 及更早的版本表单组件的中文输入兼容性有问题官方在后续版本才修复。现在用 RP 9/11 基本遇不到但老教程读者如果用的是老版本安装包该踩还是踩。解决从记事本或 Word 里把中文内容打出来复制粘贴进 Axure 组件里这是当年最通用的临时方案。放到现在的版本里这条规律可以扩展成长文案优先在外部编辑再粘贴因为 Axure 的中文输入法兼容性虽然好了但偶尔还是会在快速输入时丢字。5.2 对齐总是对不齐基准组件选错了现象明明点了对齐按钮几个组件反而往错误的一侧移动看起来比之前更乱。原因Axure 的对齐基准是第一个选中的组件。很多人是拖选全部组件再点对齐基准随机系统按「第一个被框住的对象」为基准对完自然不对。解决先单击基准组件它被选中后保持不动再按住 Ctrl 依次加选其余组件最后执行对齐。如果附近有干扰组件先把它们 Group 起来或直接在图层面板里把目标组件的选中状态区分开避免拖选误伤。5.3 插入的图片被拉变形尺寸提示选错了「是」和「否」现象双击图片导入后图片明显被横向或纵向拉扯视觉上比例失衡。原因工作区里预设的图片框尺寸和图片原始尺寸不一致弹窗提问时你选了「否」系统按框的预设尺寸放置不管原图的真实比例。解决需要保证图片显示质量的场景选「是」让 Axure 按原尺寸放置然后手动调整图片框位置对占位图可以选「否」但不建议对最终素材这么干。更稳妥的做法是先把图片在外部工具里裁成目标尺寸再导入Axure 内拉伸过的图片在视觉稿阶段很容易被 UI 质疑。5.4 菜单宽度越改越乱联动机制没搞清楚现象改了一个菜单项的宽度发现其他菜单项全跟着变了拖动整个菜单想加宽只有最后一项被拉长。原因Axure 菜单的总宽度由各级菜单项宽度累加决定修改单个项会触发全局同步拖整体组件改变的只是尾项的宽度。解决加完菜单项后统一改宽度每项手动输入 Width 值需要整体加宽时先计算好每个项要增加多少然后分批输入。如果菜单项特别多可以考虑不调整体组件宽度只调字体大小和项内边距间接改变视觉宽度效果更可控。5.5 动态面板内容「不见了」蓝色虚线边框之外的东西不显示现象在动态面板的某个状态里摆了很多内容预览时只显示了一部分其他内容凭空消失。原因动态面板的显示区域等于编辑状态下的蓝色虚线框超出虚线框的下级组件在页面上不渲染。这个黑匣子坑了不少人。解决进入状态编辑后先观察蓝色虚线框的范围把超出部分的内容拖回虚线框内或者直接在编辑时先把面板尺寸拉大再做排版。做查询建议列表时建议先确认建议列表最多会显示几行再决定面板的高度面板高度留得太小列表内容会被截断。6. 发布与验证让 .rp 文件变成能评审交付的 HTML 原型6.1 发布方式的取舍HTML、Word、CSV 各自用在哪教程里明确提到Axure 工程文件.rp只能由 Axure 软件打开交付给评审人员时不能直接丢一个.rp文件过去。Axure 老版本提供至少六种发布/导出方式整理下来是这样的发布方式产出物适合场景Print 打印纸稿或 PDF开会时的书面附件Image 图像PNG/JPG 图片单页静态展示HTML 生成完整网页原型交互演示、远程评审、移动端预览Word 2000/2007文档格式带注释内容的存档CSV表格数据结构化信息导出实操中最常用的是 HTML 生成它是唯一能完整体现动态面板切换、菜单 Rollover、页面跳转的发布方式。图片格式只能展示静态视觉效果交互逻辑完全丢失。Word 导出适合在原型定稿后把注释和页面说明一并归档CSV 很少用一般只用来导出结构化字段做数据核对。6.2 生成后的完整点检流程发布 HTML 的入口在 File → Generate → HTML老版本里也写作 Generate HTML。生成后是一个独立目录典型结构如下项目根目录/ ├── preview.html # 原型入口文件浏览器打开这一个文件 ├── data/ # 页面结构数据 └── resources/ # 运行时脚本与样式库这份目录结构说明两点一是交付时要把整个目录一起打包单独拷一个preview.html打开会白屏因为页面引用了data和resources里的资源文件二是把目录部署到内网服务器后远程的人通过浏览器 URL 就能打开原型这是评审阶段效率最高的方式。HTML 打开后我一般按下面的顺序做一轮点检页面头部Header 底色是否正确显示Logo 图片有没有被拉伸变形。文本框交互在关键字输入框里键入「李」看动态面板是否切到第一条建议列表输入完整「李查」开头的内容看是否切到第二条列表。菜单与悬停鼠标移到菜单项上时是否存在 Rollover 样式变化点击「首页」菜单项看页面是否跳转到 Home 页。母版复用如果新建了一个空白页并拖入了footer母版检查该页页脚是否和首页完全一致。用浏览器做验证这一步很多人会跳过理由是「Axure 里预览过就行了」。事实证明 Axure 内置预览和导出后的实际渲染有细微差异尤其是中文兼容性和动态面板的滚动条处理导出后偶尔会出现异常。从那以后我每次交付原型前都强制走一遍这个浏览器点检流程哪怕只有五个页面也要把每个交互 Case 触发一遍。这套习惯帮我挡掉了不少评审现场翻车的尴尬希望帮到你。本文还有配套的精品资源点击获取