Axure RP8动态面板实现菜单栏折叠展开实战指南

做原型的人大概都遇到过这样的场面评审会上有人随手点了一下左侧导航结果整条菜单纹丝不动或者啪地一下弹开、把下面的内容全盖住了然后全场安静三秒看着你。折叠展开这个交互看着简单但在Axure RP8 动态面板里它是最容易做出能点但别扭效果的一个点。这篇文章就围绕Axure RP8 用动态面板实现菜单栏折叠和展开这件事把我自己反复做过十几遍导航原型的经验整理出来动态面板为什么是这件事的最优解、状态该怎么切、推动元件的方向为什么老是反、多级菜单怎么做到一次只开一个、以及那些只有真正交付过原型才会遇到的尺寸错位和交互打架问题。不管你是刚开始学 Axure RP8 的新手还是已经能做页面跳转但一直做不好交互动画的老手下面这些内容都应该能直接抄到你的文件里用。1. 折叠展开这件事为什么第一版几乎都会做歪1.1 动态面板在原型里的真实角色一个能装多页内容的卡片盒先把概念摆正。动态面板Dynamic Panel说白了就是一个卡片盒盒子里可以放很多张卡片每张卡片叫一个状态State。盒子的外框大小是固定的除非你开了适应内容你一次只能看到其中一张卡片上的东西。这个比喻很重要因为很多人做折叠菜单时脑子里想的是把菜单变高变矮而动态面板干的事情其实是换一张卡片。理解了这个差别你就能明白为什么要做两件事第一给面板准备两个状态一个叫折叠、一个叫展开两边的菜单条目数量不一样第二切换状态的时候要让下方的联系人、内容区、页脚这些东西跟着上下移动否则菜单展开后就会盖住下面的内容。前者靠设置面板状态实现后者靠推动元件Push/Pull Widgets实现。我见过很多人第一次做这个效果做法是给菜单项一根一根加显示/隐藏交互做八个菜单项就得写十六行交互改一个条目要动四行。这不是不行是没法维护——产品经理说再加一个二级页面你就得从头再捋一遍。而用动态面板做加一个条目只需要进状态里复制一行文字交互逻辑一行都不用改。这就是我在所有菜单类需求里优先选动态面板的核心原因把内容和控制彻底分开。1.2 三条技术路线的对比与选型依据做折叠展开Axure RP8 里其实有三条路可走各有各的适用场景选错了后面越做越难受。实现路线核心动作优点明显短板适合场景动态面板状态切换设置面板状态 推动元件结构清晰内容与逻辑分离好维护需要处理状态尺寸一致性菜单、折叠面板、常见问答列表显示/隐藏元件组逐个设置显示或隐藏配动画上手最快不需要建状态条目一多交互就爆炸无法做统一控制只有两三个条目的简单场景移动元件移动元件到指定坐标可以做任意的位移动画坐标要手算内容高度变化就全乱抽屉式侧边栏、从底部升起的面板我一般这样决策条目数量固定、每次展开内容一样的用动态面板条目数量少、内容不再变的用显示隐藏需要整块内容从屏幕外滑进来的用移动元件。菜单栏这种典型场景条目会变、层级会加动态面板是唯一不会让你返工重做的方案。还有一个经常被忽略的第四种思路把整块页面内容都包进一个动态面板开适应内容Fit to Content。这个做法在 RP8 里其实更稳因为它让面板高度跟着内容自动变下方元素天然被顶下去不用依赖推动元件。缺点是设计时要规划好谁在里面谁在外面临时改动成本高。我在做那种七八个菜单、每个展开高度都不一样的复杂导航时会用它后面第 4 章会细讲。1.3 先想清楚展开到底要不要盖住内容这是个产品层面的问题但会直接决定你的技术方案。折叠菜单有两种截然不同的行为推挤型菜单展开时把下方内容往下顶页面整体变长。这是移动端 App 导航的常见做法也是绝大多数后台系统侧边栏的做法。覆盖型菜单展开时浮在上层下方内容不动靠 z 轴分层。桌面软件的右键菜单、顶栏下拉菜单是这种。选择哪一种要看你的原型演示场景。如果是给客户演示信息层级推挤型更符合真实浏览习惯如果是演示弹层类交互覆盖型更贴切。技术上的差别在于推挤型必须配推动元件覆盖型只需要把面板层级调到顶层顶层容器 / Bring to Front且不勾推动。我踩过的第一个坑就在这里早期做一个顶部导航下拉我勾了推动结果整页内容被顶下去评审时被问为什么这个菜单一出来页面就跳很尴尬。从那以后我给自己定了个规矩——横向下拉、浮层类一律不推动纵向列表、可折叠面板一律推动。这条规律适用面很广基本不会错。2. 动手之前先把结构和尺寸算清楚2.1 把菜单拆成三个角色容器、扳机、内容我建议在落笔之前先在纸上或者草稿区把菜单拆成三个角色这三者理清了交互逻辑自然就出来了容器Panel动态面板本体负责承载状态、控制高度。扳机Trigger用户点的那个东西通常是一行标题或一个图标比如产品管理加上右边一个小三角。内容Content展开后露出来的那些条目放在面板的展开状态里。绝大多数人做歪是因为把扳机放在了容器外面或者把扳机做进了两个状态里各一份。前者会导致折叠时点击区域和面板脱节后者会出现点击同一位置但实际是两个不同元件的诡异 bug——尤其是你做悬停效果的时候鼠标移过去图标闪一下因为状态切换把元件换掉了。我的做法固定下来是这样的扳机放在容器内部、放在两个状态里的相同位置、并且用同一个元件通过复制粘贴状态内容来保证一致。这样无论展开还是折叠用户点到的永远是同一个坐标、同一块区域交互也只需要绑定一次。RP8 的状态切换不会销毁元件实例所以绑在扳机上的交互在两个状态下都生效不用重复写。2.2 尺寸与间距的预先计算附一张够用的参数表原型做多了会发现视觉上别扭十有八九是尺寸不齐。折叠菜单尤其敏感因为它在展开和折叠之间切换任何一像素的错位都会被动画放大。我常用的参数起点是这样的按 1440 宽桌面端设计稿移动端按 375 宽等比缩参数项建议值说明一级菜单行高44 px低于 40 点击区域偏小高于 48 显得松散二级菜单行高36 px比一级矮一档形成层级感二级菜单左缩进24 px缩进太小层级看不出来太大文字挤图标尺寸16 × 16 px三角、箭头、加号都用这个尺寸图标与文字间距8 px再小就贴住了容器宽度240 px侧边栏常用值顶栏下拉按内容撑开展开动画时长300 ms400 ms 偏拖沓200 ms 又太急折叠动画时长250 ms收起比展开略快体感更利落这里有两个经验值值得单独说。第一收缩动画比展开动画快一点。这是很多交互设计师的共识因为用户关闭的心理预期是立即消失而打开需要一点时间建立空间关系。我一般设展开 300ms、折叠 250ms实测下来节奏很舒服。第二缓动Easing别用默认的线性。线性动画看起来机械改用 Ease Out先快后慢会自然很多尤其是向下展开的时候末尾那一点减速让人感觉面板落下来了。还有一个隐蔽的尺寸问题折叠状态和展开状态的容器宽度必须完全一致。如果展开状态里因为加了缩进文字面板被撑宽了 2px切换的时候整体布局会左右抖一下。我的做法是先把两个状态都建好然后手动把两个状态的尺寸输成同一个数值不依赖拖拽。3. 从零做出一个能用的折叠菜单3.1 建面板、加状态、铺内容具体操作我按顺序走一遍。先在画布上把折叠状态下要显示的那一行做出来——一行文字加一个三角图标选中它们右键选转换为动态面板或者从顶部菜单插入动态面板再把元件拖进去。给它起个名字比如menu-product名字一定要起等到页面里有五六个面板的时候Dynamic Panel 7这种默认名会让你找疯。双击面板进入编辑状态顶部会出现状态标签栏默认只有State1。点标签栏上的加号新增一个状态把State1重命名为折叠、新的那个叫展开。命名这件事同样别偷懒后面写交互的时候下拉列表里会并列出现折叠展开和State 1State 2前者一眼就懂后者要点开试。然后切换到展开状态把二级菜单条目一条条铺进去。这里有个效率技巧先在展开状态里把内容做好再复制整块内容回折叠状态然后删掉多余的条目。这样两个状态的扳机行位置、字体、间距天然一致不会出现切换时文字跳一格的情况。内容铺完把面板的尺寸调成折叠状态的高度此时内容会被裁掉这是正常的RP8 只显示当前状态那一屏。如果内容被裁得看不见了可以在面板属性里把适应内容Fit to Content打开——这个选项我在后面讲复杂菜单时会重点用。3.2 绑定切换交互动画、时长与推动元件的选择选中面板注意是选面板不是选里面的元件在右侧交互面板里新建交互触发方式选单击时OnClick动作选设置面板状态Set Panel State。配置有四块一块都别漏目标面板选你自己也就是menu-product。这里有个细节——在面板内部选中面板本身有时会选到父级稳妥的做法是在画布上点面板的外边框或者从左侧大纲Outline面板里点。状态选展开。动画选向下滑动Slide Down。如果是从下面往上开的选向上滑动。时长与缓动300 ms Ease Out。推动元件勾上推动/拉动元件Push/Pull Widgets方向选向下。这里解释一下为什么要用滑动而不是淡入。淡入是透明度变化面板高度瞬间变成展开状态的高度下方内容会先被顶开再慢慢显影视觉上跳一下。滑动则是高度渐变配合推动元件下方内容是被平滑推下去的这才是真实产品的手感。然后在展开状态里给同一个扳机再绑一个反向交互设置面板状态为折叠动画选向上滑动同样勾推动、方向选向上。这两条交互一正一反就构成了完整的开合循环。注意RP8 里推动/拉动元件只在你切换状态或显示隐藏时可用纯移动元件是推不动的。这是很多人找不到推动选项的原因。3.3 推动元件容易翻车的三个方向问题推动元件看着只是勾一下加选个方向但它是我见过翻车率最高的地方具体有三种表现第一种折叠回去的时候下方内容没回来。原因通常是折叠那条交互的方向选成了向下。记住一个口诀——展开往哪推折叠就往反方向拉。展开是把内容往下顶方向选向下折叠是把内容往回收方向选向上。方向反了RP8 会认为你要把下方元件再往下推一段于是页面上凭空多出一块空白。第二种连点两下就乱了。用户手快点两下面板在展开和折叠之间来回切下面内容被推了两次位置就永久错位了。RP8 没有内置的防抖解决办法有两个一是把交互改成切换逻辑用设置面板状态 → 下一个状态Next代替写死展开/折叠这样无论点多少下状态都在两个之间轮转不会出现设成展开但它本来就是展开的无效操作二是把动画时长缩短到 200ms 以内让用户来不及连点。第三种推动的时候把不该推的东西也推了。推动元件是把面板下方的、与面板有横向重叠的元件往下推如果你的画布上左边是菜单、右边是内容区而内容区恰好有一块元件的横向范围跟面板重叠了它也会被推下去出现左边点菜单右边内容跟着跳的诡异效果。解决办法是给页面分区把菜单区和内容区各自包进一个容器RP8 里可以用一个透明矩形或者再套一层动态面板推动就只影响容器内的元件。提示如果你的菜单右边紧贴着内容区宁可手动给内容区加一条移动元件交互用坐标控制也别指望推动元件能精准只推你想推的那部分。3.4 给箭头加上旋转反馈菜单能开合了但用户看不出当前是开着的还是关着的除非去数下面有几个条目。所以要做图标反馈。RP8 里有三种做法我按推荐度排旋转Rotate给三角图标加交互展开时旋转 180 度、时长 200ms。这是最省事也最专业的做法视觉上箭头从朝下变成朝上语义清晰。要注意旋转中心点默认是元件中心三角图标的中心旋转没问题如果是长条形的箭头图标得先把元件边界调成正方形再转否则会甩出一段奇怪的弧线。切换图标Set Image准备好朝下和朝上两个图标展开时设置图片为朝上那个。这个做法的好处是可以换成完全不同的图形比如加号变减号坏处是多管理一份素材。动态面板做图标把图标本身做成一个小动态面板两个状态各放一个图标。这种做法最啰嗦但如果你要做加号旋转 45 度变成叉号这种效果它是最可控的。我实际用的是旋转 时长 200ms Ease In Out。这个动画和面板的 300ms 滑动画同时在跑箭头先转完、面板再停稳节奏感很舒服。4. 把单条菜单升级成完整导航4.1 手风琴效果一次只允许展开一个单条能开合只是起步真实导航一定是好几组菜单而且用户期望展开这一组时其它组自动收起这就是手风琴Accordion。RP8 没有现成的手风琴组得手动实现。核心思路是每次点击时先把所有面板都设成折叠状态再把当前这个设成展开状态。具体操作是在面板上新建第二条交互动作还是设置面板状态目标不要选具体某一个面板改选全部面板All Panels状态选折叠动画向上滑动勾推动、方向向上。这条交互要排在展开自己的前面执行——RP8 里交互是有执行顺序的从上往下走顺序反了就会出现先展开自己再被自己折叠掉的无效结果。这里有个坑必须提全部面板会把你页面上所有的动态面板都收起来包括那个用来做轮播图的、做标签页切换的。如果你的原型里还有别的动态面板千万别用 All Panels老老实实一个一个点名。我第一次做这个效果的时候就中招了页面上一个轮播突然停止工作查了半天才发现是被全部折叠给误伤了。另一种更稳妥的做法是用元件组合 一个隐藏的控制面板但实现成本比上面这个高不少单页面原型的场景下没必要。4.2 三级嵌套菜单的做法二级菜单再往下展开就变成嵌套动态面板一级面板的展开状态里装着一个二级面板二级面板里又有自己的折叠/展开状态。结构上是嵌套的但交互逻辑其实是平的——每个面板管好自己的两个状态互不干扰。嵌套时真正麻烦的是高度计算。你在二级面板里点展开一级面板并不知道自己应该变高于是新露出来的三级条目会被一级面板裁掉。解决办法是把一级面板开适应内容让它跟着子面板的高度走。开了适应内容之后一级面板的高度等于它当前状态内所有内容的下边界子面板变高它就跟着变高理论上可以一直往外顶。但适应内容不是万能的它只对直接子级生效且对推动元件的配合不太友好——有时会出现面板变高了但下方内容没跟着下移的情况。我在做三级菜单时的实战做法是三级以内用嵌套 适应内容超过三级就在原型里放弃展开改成点击后跳转到一个独立的详情页。因为原型不是真产品四级菜单就算做出来评审的时候也没人愿意一层层点下去。这条经验帮我省了很多时间。4.3 悬停展开、点击展开与看起来像真的之间的距离技术上把触发方式从单击时改成鼠标移入时OnMouseEnter就完事了但实际做起来有两个额外问题要处理。问题一移出后要不要自动收起如果自动收用户想点二级菜单里的某一项鼠标从扳机移到下面条目的过程中如果走得快一点可能会短暂离开面板区域面板就收了点了个空。工程上的解法是给面板设一个鼠标移出时延迟收起RP8 里可以用等待 300ms再接设置状态折叠来模拟但这个延迟是写死的鼠标如果停在间隙上依然会闪。所以我的建议是——悬停只用于横向下拉菜单下拉方向朝下鼠标路径是连续的纵向侧边栏一律用点击。这不是妥协主流后台系统的侧边栏也都是点击展开的。问题二徽标数字和文字位置。折叠状态下如果每个菜单右侧都有个角标数字展开之后这些角标要不要跟着移动我一般把角标放在扳机行的右侧、固定位置不跟着二级菜单走因为这个数字代表的是这个模块下有多少条待办属于一级信息。另外如果你想让原型更接近真机手感可以给面板加移动时的过渡补偿但说实话 RP8 在这块的性能撑不太住元件一多动画就掉帧。我自己的标准是能流畅跑 300ms 滑动就够了别在上面加多余的视差效果。5. 常见故障排查与交付前自检5.1 高频问题速查表下面这张表是我这些年被问得最多、自己也踩过的问题按出现频率排现象最可能的原因处理办法点了面板没反应交互绑在了内部元件上点击区域和面板不重合从大纲面板选中面板本体重新绑交互展开后内容被挡住没勾推动元件或方向选反勾选推动展开向下、折叠向上折叠后页面上多一块空白折叠时指向了错误状态或状态尺寸不一致检查两个状态宽高数值完全一致连点两下布局错位交互写死了固定状态重复触发改用下一个状态Next逻辑箭头不动旋转交互绑在了错误的元件实例上两个状态里的图标要保证是同一份复制二级菜单被裁掉父面板高度固定未开适应内容父面板开 Fit to Content其它面板被误伤收起用了全部面板作为目标改成逐个点名指定面板动画卡顿面板内元件过多或嵌套层数太深合并重复元件控制在三级以内5.2 我踩过的坑和几条交付经验第一个坑状态里放了不可见的占位元件。有次为了让折叠状态和展开状态的行高对齐我在折叠状态里塞了一个透明的空矩形做占位。结果导出后发现折叠状态的高度被这个矩形撑大了导致收起时下面永远多 8px 的缝。教训是——占位这种权宜之计不要往状态里塞宁可手动调数值。后来我统一改成两个状态都用绝对坐标定位不依赖任何隐形的辅助元件。第二个坑复制页面导致的面板引用错乱。做一个多页面原型我把首页连同菜单一起复制成第二个页面改第二个页面的内容时发现点菜单居然把首页的面板状态改了。原因是复制时面板被重命名了但交互里引用的还是原来的名字。RP8 在跨页复制这块有时候会保留引用关系所以复制完一定要在每个交互里点一遍目标确认是当前页的面板。第三个坑忘了做初始状态。原型里所有菜单默认都是收起的但演示的时候如果想展示某个模块得先点一下才能看到很别扭。我现在的做法是在页面加载时OnPageLoad给最重要的那一组加一条设置状态为展开的交互演示时一打开就是完整的展开态评审的第一眼就能看到信息层级。最后说一个交付层面的建议。原型交付给开发或者客户之前自己当第一次用的人点三遍一遍正常点、一遍快速连点、一遍从最下面的菜单往上点。这三个动作能覆盖 90% 以上的交互 bug。我做过一个统计原型评审被打回的交互问题里连点导致的状态错乱占了将近一半都是自己没测出来的。另外菜单面板的命名一律用menu-模块名这种前缀格式交付时在大纲面板里一眼就能看清楚结构对方接手改起来也快——这一点在被要求返工时特别值钱。还有个小细节值得花两分钟处理给面板加一个选中状态样式。在 RP8 里选中状态的写法是新建一个叫选中的交互样式展开时把扳机行设成选中、折叠时取消。这样用户一眼能看出哪一组是当前展开的比单靠箭头方向要明显得多尤其是在深色背景的侧边栏上。