简介《Axure RP 9 使用详解》面向产品经理、交互设计师及原型设计初学者针对只会基础绘图、备注堆叠导致原型难以向客户演示的问题帮助读者系统掌握可交互、可交付的专业原型制作方法。资源为1个docx文档压缩包约2.54MB以图文说明形式组织内容便于按目录检索和分模块查阅。目前已有6582人学习。文档围绕工具栏、元件样式与部件库、页面命名、下拉列表与文本框、多选框、悬浮说明、内链框架、菜单、热区、动态面板、内联框架交互、右键效果、函数、外显批注和取色工具等展开并说明演示文件生成流程读者可据此补齐交互细节、理清原型结构提升客户演示与团队协作中的表达质量适合作为系统学习与查漏补缺的参考。1. 从「画图工具」到「可演示原型」客户现场那 5 分钟决定这套方案值不值某次投标演示对面评审只给了五分钟。打开那份 Axure RP 9 使用详解 里攒了半个月的线框稿二十几个页面全是灰块加密密麻麻的批注客户翻了两页就低头看手机。问题不在设计能力而在这套原型只会「画」不会「演」。这份 Axure RP 9 使用详解 要解决的正是这件事把工具栏、元件库、动态面板、内联框架、函数表达式和演示文件生成串成一条能走完的流程让原型从静态草图变成能点、能跳、能切换的可演示文件。它适合三类人正在做产品方向毕设或课程设计的学生、需要向客户交付原型的产品岗新人、以及想把交互说明讲清楚的开发转设计的人。下面按页面与工具、控件布局、交互实现、避坑排查、验收交付的顺序把这套流程拆成能照着做的步骤。2. 页面与工具的基础盘三层工作区与元件属性的职责划分原型做到后期变乱绝大多数时候不是因为交互复杂而是因为找不到东西页面叫「页面1」母版叫「Master2」按钮叫「矩形3」改一个样式要翻半个小时。Axure RP 9 的工作区其实是三层结构——左侧的页面树管结构中间的画布管视觉右侧的检查器管行为三层各司其职谁越界谁就会制造混乱。这一章先把这三层的使用规矩立起来后面所有控件和交互都建立在这个基础上。2.1 页面树、母版与画布的命名约定页面树Pages决定原型的骨架。演示时客户看到的导航顺序本质上就是页面树从上到下的顺序所以命名不能随手来。我一般用「序号_模块_页面」三段式序号控制在两位数中间留出十位数的空档方便后期插页面而不必全部重命名。层级命名模板示例作用与注意事项根目录00_公共00_公共登录、注册、提示页、空白页统一放这里模块目录10_订单管理10_订单管理一个业务模块一个目录编号间隔 10页面10-01_订单列表10-01_订单列表序号即演示顺序避免出现「页面12」母版m_用途m_顶部导航m_ 前缀一眼区分母版和页面元件类型_含义btn_提交交互面板里按名字找目标命名即文档母版Masters的用法要想清楚再动手。顶部导航、侧边菜单、页脚这类全站复用的块做成全局母版弹窗、提示条、卡片这类局部复用的做成普通母版。母版拖进页面后成为「实例」实例上改文字和图片没问题但改样式和交互时要留意——母版一旦更新实例上被本地覆盖过的属性是保留还是回滚跟覆盖方式有关改之前先在测试页上试一次别在主流程页上直接动刀。画布Canvas上还有一个容易被忽略的物件参考线。划出 1200 宽的内容区边界和 24 像素的栅格间距所有页面都在这条线上对齐生成出来的演示文件翻页时就不会出现内容左右抖动。这套规矩看着啰嗦但它是「拿得出手」和「拿不出手」的分水岭。提示命名改得勤不如一开始就定规矩。新建文件后先花十分钟把页面树骨架搭好比后期改一百个元件名省事得多。2.2 元件样式、图标与交互属性三件套Axure RP 9 里任何一个元件都挂着三组属性右侧检查器面板把它们分得很清楚样式Style管长相包括填充、边框、圆角、字体、阴影、透明度属性Properties管数据和文字内容比如下拉列表的选项列表、文本框的提示语、表格的行列数交互Interactions管行为也就是点击、悬停、载入时发生什么。新手最容易犯的错是把三件事混在一起——用改样式的方式去做状态切换用堆元件的方式去做选项列表结果一个按钮复制出五份改颜色要改五遍。属性组典型选项常见取值影响范围样式填充、边框、圆角、字体、阴影主色填充、1px 描边、4px 圆角只影响外观不影响逻辑位置尺寸X、Y、宽、高、旋转相对画布左上角定位影响布局与对齐元件属性提示文字、默认值、列表项、多选开关由元件类型决定影响元件的初始状态交互单击、鼠标移入、载入时、右键菜单显示/隐藏、设置面板状态、打开链接决定原型的可演示程度说明批注、交互说明、注释图形写给开发看的文字交付时最重要演示时看不见图标在 Axure 9 里有两套来源元件库自带的图标库以及直接把图标字体当文本用。前者省事后者灵活但要注意字体文件是否随生成文件一起走。图标大小统一控制在 16、20、24 三档别出现 17.5 这种数字对不齐的时候会非常难受。交互属性这一栏真正高频的只有四五个动作显示/隐藏、设置面板状态、打开链接、设置文本、设置选中。把这五个动作练熟能覆盖原型里八成以上的演示需求剩下的复杂逻辑再交给函数表达式。2.3 取色工具与样式复用让原型不像拼贴画取色工具吸管在顶部工具栏里作用是把界面上任意一点的颜色吸出来复用。很多人拿它当临时救火工具看到哪里颜色不对吸一下结果一个文件里出现七八种蓝色演示时一眼就能看出是拼起来的。正确的顺序是反过来的先定色板再画页面色板之外的颜色一律不准出现。颜色变量名色值用途使用位置c-primary#1F6FEB主按钮、导航选中态、链接全局样式c-primary-pressed#1A5FD0按钮按下态按钮选中样式c-text-1#1B1F24标题、主要文字全局c-text-2#6B7280次要说明、占位提示表单c-border#D0D7DE分割线、输入框描边全局c-danger#D1242F错误提示、必填星号表单校验c-bg#F6F8FA页面底色、卡片底色内容区色板定好之后写进样式管理器把按钮、输入框、标题、正文分别存成默认样式。之后新建元件直接用样式套改配色时只改样式定义全文件同步更新。这一步做完原型的「专业感」会有一个肉眼可见的跳变——不是因为设计水平提高了而是因为视觉终于一致了。3. 控件与布局落地从下拉列表到菜单导航的搭建方法控件这一层是原型的血肉。客户在演示现场点得最多的是表单和导航而不是花哨的动效所以这一章把下拉列表、多选框、文本框、菜单、热区这几类高频控件逐个拆开说清楚每个控件的属性怎么设、交互挂在哪里、失败时先看什么。掌握这五类一个中等复杂度的业务原型基本就够用了。3.1 下拉列表与多选下拉框选项状态与选中回显Axure RP 9 的下拉列表Droplist元件选项不在画布上编辑而是在右侧属性面板的列表项编辑器里逐行添加支持设置默认选中项。这一点跟很多人习惯的「画一堆矩形叠起来」完全不同用原生元件的好处是演示时点开是真的下拉展开而不是一个静态图。多选场景要分两种做法。选项数量少、样式要求高的用复选框Checkbox竖排拼一个下拉面板外层放一个动态面板两个状态分别是「收起」和「展开」点标题栏切换状态展开态里摆一排复选框。选项数量多、需要滚动条的直接用列表框List Box元件在属性里打开多选开关演示时按住就能连选。编号触发元件事件动作目标预期结果C-01ddl_城市选择改变时设置文本lbl_城市回显显示当前选中城市C-02lb_兴趣选择改变时设置文本lbl_已选数量显示已选条目数C-03btn_清空单击设置选中 → 假全部复选框所有选项回到未选C-04ddl_省份选择改变时设置面板状态dp_城市区切换到对应城市列表回显和计数这两类需求靠「设置文本」加函数表达式就能完成不用写脚本。表达式写在设置文本动作的 fx 入口里用双中括号包住LVAR1 这类局部变量指向你选中的元件。数量统计这种需求直接在表达式里读元件的已选项数量即可。3.2 文本框默认值、提示语与提交校验文本框Text Field在属性面板里有几个必须配的项提示文字Hint Text写「请输入手机号」这类占位语默认值写预填内容最大长度限制输入字符数密码类型把输入变成圆点。提示文字和默认值的区别要分清——提示文字在输入后自动消失默认值是真实内容演示时客户一删就没了两者用错会显得很不专业。校验逻辑挂在提交按钮的单击事件上动作选「设置文本」目标选错误提示标签值用表达式算。下面这段是登录表单的典型校验先判空、再判长度、最后判格式三层判断一条表达式写完// 位置btn_登录 → 单击 → 设置文本 → lbl_错误提示 // LVAR1 指向 txt_密码LVAR2 指向 txt_账号 // 返回值是字符串空字符串表示校验通过提示标签自然不显示 [[ if (LVAR1.text ) 请输入密码 else if (LVAR1.text.length 6) 密码长度不能少于 6 位 else if (LVAR2.text.indexOf() 0) 账号需为邮箱格式 else ]]表达式里的.text取元件当前文本.length取字符长度indexOf判断是否包含某字符这几个是最常用的字符串处理。注意判断顺序不能乱先判空再判长度否则空值直接进长度判断会得到 0提示语就变成了「密码长度不能少于 6 位」客户一看就知道你没测过。校验通过之后再加一条「显示」动作把成功提示或下一步按钮露出来形成完整的正向反馈。3.3 水平菜单与垂直菜单选中态的三种实现路径导航菜单看着简单做法却有三条完全不同的路选错了后期改起来很痛苦。第一种是多矩形拼装每个菜单项一个矩形或文本标签点击时把当前项设为选中、其余项取消选中靠选中样式换颜色。优点是轻缺点是菜单项一多交互要挂十几条。第二种是动态面板多状态整个内容区做成一个多状态面板菜单项点击时切换到对应状态视觉上是局部刷新。优点是切换流畅、动画自然缺点是一个页面里塞了所有内容文件会变重。第三种是母版加多页面菜单做成母版每个功能一个独立页面点击走页面跳转。优点是结构清晰、便于分工缺点是每次跳转整页刷新演示时会有短暂白屏。实现路径适用场景页面数量维护成本演示观感多矩形拼装单页演示、菜单项少于 6 个1低有选中态内容不变动态面板多状态内容区整体切换、需要动画1中最接近真实产品母版加多页面多模块、多人协作、正式交付多低母版统一改整页刷新选中态本身靠两样东西元件的「选中」状态以及交互样式里给选中态单独配色。点击菜单项时先对所有同级菜单项执行「设置选中 → 假」再对自己执行「设置选中 → 真」这一步漏了就会出现多个菜单同时高亮的尴尬场面。3.4 热区与显示顺序不规则点击区与层叠管理热区Hot Spot是一块透明的点击区域专门解决两类问题形状不规则的按钮比如圆形图标、异形卡片以及图片上的局部点击比如地图上的省份。做法是把热区盖在目标图形上方尺寸略小于图形交互挂热区而不是图形本身。显示顺序置顶/置底是层级管理的开关右键菜单里就能调。原型里常见的层级从下到上是背景图、内容区、悬浮提示、遮罩与弹窗、热区。热区放最上层要特别小心透明不等于不拦截点击一块盖住按钮的热区会让按钮彻底点不动——这类问题在演示现场才暴露属于典型的翻车现场。层级内容类型顺序建议常见错误0背景图、页面底色置底背景盖住内容1内容区、卡片、列表默认—2悬浮提示、tooltip上移一层被卡片遮住3遮罩、弹窗、右键菜单置顶被热区拦截4热区紧贴目标元件上层盖住按钮导致点不动判断层级对不对最快的办法是打开大纲Outline面板从上往下看一遍顺序再逐个点一遍。演示前把这一遍走完能省掉现场一半的尴尬。4. 交互与动态面板让原型真正动起来的四类交互静态页面谁都会画交互才是 Axure RP 9 的分水岭。这一章的四类交互——动态面板、内联框架、右键菜单与悬浮说明、函数表达式——覆盖了原型里绝大多数「看起来像真的」的效果。每一类都按「元件怎么建、事件挂哪里、参数怎么填、出问题先看什么」的顺序讲照着做能直接复现。4.1 动态面板状态切换、滑动与自适应动态面板Dynamic Panel是 Axure 交互的核心机制本质是一个容器里装着若干个状态同一时刻只显示一个。折叠展开、选项卡、轮播、步骤条、弹窗全靠它。建法有两种先画好内容再右键「转换为动态面板」或者从元件库直接拖一个空面板出来往里填。前者适合已有设计稿后者适合从零搭。折叠展开是最小可用的例子。面板建两个状态State1 放收起态的标题栏State2 放展开态的完整内容点击标题栏执行「设置面板状态」目标选自己状态选「下一状态」动画选「向下滑动」时长 300 毫秒。加一个循环开关两个状态就能来回切。面板名状态内容触发事件动画与时长dp_订单详情State1_收起单行摘要单击标题栏向下滑动 300msdp_订单详情State2_展开明细表格单击标题栏向上滑动 300msdp_选项卡State1~4四块内容区单击对应标签向左滑动 200msdp_弹窗State1_隐藏空单击「编辑」淡入 150msdp_弹窗State2_显示表单弹窗单击「关闭」淡出 150ms滑动方向要成对配展开用向下滑动收起就用向上滑动两个都用同方向会出现内容「弹回去」的怪现象。自适应方面面板尺寸固定时内容超出会被裁切需要提前把面板高度调到最大内容的高度再靠显示区域控制可见部分这一条在长表单和长列表里特别容易踩。4.2 内联框架与页面内链局部刷新和命名对齐内联框架Inline Frame的作用是在当前页面里嵌一个子页面做出「局部刷新、外层不动」的效果。典型用法是左侧导航固定、右侧内容区跟着菜单变或者顶部栏不变、下面切模块。用它的关键不在拖控件而在命名对齐框架本身要有一个唯一名字比如 iframe_内容区所有指向它的链接都要选这个目标框架名字错一个字符就是一片空白。内链Internal Link指向的是本文件里的页面外链指向网址。原型阶段一律用内链别指向本地文件路径——生成 HTML 之后目录结构会变本地绝对路径十有八九失效客户打开就是白屏。编号触发元件事件动作目标说明F-01menu_订单列表单击在框架中打开链接iframe_内容区 → 10-01 页面外层导航不动F-02btn_查看详情单击在框架中打开链接iframe_内容区 → 10-02 页面带参数用全局变量F-03btn_返回单击在框架中打开链接iframe_内容区 → 10-01 页面回到列表F-04lnk_帮助单击打开链接新窗口 → 帮助页不覆盖主流程框架尺寸要和内嵌页面尺寸匹配子页面宽度大于框架宽度会出现横向滚动条演示时很难看。稳妥的做法是子页面统一按 1200 宽设计框架宽度设成 1200样式里把滚动条关掉。4.3 右键菜单与元件悬浮说明右键菜单能显著提升「像真的」的程度尤其在做文件列表、表格、画布类产品时。做法是先用动态面板做一个绝对定位的菜单块默认隐藏然后给目标区域挂「右键菜单」事件先把菜单移到鼠标位置再显示面板。菜单项本身挂单击事件点完之后记得把自己隐藏掉否则菜单位置会停在上次点的地方。悬浮说明Tooltip用「鼠标移入显示、移出隐藏」实现位置通常放在元件右下方偏移 8 像素处。这里有个细节tooltip 面板要放在页面层级的高位并且所有 tooltip 共用一个面板移入时改文字、移出时隐藏比每个元件配一个面板省事得多。注意右键菜单面板和 tooltip 面板都不要放在会被裁切的容器里父容器隐藏溢出时子面板跟着消失表现就是「点了没反应」。4.4 函数表达式与变量条件判断、数学运算、跨页面传值Axure RP 9 的表达式用双中括号包裹能写条件、能算数、能读全局变量。全局变量在项目设置里定义命名也建议带前缀比如 gv_用户名、gv_购物车数量页面之间靠它传值。下面这段是订单结算的典型计算把单价乘数量、按满减规则打折、保留两位小数// 位置lbl_合计 → 载入时 → 设置文本 // LVAR1 指向 txt_单价LVAR2 指向 txt_数量 // 满 200 减 30结果四舍五入到两位小数 [[ if (LVAR1.text * LVAR2.text 200) Math.round((LVAR1.text * LVAR2.text - 30) * 100) / 100 else Math.round(LVAR1.text * LVAR2.text * 100) / 100 ]] // 位置lbl_角标 → 载入时 → 设置文本 // gv_购物车数量 为全局变量为 0 时显示空串避免出现「0」角标 [[ if (gv_购物车数量 0) else gv_购物车数量 ]]Math.round(x * 100) / 100是保留两位小数的标准写法容易错的地方是直接Math.round(x)金额会变成整数演示时被客户一眼看穿。全局变量还有一个坑它在文件打开期间一直存在从 A 页面跳到 B 页面再跳回来变量值不会自动重置。需要初始化的变量在入口页面的「载入时」事件里统一赋初值这条规矩能避免很多「第二次进来数据不对」的怪异现象。5. 避坑与排查原型演示前最容易翻车的五个点原型做得好不好演示现场十分钟就能验证。下面五条是我在项目里反复见到的翻车点每条都按「现象、原因、解决」写照着排查基本能覆盖八成以上的现场问题。5.1 点了没反应元件被透明层拦截现象按钮、链接、菜单点下去毫无反馈但选中元件看交互明明是挂好的。原因通常是上方盖了一块热区、一个透明矩形或一个未隐藏的遮罩把点击吃掉了另一种情况是交互挂在母版实例上母版更新后被覆盖。解决打开大纲面板从顶层往下逐层隐藏隐藏到哪层能点动问题就出在它上面母版相关的去母版里改而不是在实例上改。排查顺序固定成「先看层级、再看交互归属」比瞎点省时间。5.2 数据对不上全局变量没初始化现象第一次进页面数据正常退出再进数据翻倍或者残留上次的值。原因全局变量在文件打开期间一直存在页面切换不会清空。解决在入口页面或模块首页的「载入时」事件里先用「设置变量值」把该重置的变量归零再执行后续逻辑。涉及金额、数量的变量尤其要重置客户来回点两次就能发现异常。5.3 打开一片空白内联框架目标名不匹配现象生成 HTML 后点菜单右侧内容区一直空白本地预览却正常。原因有三类框架的 target 名字和交互里选的目标不一致被链接的页面在生成时没有勾选压根没输出链接指向了本地文件路径而不是文件内页面。解决统一用「iframe_内容区」这种带前缀的命名生成时在页面范围里全选链接一律改用内链。生成完成后打开输出目录看对应页面文件在不在这比在 Axure 里反复调快得多。5.4 排版全乱字体和图片惹的祸现象自己电脑上排版精致客户电脑上文字换行、按钮撑高、图标错位。原因用了系统里没有的字体浏览器回退到默认字体后字宽变化或者图片直接从设计稿拖入未压缩大图加载慢导致位置跳动。解决正文和标题统一用系统安全字体特殊字体只在 logo 这类固定尺寸的地方用图片先压到合理体积再导入能用纯色和形状画的就别贴图。生成演示文件时把字体选项确认一遍别留下「本地看着好、发出去就崩」的隐患。5.5 越改越卡文件膨胀与母版嵌套过深现象编辑时滚动卡顿、保存报错、生成 HTML 要等好几分钟。原因图片未压缩、页面元件数量上万、母版里套母版套了三层、复制粘贴带进来一堆隐藏元件。解决把大图先压到长边 1920 以内超过三十个页面的项目拆成主文件和模块子文件母版嵌套控制在两层以内定期用「另存为」生成一个新文件把历史冗余清掉。原型文件和代码一样也需要定期整理拖着不治最后只能重做。6. 验收与答辩生成演示文件后的走查清单原型做完不等于能交付。Axure RP 9 的演示文件生成入口在发布菜单里生成前有三个选项必须确认输出的页面范围别漏页、起始页一定是入口页、打开方式浏览器直接打开不依赖额外软件。生成完之后先在自己的机器上用另一个浏览器打开一遍再拷到一台没装过 Axure 的电脑上打开一遍这两步能提前暴露绝大多数环境问题。下面这份清单是我每次交付前必走的按顺序勾完再发给客户或者带上答辩台序号检查项判定标准不通过怎么办1首页加载双击后 3 秒内出现首屏检查图片体积和起始页设置2主流程走通从首页到下单/提交能一路点到底逐页补交互别留断头路3按钮反馈每个可点元素都有视觉反馈补悬停态和按下态样式4返回与关闭二级页面都能回到上一级补返回按钮和面包屑5弹窗层级弹窗盖住内容区关闭后恢复调整显示顺序关闭时隐藏遮罩6分辨率适配1366×768 与 1920×1080 都不错位用自适应宽度或固定内容区居中7占位文本清零全文搜索无「lorem」「待补充」换成真实业务文案8断网可用拔网线后仍能正常翻页去掉外链字体和远程图片9变量复位退出重进数据不残留入口页补初始化10输出完整输出目录页面文件数量与设计一致重新生成并全选页面范围答辩场景还有两条额外的经验。第一提前准备一条「最短演示路径」三到五个页面走完核心价值别从登录页开始一步步点评委没有那个耐心。第二把关键交互的说明写进元件的说明面板或者用批注图形标出来答辩被问到「这里怎么做」的时候直接切到编辑界面展示比口头解释有说服力得多。批注图形记得设为默认隐藏演示时按需显示别让注释糊在正式界面上。从那以后我每次生成演示文件前都会把这份清单打印出来放在手边逐条勾勾不完不发给客户。吃过一次现场白屏的亏之后这个习惯就再也没断过。这份 Axure RP 9 使用详解 里的步骤和参数我按上面的结构整理成了一份可以对照着做的文档需要拿去改成自己项目的话直接按章节替换业务内容就行。希望帮到你。本文还有配套的精品资源点击获取