Axure RP 9交互原型实战：动态面板、内联框架与演示交付-北京尧图网络

简介这份《Axure RP 9 使用详解》面向产品经理、交互设计师与原型初学者针对只会画静态页面、备注堆叠、难以向客户演示的问题系统梳理从界面工具到高保真交互的进阶用法。压缩包共1个docx文档大小约2.54MB按页面简介、工具简介、设计过程及方法、演示文件生成等模块组织便于按目录查阅。内容覆盖元件样式与部件库、下拉列表和多选框、文本框、热区、水平/垂直菜单、动态面板、内联框架、右键效果、函数运算、图形批注与取色工具并说明如何生成HTML演示文件。已有6587人学习适合希望提升原型表现力、投标演示与团队沟通效率的读者对照练习。1. 需求先行为什么“能点”的原型比“能看”的截图更抗打Axure RP 9 使用详解这份资料真正值钱的地方不是把工具栏认全而是让原型在客户面前点得动。很多人做原型页面画得挺整齐交互却只停在“点击跳转”备注密密麻麻一演示就露馅下拉列表展不开内联框架空白动态面板切过去回不来。项目投标也好毕设答辩也好评委和客户不会替你脑补交互他们只会点。Axure RP 9 的定位不是画图工具它更像一份能执行的交互说明书页面、元件、状态、函数、批注和演示文件生成每一层都在回答“点下去会发生什么”。这套方案适合正在做产品原型课设、毕设或交付方案的人也适合需要把需求讲清楚的从业者。下面从页面骨架开始把能照着配的步骤拆开。2. 总体设计页面骨架、元件命名与工具栏的职责划分2.1 页面骨架先定别打开软件就拖矩形Axure RP 9 的页面树不是只给自己看的草稿生成演示文件后页面名会出现在左侧导航里客户和评委一眼就能看到。页面命名一旦变成“页面1、页面2、矩形3”后面加交互就是灾难。我一般先画一张页面清单再打开软件建页面顺序是入口页、主界面、子功能页、弹层页、演示辅助页。入口页负责登录或启动主界面承载导航和内容区子功能页按模块拆弹层页放右键菜单、悬浮说明这类不在主流程里的界面演示辅助页专门放批注和备用状态。页面层级命名示例职责常见误用入口页P01_登录登录、启动、角色选择直接拿主界面当首页演示时没有入口感主界面P02_主界面顶部导航、左侧菜单、内容框架把所有内容堆在一个页面页面树失控子功能页P02_01_订单列表具体业务列表、表单、详情子页命名不带父级后期找不到弹层页P03_01_右键菜单右键菜单、悬浮提示、确认框弹层和主页面混在一起图层互相遮挡演示辅助页P09_批注层图形外显批注、答辩说明批注直接画在内容层演示时关不掉页面树控制在三级以内超过三级就用弹层或动态面板状态替代。主界面按“顶部导航左侧菜单内容区操作区”分区顶部放水平菜单左侧放垂直菜单内容区放一个内联框架后面第 4 章会把菜单点击和框架切换串起来。这里先把分区用参考线固定元件按区域命名后续加交互才不会互相踩。页面骨架稳了演示文件左侧的导航就像目录客户点到哪都知道自己在哪。2.2 元件命名与工具栏分区把“矩形3”消灭在开始阶段工具栏不是用来背按钮的按任务分组更顺手选择与连接、绘制、文本、图片、热区、动态面板、内联框架。选择工具负责选中和拖拽连接工具画流程线绘制工具放矩形和占位块文本工具放标题和说明图片工具放图标和示意图热区负责透明点击区域动态面板负责多状态内联框架负责嵌入页面。原件样式、图标及交互属性是三条线外观管颜色大小位置图标管视觉识别交互属性管点击、悬停、状态变化。取色工具在统一主色时很实用看到客户现有系统的颜色吸一下就能保持一致比手动输色值稳。元件类型命名模板示例作用按钮btn_模块_动作btn_order_submit提交、确认、取消文本框txt_模块_字段txt_login_username输入、搜索、校验下拉列表ddl_模块_字段ddl_order_status单选筛选复选框组chk_模块_字段chk_role_group多选、权限配置动态面板dp_模块_状态dp_order_tab选项卡、折叠、空态内联框架if_模块_区域if_main_content内容区页面切换热区hot_模块_动作hot_card_click不规则区域点击命名规则用“类型_模块_动作或状态”复制元件后第一件事是改名不是改样式。血泪经验是交互全绑在“矩形3”上改版时图层面板一折叠根本不知道哪个矩形是提交按钮。元件样式统一用取色工具定主色、辅色、错误色图标从元件库拖不要每个页面单独画。交互属性先不加等页面和命名稳定后再加否则改一次名断一次交互。可抄作业的做法是建一个P00_元件库页面把常用按钮、输入框、下拉列表、菜单项做成组件复制到各页面后只改文案和命名。2.3 主界面布局与批注层让演示时能关掉解释主界面布局我通常按 1440 宽做参考顶部导航 64 高左侧菜单 220 宽右侧内容区自适应底部状态栏 32 高。顶部放水平菜单左侧放垂直菜单内容区放内联框架操作区放按钮组。Axure RP 9 里用参考线和网格对齐别靠肉眼拖。主界面命名定下来后子页面按P02_01_订单列表这种格式排页面树自然成目录。图形外显批注单独建一层插入批注图形在里面输入备注内容给图形命名note_模块_序号右键设为隐藏。答辩需要解释时用交互把批注层显示出来讲完再隐藏内容层不被遮挡。批注层不是备注面板它是演示时能开关的图层。常见误用是把说明文字直接写在按钮旁边客户一看全是字根本不想点。正确做法是内容层保持干净批注层放在最上面默认隐藏需要时按模块显示。验收标准可以定三条页面树不超过三级任意元件能在图层面板里靠名字找到批注层独立且默认隐藏。做到这三条后面加下拉列表、动态面板、内联框架才不会乱。提示先命名再画交互改名的成本比重新绑交互低得多。3. 表单控件落地下拉列表、文本框与多选框的交互配置3.1 下拉列表与多选组合单选靠控件多选靠组合下拉列表控件拖进来后双击编辑选项把默认选中项设好。交互挂在OnChange上常用动作是“设置文本”或“显示面板”。比如订单状态筛选选中“已支付”后内容区显示已支付列表选中“全部”后显示全部列表。配置时注意目标元件要先命名别在动作里选“矩形5”。下拉列表原生是单选遇到“下拉列表多选框”这种需求通常的做法是用复选框组加动态面板模拟一个只读文本框显示已选结果点击后展开动态面板面板里放复选框组每个复选框改变时把选中项拼到文本框里。控件触发动作目标参数下拉列表改变时设置文本txt_filter_result选中项文本下拉列表改变时显示/隐藏dp_order_list按状态切换多选文本框单击切换可见性dp_multi_select展开/收起复选框组改变时设置文本txt_multi_result拼接选中项多选面板鼠标移出隐藏dp_multi_select延迟收起多选组合的关键是“收起后还能看到结果”。文本框设成只读背景用输入框样式点击时展开面板面板里复选框改变时用“设置文本”把结果拼进去。拼接时注意分隔符别直接连成一串。可抄作业的配置是复选框命名chk_role_01到chk_role_05每个改变时设置文本[[LVAR1.text]]到结果框多个复选框用条件判断追加。常见误用是把多选做成五个下拉列表并排客户点起来像填表演示效果很差。3.2 文本框与输入校验默认值、提示文字和错误态文本框要设三样东西默认值、提示文字、输入类型。登录页的用户名框给默认值方便演示搜索框给提示文字“请输入关键词”密码框设成密码类型。输入校验别只靠属性面板里的验证规则演示文件里不一定按预期拦截通常用交互补失去焦点时判断文本长度小于 6 位就显示错误文本并把焦点设回输入框。错误文本单独放一个元件命名txt_login_error默认隐藏校验失败时显示校验通过时隐藏。校验场景触发条件成功动作失败动作用户名必填失去焦点文本为空隐藏错误显示“请输入用户名”密码长度失去焦点长度小于 6隐藏错误显示“密码至少 6 位”邮箱格式失去焦点不含隐藏错误显示“邮箱格式不对”搜索框按下回车文本不为空切换列表状态保持当前列表条件判断里用局部变量接文本框内容别直接写元件名。错误提示不要用弹窗弹窗会打断演示节奏用行内错误文本更稳。原件悬浮说明也在这里配鼠标移入输入框时显示提示面板移出时隐藏。提示面板放在顶层命名dp_tip_username默认隐藏。常见误用是悬浮说明挡住输入框用户刚要点就被盖住。做法是把提示面板放在输入框上方或右侧设置“鼠标移出隐藏”不要加延迟过长。3.3 悬浮说明、显隐顺序、热区与菜单把点击区域做对原件悬浮说明解决的是“这个按钮干什么”的问题。配置方式是给目标元件加OnMouseEnter显示提示面板OnMouseExit隐藏提示面板。提示面板里放短句不要放长段落答辩时客户没耐心读。设置隐藏/显示/显示顺序是三个不同动作隐藏是看不见显示是看得见显示顺序是图层前后。做右键菜单时菜单面板要置于顶层否则被内容区盖住。热区用来定义点击区域即使形状不规则也能触发交互透明填充盖在卡片或图标上命名hot_模块_动作。水平菜单和垂直菜单用元件组做每个菜单项有默认态和选中态。点击菜单项时设置当前项为选中态其他项恢复默认态同时切换内联框架页面。热区比菜单项稍大一点点击手感更好但别大到盖住相邻项。可抄作业的配置是菜单项命名menu_order、menu_user、menu_report点击时设置选中热区命名hot_menu_order点击热区切换if_main_content到对应页面。常见误用是热区比视觉按钮小客户点边缘没反应或者菜单选中态用颜色硬改换个页面就丢状态。验收时可以定三条每个可点击控件至少有默认态和点击态悬浮说明不遮挡输入区域热区覆盖视觉区域且不重叠。做到这三条演示时点击手感就稳了。提示显隐动作尽量绑在具名元件上别绑在组上组一解散交互就断。4. 动态面板与内联框架把页面跳转、状态切换和右键菜单串起来4.1 动态面板多状态双击进去给每个状态起名字动态面板是 Axure RP 9 里最容易出效果、也最容易翻车的元件。拖入面板后双击进入状态管理默认是State1先改成有意义的名字比如st_列表、st_空态、st_加载。不同展示界面放在不同状态里切换时用“设置面板状态”动作选Next、Previous或指定状态。选项卡、折叠面板、轮播图都用这个思路。面板尺寸要固定状态之间尺寸不一致会让页面跳动客户以为点错了。面板状态内容切换触发动作dp_order_tabst_全部全部订单列表点击“全部”设置状态为st_全部dp_order_tabst_待付待付订单列表点击“待付”设置状态为st_待付dp_order_tabst_空态空状态插图列表为空设置状态为st_空态dp_order_tabst_加载加载提示点击查询设置状态为st_加载配置选项卡时每个选项卡按钮点击后做两件事设置面板状态设置当前选项卡选中态。选中态可以用元件样式切换也可以换图片。别在面板内部再加一层同名交互否则点击会冒泡到外层出现“点一次切两次”的玄学问题。动态面板里的内容要按状态分别命名比如st_列表里的列表项叫list_order_01st_空态里的提示叫txt_empty_tip这样排查时知道自己在哪个状态。常见误用是面板尺寸设成“适应内容”切换状态时高度忽大忽小演示时页面抖动客户第一反应是不专业。4.2 内联框架与右键菜单先命名框架再谈跳转内联框架用来在内容区嵌入其他页面做后台系统原型特别合适。第一步不是设链接是选中框架命名比如if_main_content。命名后再设置链接动作里选“打开链接在框架中”目标选if_main_content页面选子功能页。这样左侧菜单点击时只有内容区变顶部和左侧不动演示起来像真系统。常见翻车是框架没命名链接目标选成了“当前窗口”一点菜单整个页面跳走客户找不到返回路。触发区域触发动作目标参数hot_menu_order单击在框架中打开链接if_main_contentP02_01_订单列表hot_menu_user单击在框架中打开链接if_main_contentP02_02_用户管理hot_card_order右键单击显示面板dp_context_menu置于顶层dp_context_menu单击菜单项隐藏面板dp_context_menu同时执行菜单动作hot_blank单击隐藏面板dp_context_menu点击空白关闭右键效果用动态面板做菜单目标区域加透明热区触发“右键单击”显示菜单面板面板置于顶层位置跟随鼠标或固定在卡片右上角。点击菜单项后隐藏面板再执行对应动作。点击空白关闭需要一层全屏热区放在菜单下面、内容上面点击时隐藏菜单。注意菜单面板别挡住系统默认右键演示时客户可能想复制文字结果弹出自定义菜单体验会怪。通常的做法是只在特定卡片上启用右键不要全页面启用。4.3 函数与图形外显批注让计算和解释都能演示Axure RP 9 的函数用在动态计算和控制原型行为上表达式放在[[ ]]里局部变量用LVAR1、LVAR2接元件值。常用场景是长度判断、包含判断、四舍五入、保留小数。函数本身不复杂难在变量有没有值、类型对不对。调试时别盯着条件看先设一个隐藏文本框把[[LVAR1]]设进去预览时看它到底输出了什么这比猜快得多。表达式用途放置位置注意[[LVAR1.length]]取文本长度条件判断空值时长度为 0[[LVAR1.indexOf()]]判断是否含邮箱符号条件判断返回 -1 表示不含[[Math.round(LVAR1)]]四舍五入设置文本变量需为数字[[LVAR1.toFixed(2)]]保留两位小数设置文本金额展示常用[[LVAR1.text]]取元件文本设置文本目标元件要先命名图形外显批注是答辩利器。插入批注图形在里面输入备注内容给图形命名note_模块_序号右键设为隐藏。演示时用按钮或热区显示批注层讲完隐藏。批注层单独放一个页面或一个顶层组不要和内容层混在一起。常见误用是批注图形盖住按钮客户点不到正确做法是批注放在空白处用引线指向目标默认隐藏。取色工具在这里也能用批注颜色跟主色区分但别用大红大绿答辩时看着像警告框。提示函数条件里先判断空值再判断长度和格式顺序反了容易在空输入时直接报错。5. 避坑与排查五个最容易在演示前翻车的配置点5.1 交互与状态类问题现象预览时点击按钮没反应或者点一次触发两次。原因通常不是交互没加而是热区被上层元件遮挡或者交互绑在了错误的状态里。动态面板有多个状态时你在st_列表里加了点击切到st_空态后按钮还在但交互没跟过去。解决方式是把热区置于顶层给热区命名交互只绑当前状态里的具名元件预览时逐页点别只看设计画布。另一个常见原因是组上加了交互组内元件又加了一次点击冒泡导致重复执行。我一般把组交互删掉只保留最内层可点击元件的交互。现象动态面板切换后页面跳动、内容错位。原因是状态尺寸不一致或者面板开了“适应内容”。设计时一个状态高 400另一个高 600切换时容器跟着变下面的按钮全跑位。解决方式是统一状态宽高面板固定尺寸状态内元件用绝对定位对齐如果内容确实长短不一把面板设成固定高度内部内容滚动或分页。还有一种是状态里复制了元件但没改坐标切过去看着像叠在一起。排查时在面板里逐个状态看坐标别在预览里靠肉眼猜。现象内联框架空白或跳错页面。原因多半是框架没命名链接目标选成了“当前窗口”或者页面路径写错。内联框架的交互顺序是先选中框架命名if_main_content再给菜单加“在框架中打开链接”目标选这个框架名页面选子功能页。预览时如果空白先看框架名有没有拼错再看目标页面是否在页面树里最后看链接是不是用了绝对路径。演示文件换目录后绝对路径会断通常用相对页面链接。解决完在预览里点三次菜单确认内容区每次都换、顶部导航不跳。5.2 演示交付类问题现象演示文件发给客户对方打开样式丢失、图片不显示或者干脆打不开。原因是生成时输出目录不干净资源文件夹没一起打包或者用了对方电脑没有的字体。解决方式是生成到一个空目录生成后把整个目录压缩不要只发单个 HTML 文件字体用系统自带字体别用特殊字体生成完断网打开一次确认不依赖网络资源。换一台没装 Axure 的电脑再打开一次这一步很土但很有效我吃过亏之后每次都做。现象函数和条件判断不生效明明表达式写对了。原因通常是局部变量没赋值、变量类型不对或者条件顺序反了。文本框里是空值你直接判断长度小于 6结果可能不符合预期数字文本参与数学运算前要先转数字多个条件要从严格到宽松排先判空再判格式。解决方式是用隐藏文本框做“黑匣子”把[[LVAR1]]和[[LVAR1.length]]设进去预览时看输出条件里先加“如果文本为空”的分支再走长度和格式判断。别在条件里写一长串嵌套拆成多个交互更好排查。现象右键菜单弹不出来或者弹出来关不掉。原因是菜单面板没置于顶层被内容区盖住或者点击空白关闭的热区没加。解决方式是把菜单面板放到最上层右键热区只覆盖目标卡片点击菜单项后隐藏面板再加一层全屏透明热区负责关闭。注意全屏热区别盖住菜单本身图层顺序是菜单在上、关闭热区在下。演示前把右键、左键、空白点击各走一遍确认不会出现“点一次弹两个菜单”的情况。现象批注层演示时关不掉客户以为页面坏了。原因是批注图形画在内容层或者显示交互加了但隐藏交互没加。解决方式是把批注统一放P09_批注层或顶层组默认隐藏显示和隐藏用同一个按钮切换答辩前预览一次确认批注打开后还能关。批注是解释工具不是装饰别让它在主流程里一直亮着。提示避坑清单不用多把这五条在生成演示文件前走一遍能省掉现场大半尴尬。6. 验收与答辩用一份演示文件把交互链路讲清楚6.1 生成演示文件与自测清单生成演示文件不是点一下“发布”就完事。我一般先生成到一个空目录确认资源文件夹跟着输出再用浏览器打开入口页。自测按客户视角走主链路登录 → 主界面 → 左侧菜单切内联框架 → 下拉列表筛选 → 多选组合展开收起 → 动态面板切选项卡 → 右键菜单弹出关闭 → 批注层显示隐藏。每一步都问三个问题点得到吗反馈对吗退得回来吗。断网再走一遍换一台没装 Axure 的电脑再走一遍这两个动作能提前暴露大部分交付问题。验收项通过标准失败先看哪里页面导航左侧页面树层级清楚入口页能进主界面页面命名、首页设置菜单与框架点菜单只换内容区顶部和左侧不动框架命名、链接目标表单控件下拉能选、多选能收、错误提示能出现交互触发、条件顺序动态面板状态切换不跳动能回到默认态面板尺寸、状态命名右键菜单能弹出、能关闭、不遮挡主流程图层顺序、全屏热区批注层能显示、能隐藏、不挡点击批注图层、默认隐藏6.2 答辩讲法按“操作—反馈”讲不按工具栏讲答辩时最怕从头讲工具栏评委听三分钟就走神。更稳的讲法是按一条业务链路走先讲用户进入页面看到什么再讲点某个控件发生什么最后讲异常状态怎么提示。比如“这里选择订单状态列表区通过动态面板切到对应状态如果没数据切到空态右键卡片弹出菜单点空白关闭。”每讲一个交互手上就点一次让评委看到反馈。函数和批注放在后面讲作为“为什么这样设计”的补充不要一上来就讲表达式。我早些年把演示文件直接发给客户结果内联框架空白现场只能用截图救场。从那以后每次生成完都强制走一遍“空目录断网换机”三件套再按验收表逐项打勾。这份《Axure RP 9 使用详解》文档的目录可以当检查表页面、工具、控件、交互、函数、批注、演示生成缺哪项补哪项你手里如果正缺一份能照着走的参照拿它对照练习就够用了。希望帮到你。本文还有配套的精品资源点击获取

Axure RP 9交互原型实战：动态面板、内联框架与演示交付

相关推荐

机器学习损失函数：原理、应用与优化实践

原生Servlet+MySQL财务系统：轻量级生产实践与避坑指南

SX1262/SX1268 LoRa驱动深度解析：寄存器时序与状态机设计

更多资讯

通用报错排查指南：从现象归类到控制变量法

机器学习入门：从经验建模到三大范式解析

STM32硬件SPI驱动AT45DB161D实战：TI模式、时序与0xFF故障排查

SwitchHosts 管理 hosts 文件：安装、方案机制与不生效排查

STM32硬件SPI驱动AT45DB161D的25ns电平驻留关键解析

云计算与分布式系统毕业设计选题指南

今日更新

AI辅助技术栈评估：提升研发决策效率60%

从生成Token到直接决策：Jev如何重塑AI Agent工程实践

32G统一内存跑大模型：内存账、TPS实测与端云分流

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？