Axure交互原型入门：用动态面板与事件交互完成可点击原型

每次带新人做产品原型我都会盯着他们的“第二天”看。第一天大家都学得很快拖几个矩形、打几行字、画几条线一个静态页面就出来了。等到第二天一旦开始碰“交互”学习曲线会突然变陡。原因很简单Axure表面上是个画图工具实际上是个“事件驱动”的逻辑工具。你不能只告诉它“页面长什么样”还得告诉它“用户点了某处之后到底发生什么”。这篇Axure基础教程完整指南就是写给处在Day2阶段的人。不管你是刚看完第一天教程、准备上手做需求的产品经理还是第一次接触交互原型的开发、运营或自由职业者这篇文章会把动态面板、母版、事件交互这些绕不开的概念讲透并且用“固定背景滚动底部悬浮栏”这种真实需求串起来。目标只有一个让你从“能画静态页面”平滑过渡到“能交付带交互逻辑的可点击原型”。带人的经验告诉我Day2学得好不好直接决定你后面是继续用Axure还是老老实实退回静态图。这篇文章里没有照着官方文档念的东西都是实际带项目、做需求时踩过坑又验证过的内容。1. Day1结束后Day2到底该补哪块短板1.1 从“画图工具”切换到“交互原型工具”很多教程把Axure归到“画图”这一类其实是误导。Axure的全名是Axure RPRP全称Rapid Prototyping也就是快速原型设计。它的强项不是画出多精美的视觉稿而是用最低成本把产品的流程、状态、反馈讲清楚。Day1你大概率已经掌握的是新建页面、从元件库拖出矩形和文本、调整颜色和大小、用预览看一眼静态效果。这些是“会画”。但到了评审会和需求沟通现场别人问的问题往往不是“这个按钮好看吗”而是“点这个按钮跳到哪一页”“没有网络时界面怎么显示”“下拉选项展开后怎么收回”。这些问题静态图回答不了必须靠交互来回答。所以Day2要补的第一块短板是思维层面的把Axure从“画图工具”切换成“逻辑表达工具”。一切操作都围绕“用户操作之后系统如何响应”来组织而不是围绕“画面好不好看”来组织。1.2 所有复杂交互底层都能拆成“触发—对象—结果”为了不让Day2淹没在功能海洋里我习惯先给人一个极简框架任何一个交互无论多复杂本质都是三件事。触发用户做了什么或者页面加载后自动发生比如鼠标点击、移入、键盘输入、页面载入。对象要操作哪个元件比如某个按钮、某个输入框、某个动态面板。结果操作之后发生了什么比如跳转到新页面、某个区域隐藏、某张图片切换。这个框架听着简单但特别管用。Day2遇到的困难比如“不知道怎么让某个区域展开收起”“为什么我设置了交互没反应”绝大多数都是因为这三件事里有一样没想清楚。先写一句话把交互描述清楚再去软件里找对应配置项效率会高很多。比如“点击登录按钮后如果账号和密码都不为空就跳转到首页”拆开就是触发是“点击登录按钮”对象是“账号输入框和密码输入框”结果是“判断后跳转首页”。Axure里需要用到“事件条件动作”来组合后面的章节会展开讲。1.3 关于Axure和AI真正值得尝试的配合方式经常有人问Axure能不能跟AI结合用。我的结论是能结合但要分清各自擅长什么。我现在的习惯是拿到需求后先让AI帮我整理交互逻辑清单比如把“登录流程的异常分支”拆列出来再对照清单用Axure实现。AI在生成文字内容、梳理状态流转、写PRD草稿、把一段描述转成结构化步骤列表上效率非常高。但Axure页面本身的拖拽和配置还是得手工来AI目前没办法直接帮你生成一个可编辑的.rp文件。如果你做原型时需要大量真实文案也可以让AI批量生成再粘贴到元件里比一个个打字省不少时间。简单说把AI当“前道工序”用最终表达回到Axure这是目前比较务实的玩法。2. 工作区里被忽略但决定效率的四个细节2.1 页面管理把“页面清单”当成产品地图来维护页面管理器在Axure界面的左上角RP 9里叫Pages面板。很多新人第一天学的时候都是随手新建几个页面命名乱七八糟。到了Day2开始做跳转交互你会在“打开链接”的目标页下拉列表里面对一堆“Page 1”“Page 2”“未命名4”这样的选项当场崩溃。我的习惯是从第一个页面开始就用编号和前缀组织01_全局框架、02_首页、02_列表页、03_详情页、04_个人中心。有层级关系就用文件夹归档。这样当一个交互需要选择目标页时下拉列表本身就是一份清晰的目录。这不仅是美观问题。原型做到中后期页面数量往往会超过三十个前期不梳理光是在页面列表里找目标页就够让人抓狂。2.2 图层和元件命名为交互面板省下80%的查找时间每个元件拖进画布后默认名称是“矩形1”“文本框2”这种。你要是画了一屏的“矩形17”“矩形18”等设置交互、指定操作对象的时候点开目标元件的下拉框等你的就是一场灾难。我的建议是重要元件一律重命名命名格式用“类型_位置_含义”比如按钮btn_login、导航栏nav_header、动态面板panel_userinfo。英文前缀是为了在下拉列表里排序更规整中文含义是为了自己一眼能看懂。有人觉得这很麻烦但实际算下来一次命名只多花几秒钟省下的是后面无数次查找和误操作的时间。尤其当你在动态面板里嵌套了好几层内容之后一个能看清结构的元件树Outline面板比什么都重要。2.3 样式面板、标尺和辅助线精确布局的基本功右侧的样式面板Style是Day2必啃的。位置X/Y、尺寸W/H、圆角半径、不透明度、旋转角度、边框和阴影这些都不要用鼠标去拖动碰运气养成直接输入数值的习惯。想微调就用键盘方向键默认一次移动1像素按住Shift再按方向键一次移动10像素。标尺和辅助线对对齐帮助很大。按CtrlR可以开启或隐藏标尺从标尺上拖出的是蓝色辅助线辅助线只在编辑时显示预览时不会出现。如果团队对页面尺寸有统一规范比如内容区宽度1200像素可以直接拖一条垂直辅助线放在1200的位置所有页面都按这个边界画。样式面板里还有一个很实用的功能格式刷。选中一个设置好样式的元件点工具栏里的格式刷再点另一个元件样式就复制过去了。批量统一按钮和卡片的圆角、阴影、配色时比手动改快得多。2.4 组合与快捷键让重复性操作明显变快画原型时一定要养成“组合”的习惯。选中多个元件按CtrlGMac是CommandG组合成一个整体移动、复制、统一调样式都方便。取消组合是CtrlShiftG。组合不会改变预览表现纯粹是帮你自己管理画布。另外CtrlD可以快速复制一个元件在创建列表项、卡片、多列布局时非常好用。复制出来的元件会稍微偏移一点方便你看出这是新对象。这些操作单个看都不起眼但到了Day2以后页面复杂度会快速上升操作速度和准确率很多时候就是靠这些习惯撑着。3. 交互机制拆解事件、条件、动作、用例是如何协作的3.1 先看懂交互面板的信息结构Day2最容易卡住的地方是交互面板里那一堆概念事件Event、用例Case、条件Condition、动作Action。很多新人分不清谁包含谁结果交互配置的一塌糊涂。我用大白话解释一下事件是“什么时候开始监听”比如单击、双击、鼠标移入一个事件下可以有多个用例所谓用例就是“一种处理方案”每个用例里可以设置条件条件通过了就执行动作动作是“实际干什么”比如打开链接、设置面板状态、隐藏元件。打个比方门铃响了事件管家先看你是不是住户条件确认之后就开门动作。如果有多个住户按顺序一个个匹配匹配上了就执行不再往下判断。Axure里同一个事件下多个用例就是这种“顺序匹配”的逻辑。这个理解极其重要因为新手常犯的错误是以为一个事件只能配置一个动作。其实一个Click事件下面可以挂好几个用例每个用例都有自己独立的条件。这样“判断登录成功与否”“分支处理不同状态”才能实现。3.2 动手配置第一个交互点击按钮跳转页面我们从一个最基础的交互开始点按钮跳转到另一个页面。在页面A放一个按钮选中它。打开右侧交互面板点击“新建交互”。事件选择“单击Click”。点击“打开链接Open Link”。选择目标页面比如02_首页。保存后按F5预览点击按钮验证跳转。这里面有一个容易被忽略的设置是打开链接的“打开方式”。Axure默认是“当前窗口”会直接替换当前页如果想把原型当成演示文稿一样弹新页面可以选“新窗口/新标签页”。真实评审场景我一般用“当前窗口”体验更接近真实App。做完这一步你已经掌握了一个交互的最小闭环事件动作。接下来的难点是怎么加条件。3.3 条件分支让交互“聪明”起来还是登录场景。需求是如果账号输入框不为空且密码不为空才跳转否则弹出一个提示框。操作步骤选中登录按钮在交互面板里新建“单击”事件。在“单击”事件下会生成“用例1”点击它旁边的“启用条件Enable Case”链接进入条件编辑器。条件配置里加两个条件控件1账号输入框的文本 不等于 空控件2密码输入框的文本 不等于 空逻辑关系选“并且AND”。条件通过时执行的动作为“打开链接”。再给同一个“单击”事件新增一个用例不设置条件直接执行“弹窗Alert”提示“账号或密码不能为空”。预览时你会发现如果条件不满足第一个用例不会执行继续跑到第二个用例弹出提示如果条件满足第一个用例执行后后续用例不再执行。这是Axure“用例”设计里最关键的分支逻辑。很多教程没讲透导致新人以为条件写在事件层其实条件是挂在用例层的这一点一定要记住。3.4 新手常见的交互配置误区第一个误区是把交互写在错误的元件上。比如一个按钮上覆盖了一个透明矩形用户实际点击的是透明的那个结果你在按钮上写了Click事件怎么点都没反应。这种情况在画复杂区域时很容易出现排查时可以看画布右侧的元件层级关系把遮挡的透明层移走或禁用。第二个误区是做完交互不预览。交互必须按F5预览才能体验到编辑模式下是没有“点击”反馈的。很多新人在编辑模式下猛点按钮然后跑来问“为什么没反应”其实只是没进预览。第三个误区是删除用例而不是禁用用例。排查交互问题时我建议先禁用掉可疑的用例确认问题后再决定是否删除。删除后再想恢复就得重新配置浪费时间。4. 动态面板撑起九成交互的“容器”到底怎么用4.1 先理解动态面板和普通容器的区别动态面板Dynamic Panel是Axure里使用频率最高的核心元件可以简单理解成一个“可以切换状态的透明容器”。普通矩形只能显示固定内容而动态面板内部可以准备多套内容运行时随时切换。它最像生活中的电子相框外层相框是固定的里面的照片可以一张张切换。原型里的Tab切换、轮播图、下拉菜单、侧滑抽屉、表单校验提示底层几乎都是动态面板在起作用。新手最容易产生的一个误解是动态面板就是一个用来“划分区域”的普通图层。这是错的。如果只是想给几个元件成组移动直接用“组合Group”就够了没必要上动态面板。动态面板的价值在于“状态”和“切换”没有状态切换需求的区域不要滥用。4.2 创建动态面板并管理状态创建方式很简单从元件库的“Dynamic Panel”图标拖进画布或者选中一个已有的元件右键选择“创建动态面板”。创建后双击面板任意位置就进入面板内部编辑状态。左侧会列出这个面板的所有状态State默认叫State1。管理状态的核心操作有三个新增状态、重命名状态、复制状态。新增在状态列表下方点加号一般用于准备不同的显示内容。重命名状态名要能看懂比如“默认”“展开”“加载中”“空数据”。复制右键状态选择复制适合做“只有微小差异”的多个状态比如hover效果。这里有一个新手最常见的卡点进入动态面板内部之后不知道怎么退出回到页面。解决方法是双击画布空白处或者在画布外单击也可以看页面管理器上方的层级路径点上一级返回。不提前把这个操作搞懂做状态切换时会非常别扭。4.3 用“设置面板状态”实现Tab切换真正让动态面板发挥作用的是“设置面板状态Set Panel State”这个动作。以Tab切换为例页面顶部分别是“推荐”和“关注”两个Tab下面是内容区。此时把内容区建一个动态面板状态A放推荐列表状态B放关注列表。然后选中“推荐”Tab新建Click事件。添加动作“设置面板状态”。目标选内容区动态面板状态选A切换动画可以选“淡入Fade”或“无”持续时间300毫秒。同理给“关注”Tab配置同样的动作目标状态选B。预览后点击Tab下面的内容就会切换。到这里你已经掌握了动态面板最核心的用法。后面所有复杂一点的交互比如轮播图自动切换、下拉菜单展开收起、多步骤表单本质都是在“切换动态面板的状态”。4.4 用动态面板做局部滚动区域动态面板还有一个非常实用的场景在页面里做“局部滚动”。比如页面的顶栏和底栏固定中间的内容区域可以独立滚动。操作要点是在动态面板的属性面板里找到“滚动条”设置选择“垂直滚动Vertical Scroll”。这里有几个坑非常典型。第一个坑内容放进动态面板后发现超出面板的部分看不到以为内容丢了。其实不是丢了是面板尺寸固定内容溢出被裁剪。你要做的是把面板的滚动条打开或者调大面板尺寸。第二个坑动态面板默认有“自动调整内容大小”的选项一旦勾选面板会随着内容变长导致局部滚动失效。要做局部滚动建议保持面板尺寸固定并关闭自动尺寸调整。第三个坑滚动条打开后内容很短时看不出滚动效果。调试时可以把内容做得长一点或者把面板高度调小让内容明显溢出。这个局部滚动能力和下一章的固定效果配合就是很多移动端资讯类界面“底部操作栏固定、正文区域滚动”的实现基础。5. 母版搞定全站公共区块的“一次编辑全局生效”5.1 什么时候用母版什么时候用动态面板做原型到了“多页面系统”阶段你会发现每个页面顶部都要放导航栏每个内页底部都要放站点信息。如果一个一个复制后面改一个导航文字就要把所有页面全改一遍非常痛苦。母版Master就是用来解决这种“多处复用同一内容”的需求的。它的工作机制是先在母版里画好一块内容然后把它拖到任意页面上。以后只要编辑母版本身所有引用了它的页面都会同步更新。那母版和动态面板有什么区别简单说母版强调的是“在不同页面上复用同一套内容”动态面板强调的是“在同一个区域切换不同状态”。导航栏适合用母版页签内容切换适合用动态面板。两者不冲突很多时候还会配合使用。5.2 创建母版并应用导航栏改造全站操作步骤在Axure界面左下角的“母版”区域右键选择“添加母版Add Master”命名为“全局导航栏”。双击母版进入编辑画好导航栏的全部内容包括Logo、菜单项、右侧按钮。回到任意页面从母版面板把“全局导航栏”拖到页面顶部。逐个打开其他页面同样拖入母版或者复制已经放好的母版实例。完成后如果产品改了一个菜单名称只需要双击修改母版所有页面的导航栏就会全部更新。这个“一次编辑全局生效”的特性在需求频繁变动的项目里非常宝贵。如果你只有某一个页面不想用这个导航栏可以在页面上右键点击母版实例选择“从母版脱离Detach from Master”把它转成普通元件再改。这样不会影响其他页面的母版引用。5.3 母版里做交互的边界问题母版里的交互有一个容易踩的深坑。你在母版里给导航菜单项添加了Click事件想让它跳转到别的页面这个没问题因为“打开链接”是全局动作。但如果交互是要操作“页面上的动态面板”比如点击导航栏里的刷新按钮要刷新当前页面的内容区你会发现默认情况下在母版编辑环境里根本选不到那个动态面板因为动态面板是页面级对象不是母版级对象。这个问题有几种解法。最简单的是不用母版做这种操作把刷新按钮放到页面里或者用动态面板做导航栏。更进阶的解法是给母版添加自定义事件母版内部用“触发事件”发出信号页面接收后执行对应动作。Day2阶段我不建议死磕自定义事件但你要理解母版的“边界”母版负责公共内容的展示和通用跳转涉及页面内部独有的联动尽量在页面层级完成。理解这个边界能少踩很多坑。6. 实战资讯详情页的固定背景滚动与底部悬浮栏6.1 需求拆解先决定哪些层固定哪些层滚动前面讲的动态面板、固定功能、滚动设置都是零件。这一节把它们组装起来做一个最常见的场景资讯详情页。界面要求是背景保持不变正文可以在内容区滚动底部有一个操作栏始终悬浮在屏幕最下方不随内容滚动。放到Axure里就是三个层次背景层不滚动、内容层局部滚动、悬浮层固定在浏览器窗口。想清楚这个层次关系操作就顺理成章了。6.2 第一步把正文放进可滚动的动态面板新建一个页面“03_资讯详情页”先拖一个大矩形模拟背景图片或者直接在页面样式里设置背景色。然后在中间区域放一个动态面板命名为panel_content宽高设置为内容可视区大小比如1200×600。双击进入动态面板把一整篇正文内容放进去文本长度要明显超出面板高度否则看不出滚动效果。文字放好后回到页面层级选中动态面板在属性面板里设置滚动条为“垂直滚动”。预览时鼠标滚轮放在文字区域滚动正文区域会独立滚动而背景保持不变。这一步的技巧是动态面板的宽度和高度要提前想好。如果做响应式原型可以把宽度设置成和页面内容区一致高度用浏览器可视高度。面板高度过高会挤占页面其他元素的空间需要自己权衡。6.3 第二步用“固定到浏览器”让底部操作栏悬浮在页面底部放一个矩形作为“收藏/分享”操作栏。如果不做任何设置页面滚动时它会跟着内容一起滚走。要让它始终悬浮在浏览器窗口底部做法如下选中底部操作栏。在右侧属性面板里找到“固定到浏览器Pin to Browser”。点击编辑勾选“固定位置Fixed position”。水平方向选择“居中”垂直方向选择“底部”下方边距设为0或10像素。确定后按F5预览。这时你会发现无论正文滚动到哪个位置操作栏始终贴在屏幕最底部。这就是移动端资讯页常见的“底部悬浮操作栏”效果。需要注意这里的“固定到浏览器”是相对于整个浏览器窗口而不是相对于某个动态面板。如果你需要在滚动区域内固定某个元素那就得把该元素也放进该动态面板再用动态面板的定位功能处理。两者容易混淆我建议在Day2阶段先把“固定到浏览器”掌握住它使用频率最高。6.4 从演示到交付评审前必须做的检查原型做完不是画完就结束了。我在交付评审前一定会做几件事。第一按F5完整预览一遍所有页面重点走查每个可交互元件确认跳转和状态切换都正常。第二把原型生成HTML文件或通过在线分享链接给团队而不是截图发静态图。第三在链接或文件里标注清楚哪些是示意、哪些是已确认的需求避免评审时混淆。生成HTML的方式是点击右上角“发布Publish”菜单选择“生成HTML文件Generate HTML Files”生成后把整个文件夹发给同事打开里面的index.html就能看。这种方式亲测比在线云稳定不受账号和网络限制。最后再分享一个经验原型不是画得越精细越好。Day2阶段你最该追求的是把交互逻辑跑通让每个按钮都有响应让每个状态都有交代。视觉美化可以往后放逻辑完整性决定了这个原型能不能在评审会上真正解决问题。我每次带人踩完这一整套流程都会说同样一句话把Day2的东西练扎实后面无论是做复杂后台还是高保真Demo都只是在这个地基上添砖加瓦。