做后台原型的人大概都遇到过同一个场景演示到侧边菜单时评审的人随口一句这个二级菜单能不能点开、再点收起你回去一看菜单是用一堆矩形加文本堆出来的根本没有折叠这回事。这时候唯一能救场的元件就是动态面板。Axure RP8 的动态面板在折叠展开这件事上能干三件事控制内容的可见性、控制自身的高度、控制自己的位置把这三件事组合起来就是一个能用的可折叠菜单栏。这篇写的是我在反复做后台侧边导航时沉淀下来的做法包括三种实现路线各自的适用边界、动作序列怎么排、动画时长怎么定、以及那些在编辑界面看不出、一到浏览器预览就翻车的细节。不管你是刚接触 RP8 的新手还是已经做过几版原型、只是折叠效果总觉得别扭的人下面这些内容都能直接照着复现。1. 折叠展开的本质动态面板的三条实现路线与选择依据1.1 动态面板在折叠场景里承担的三种角色拆开看折叠展开这个交互在视觉上只发生了两件事一块内容消失或出现以及它占据的垂直空间被释放或占用。动态面板之所以是首选元件是因为它同时具备三种可被独立控制的能力理解这三种能力的分工后面的所有操作才不会乱。第一种能力是内容容器。面板内部是一个独立的坐标系和层叠空间你把二级菜单的几个条目放进去它们就成了一个整体显示与隐藏只需要一句显示/隐藏动作不需要对着五个元件逐条操作。第二种能力是尺寸可编程。面板的宽和高可以通过设置尺寸动作在运行时改变这为高度跟随内容变化提供了基础。第三种能力是位置可编程。面板可以被移动动作推向任意坐标配合显示隐藏动作里的推拉选项就能把下方内容整体顶下去或拉回来。真正让人困惑的地方在于这三种能力在 RP8 里并不是自动联动的。面板高度变了下面的元件不会自己让位内容显示出来了面板不会自动长高除非你开了一个特定选项。很多人第一次做折叠菜单失败就是把这三件事当成了一件点了一下发现二级菜单出来了但压在一级菜单上或者面板长高了但下面的登录信息还停在原地于是开始怀疑是不是元件用错了。其实元件没错是动作没配齐。我一般会把菜单拆成固定的三层结构来看外层是菜单容器负责整体高度中间是每个一级项 二级块的组合单元内层是二级块本身也就是那个真正被显示隐藏的动态面板。层数定清楚动作写给谁就有了明确对象。1.2 三条路线的能力边界对比具体做法上有三条常见路线我先把它们的差异摊开再讲我自己的选择逻辑。这三条路线在简单的单层菜单上效果几乎一样但一旦遇到多级、遇到展开时下方还有一堆内容、遇到需要互斥点开一个收起另一个差别就会暴露得非常明显。路线核心动作高度控制方式下方内容跟随维护成本适合场景A 自适应路线显示/隐藏内部块面板开启自适应大小由内容撑开需额外补位动作低二级项数量固定、菜单在页面底部无后续内容B 手工尺寸路线设置尺寸 移动动作里写死具体高度动作里同步移动中高度差可预测、下方有内容需要顶开C 状态切换路线设置面板状态两个状态各自定义面板尺寸由面板自身尺寸变化带动有限低到中展开态与收起态视觉差异大、需要分别精修布局路线 A 的优点是不用算数字你在面板里放多少条目面板就长多高改内容时不需要回去改动作。缺点是它对下方内容完全没有感知如果菜单下面还有一块当前用户信息展开时会被压住。路线 B 的优点是确定性极强你在动作里写高度设为 224它就是 224浏览器里跑十次都一样移动动作同步把下面的块推到指定 Y 值绝对不会错位。缺点是每个一级项都要单独算一遍高度如果二级项数量不同还得逐个改。路线 C 的优点是干净。收起态和展开态各画一遍箭头方向、字体颜色、背景色这些视觉差异全部在状态里解决动作只有一句设置面板状态非常不容易出错。缺点是状态之间的元件是隔离的你在展开态里改了一个二级项的文字收起态里的对应元件不会跟着变改文案的时候要改两遍。1.3 我在选择路线时的判断顺序我的判断顺序是固定的先看二级项数量是否统一再看菜单下方有没有需要避让的内容最后看展开态与收起态的视觉差异大不大。如果所有一级项的二级数量都不一样后台系统里这太常见了我倾向路线 C因为路线 B 要为每个项单独算高度和移动距离改一个数字漏改一处就会错位。如果二级数量统一、且菜单是页面里唯一的交互区块路线 A 最省事。如果原型要交给别人继续改我会尽量用路线 C因为它把长什么样和怎么动分开了接手的人看懂状态就能改。还有一个我自己的偏好能用状态切换解决的就不要用尺寸计算解决。原型是给人看的评审的时候没人会去检查你写了几个动作但一定会发现某个菜单展开后下面一截被切掉了。状态切换虽然有改两遍的麻烦但它出错的方式更显眼——你要么忘了放元件要么放错了位置一眼能看出来而尺寸计算出错往往是差几个像素的错位预览时似对非对最难查。2. 菜单栏骨架的搭建顺序从静态排版到可折叠单元2.1 先定尺寸与对齐基准别急着转面板我见过太多人一上来就右键转换为动态面板然后在一个几十像素高的面板里塞内容最后发现二级菜单全被裁掉。顺序应该是先静态排版、再转换、最后写交互。静态阶段的三个数字必须先定下来后面所有计算都依赖它们。菜单宽度我一般取 220 到 260 之间这个宽度能放下四个汉字加一个图标再宽就浪费画布。一级项高度取 44 或 48这是触控友好和视觉紧凑之间的平衡点低于 40 点击区域会显得局促。二级项高度取 36 或 40比一级项矮一档视觉层级自然就出来了。这三个数字定下来一个含 4 个二级项的一级项展开后总高度就是48 4 × 36 192。把它记在纸上或者写进元件名称里都行后面配动作的时候直接抄。这一步看似多余实际上省掉的是后面反复试数字的时间。对齐基准也很关键。我习惯在页面左侧画一条参考线RP8 的标尺可以拖出导线所有一级项、二级项、面板的左边缘全部贴这条线宽度统一。如果你打算让二级项有左缩进比如缩进 32 像素那就把二级块的左边缘定在基准线 32 的位置宽度相应减 32这样右侧文字不会溢出。这个细节不做展开后右边会多出一截空白视觉上像没对齐。2.2 一级项与二级项的分层与命名命名这件事在 RP8 里被严重低估。默认名字是 Rectangle 1、Dynamic Panel 3等你写了二十个动作动作列表里全是 设置 Dynamic Panel 3 为 State1你自己都不知道那是哪个菜单。所以我在转面板之前会先把元件重命名规则是模块-层级-含义。具体命名我会这样写一级项文本用menu-01-title它旁边的箭头图标用menu-01-arrow包住二级条目的动态面板用menu-01-sub面板的两个状态分别命名成collapse和expandRP8 的状态默认叫 State1、State2双击状态标签就能改名。这样在交互面板里读动作就是单击 menu-01-title 时设置 menu-01-sub 为 expand读起来像一句人话后面改的时候也不会错。分层上还有一点要提前想清楚箭头图标放在面板外面还是里面。放在外面箭头的位置固定不动面板高度变化不影响它放在里面箭头跟着面板一起动但如果面板内容顶部有留白箭头位置会跟着漂。我一般把一级项整行文字 箭头 背景作为一个组面板只包二级块这样面板高度变化时一级项原地不动视觉上更稳。这个结构一旦定下来后面复制整个菜单单元的时候也不会把交互复制乱。2.3 从组到动态面板的转换与坐标原点变化选中二级块的几个条目右键转换为动态面板RP8 会以选中范围的外接矩形作为面板尺寸。这里有个容易被忽略的变化元件转换后坐标原点变成了面板的左上角。也就是说原来的绝对坐标变成了相对面板坐标如果你后面要写移动动作移动的是面板本身而不是面板里的条目。理解这一点才能明白为什么有时候移动动作写了却没反应——你可能是在面板内部选中了一个条目给它写了移动而它移动的范围被面板裁剪掉了。转换之后立刻做两件事一是把面板尺寸调整到刚好包住内容高度等于条目数乘条目高度不留多余空间二是在属性面板里检查一下内容是否需要裁剪。RP8 的动态面板有裁剪内容的选项默认是勾上的这个选项在面板高度小于内容高度时会直接切掉超出的部分而切掉的部分在浏览器预览里是不可点击的——这是后面第 7 章要专门讲的坑现在先记住这个选项的存在。转换完成后我建议先别急着写交互直接预览一次。什么都不动的情况下页面看起来应该和转换前完全一样。如果这时候就有位置偏移说明转换的时候选中范围不准确趁早删掉重转比后面调动作省事得多。3. 用面板高度跟随内容实现自动撑开Fit to Content 路线3.1 尺寸属性的三种设置与它们的实际含义动态面板的尺寸在 RP8 里有几种设定方式中文汉化版本叫法不太统一我按功能描述。第一种是任意大小也就是你拖多大就是多大内容超出会被裁剪。第二种是自适应内容英文版是 Fit to Content开启之后面板会跟着内部内容的实际占位自动长高或收缩你还可以设一个最小高度防止内容为空时面板塌成一条线。第三种是固定到浏览器这个跟尺寸无关是定位属性后面单独说。自适应这个选项是实现自动撑开的关键。开启它之后面板内部那个二级块从隐藏变成显示面板的高度会自动增加相应数值不需要你写设置尺寸动作。听起来很理想但有两个前提必须满足否则它不会按你预期工作。第一个前提是被隐藏的内容必须真的占据空间。如果二级块的显示方式是从隐藏到显示它会占位如果是从不显示到显示RP8 里隐藏状态会保留占位但如果你把它移到了面板外面那就完全不参与计算。第二个前提是面板内部不能有绝对定位的浮动元素所有内容必须是顺序堆叠的否则自适应算出来的高度会很奇怪。还有一个细节自适应面板在编辑状态下显示的高度是当前状态的高度你在画布上看到的面板可能只有一级项那么高看起来像内容被切了但预览时展开会正常。不要因为画布上显示不全就去手动拉大面板拉了之后自适应就失效了因为面板尺寸变成了手工指定。3.2 让二级菜单从隐藏到显示的完整动作序列按自适应路线一个菜单项的完整交互是这样排的。先给一级项整行那个组加单击时事件然后在同一个事件下挂三个动作。第一个动作是显示/隐藏目标是menu-01-sub设为显示。这里有个选项千万别漏动作下方的推拉元件有的汉化版叫推动/拉动元件勾上之后它会尝试把下方的元件推开。这个选项在自适应面板的父级场景里不一定生效但勾上不会有害能生效的场景它确实管用。第二个动作是旋转目标是menu-01-arrow角度设 90 度或 180 度看你的箭头初始方向。如果箭头初始是朝右的三角转到 90 度就是朝下。第三个动作是收起逻辑——如果这个菜单需要互斥就把其他所有menu-xx-sub设成隐藏把其他所有箭头旋转回 0 度。互斥的具体写法在第 6 章展开。反过来收起的时候需要把这三个动作的状态全部取反。RP8 有个省事的做法用切换Toggle代替显示和隐藏两个独立动作。给显示/隐藏动作选择切换可见性点一次显示再点一次隐藏一个动作搞定两个方向。但要注意切换只能处理可见性箭头的旋转角度没法切换旋转动作没有切换选项所以箭头还是得写两组动作或者用条件判断来读当前角度。条件判断在 RP8 里是可行的给单击事件加一个如果条件判断箭头元件的旋转角度是否等于 0等于 0 就转到 90 并显示面板否则转回 0 并隐藏面板。这个写法最干净但 RP8 的条件里能不能直接读旋转角度不同版本行为有差异稳妥起见我还是用两组动作配两个触发区域或者干脆接受只能点两次回到原位的简单实现——原型阶段够用了。3.3 下方内容不跟随的补救Set Size 与 Move 的双动作配合自适应路线最大的短板就在这里面板长高了但面板下方的内容比如侧边栏底部的用户信息、页面主体区域完全不动展开的菜单会盖住它们。视觉上像是二级菜单压在了别的东西上面非常难受。补救办法是给下方内容补一个移动动作。假设下方元素的初始 Y 是 600某个一级项展开会让面板增高 144 像素那就在同一个单击事件里加一句移动动作目标下方元素移动到 Y 744动画时长和面板的展开动画保持一致。收起的时候再移回 600。这个办法能work但要维护的数字会翻倍每个菜单项都要算一次增量都要写一次移动互斥收起的时候还要把其他项的增量减回去。四个一级项就是十几个数字改一处漏一处最后一定错位。所以我的建议是如果菜单下方确实有需要避让的内容直接放弃自适应路线改用第 4 章的状态切换或者用固定高度加手工计算。自适应路线的定位应该是菜单独占一列、下方没有其他元件的场景比如一个只有导航的独立页面或者在移动端原型里菜单是整屏的。真要在自适应路线上硬扛有个取巧做法把下方内容也放进一个动态面板里然后给这个面板加固定到浏览器底部或者让它跟随菜单容器。不过这已经超出单个元件的范畴属于整页布局的设计问题投入产出不划算。4. 状态切换路线把收起态和展开态当成两张独立页面4.1 状态内布局的隔离性与裁剪陷阱状态切换的思路很直接给每个菜单组合建一个动态面板面板里建两个状态collapse状态只放一级项那一行expand状态放一级项加二级块的完整内容。两个状态的面板高度不同收起态 48展开态 192。点一下切到 expand再点一下切回 collapse。这个做法最舒服的地方是视觉差异全部在状态里解决。展开态里你可以把一级项的背景改成深色、文字改成白色、箭头换成朝下的图标不需要写任何设置选中状态的动作。收起态保持默认样式。两个状态各自精修互不干扰。但隔离性带来一个陷阱两个状态是两套独立的元件副本。你在 expand 里改了一个二级菜单项的文字collapse 里没有这个元件所以不用管但一级项的文字在两个状态里都有改文案时两处都得改。原型阶段文案变动频繁的话这是个不小的负担。我的应对办法是把一级项的文案做成一个独立的文本元件在两个状态里都用复制的方式放同一个内容改的时候用批量替换RP8 没有全局替换只能一个个改所以我会尽量在状态定稿之后再调文案。裁剪陷阱同样存在。展开态的面板高度必须设置为能完整包住所有二级项哪怕差一像素超出的部分也会被裁掉。RP8 的动态面板不会因为你切换状态就自动改尺寸——除非你在动作里显式写了设置尺寸。所以稳妥的做法是在每个状态的编辑视图里手动把面板高度拉到刚好等于内容高度然后在状态切换动作里把动画勾上让高度变化有个过渡。4.2 一次切换完成所有视觉变化状态切换路线的动作极简。给整个菜单组合那个动态面板加单击时事件挂一个设置面板状态动作目标选自己状态选expand动画勾上逐渐时长 250 到 300 毫秒缓动选 ease out。收起就是同样一个动作状态选collapse。一句话搞定展开折叠听起来太美好但这里有个必须先解决的问题点击区域。如果点击事件挂在面板本身那么展开状态下点击二级菜单项事件也会冒泡到面板导致你点二级项的时候菜单直接收起来了。这在 RP8 里是个真实存在的问题因为面板的点击事件覆盖整个面板区域。解决方式有两种。第一种是把点击事件从面板挪到一级项那一行上但一级项在状态内部两个状态里各有一份等于要写两遍好在这两遍是一样的复制粘贴即可。第二种是保留面板的点击事件但在二级菜单项上加单击时事件并且阻止冒泡——RP8 原生不支持阻止冒泡这条路走不通。所以我用第一种。给collapse状态和expand状态里的一级项组分别加单击事件动作都是设置父面板状态为另一个状态。注意目标要选对动作目标是包含它自己的那个动态面板不是它自己。选错的话表现为点了没反应因为它在给自己设状态而它不是动态面板。4.3 状态切换搭配动画的取舍动画这件事在状态切换路线上有两种玩法各有代价。第一种是只勾逐渐淡入淡出不写尺寸动作那么面板会从 48 直接跳到 192视觉上有点生硬但不会出错。第二种是勾上逐渐并配合设置尺寸动作让高度平滑过渡效果好但需要多写一个动作而且尺寸动作和状态切换动作的时长必须一致。我实测下来的经验是状态切换的动画时长和尺寸动作的动画时长不一致时会出现内容先出现、面板后长高或者面板先长高、内容悬空的错位感。因为这两个动画是并行执行的一个跑 250 毫秒一个跑 400 毫秒中间那 150 毫秒里面板已经在动但内容还没到位。要么统一时长要么干脆不加尺寸动画让它瞬间到位。还有一个更省事的方案把两个状态的面板高度设为一样。也就是收起态的面板也是 192 高只是二级块在里面是隐藏的下方留白。这样切换状态时高度不变完全不需要尺寸动作。代价是收起态下方有一块空白如果菜单下面还有内容那块空白会把内容顶下去。这个方案只适合菜单下方没有其他东西的情况但它确实是最不容易出错的写法我在赶时间的时候经常这么干。5. 那些决定手感的细节箭头旋转、动画时长与缓动曲线5.1 箭头图标的旋转中心与角度设定箭头朝向是折叠菜单里最直观的状态指示做不好的话用户点完不知道菜单到底开没开。RP8 里做转向有三种做法我按推荐度排。第一种是用文本元件里的小三角字符配合旋转动作转 90 度。优点是不需要外部图片缺点是字符渲染在不同浏览器里有细微差异三角的基线位置可能偏一点。第二种是用 SVG 或 PNG 箭头图标同样用旋转动作。优点是可以精确控制颜色和大小缺点是旋转中心默认是元件中心如果你的箭头图形本身不对称比如三角形只有半边旋转后位置会偏移。第三种是准备两张图一张朝右一张朝下用切换图片的方式。最稳但改颜色要重新导出两张图。我自己用第二种并且会做一步预处理把箭头图标的画布做成正方形图形在画布内居中这样旋转中心就自然落在图形中心转到 90 度时不会偏。这个预处理花两分钟省掉后面反复调坐标的时间。关于旋转角度的设定RP8 的旋转动作里有个容易看漏的地方角度输入框旁边有个选项决定你是旋转到绝对角度还是旋转指定增量。如果误用了增量模式点一次转 90 度点第二次变成累加 180 度箭头会转个底朝天。我在第一次做这个交互时就被这个坑绊了半小时最后发现箭头在转了 360 度之后原地不动看着像没反应。检查的时候一定要看清楚是绝对还是相对。5.2 时长不匹配导致的元素分离问题如果一个展开动作里同时包含了面板显示面板尺寸变化箭头旋转下方内容移动四个动作而这四个动作的动画时长不一致视觉上就会出现元素各走各的散架感。这种情况在慢速预览时特别明显。我的标准配置是所有相关动作的时长统一为 300 毫秒缓动统一选 ease out。300 这个数字不是随便定的低于 200 毫秒在演示大屏上几乎看不出动效高于 400 毫秒会让人等得不耐烦评审现场演示时节奏会拖沓。300 毫秒刚好是看得到但不碍事的区间。缓动曲线的选择也有讲究。ease out 是减速收尾动作开头快、结尾慢符合物体被推出去然后停住的直觉。ease in 是加速起步适合消失的动作。linear 是匀速机械感明显我不太用。RP8 的缓动选项列表里有好几档如果拿不准就用 ease out这是最不容易出错的选择。还有一个细节隐藏的动作不要加动画。展开时二级块淡入、面板长高这有动画是加分项收起时如果也让二级块慢慢淡出用户会看到内容一点点变透明再消失很像卡顿。收起动作我一律设时长为 0让它干脆地消失然后面板高度再用 200 毫秒收回来。这个不对称的处理看着违反直觉实际手感反而更利落。5.3 缓动选择与卡顿假象RP8 生成的原型在浏览器里跑动画流畅度取决于电脑性能和浏览器。如果你的原型里同时有多个动态面板在做动画或者页面上有大量图片展开动作看起来会一顿一顿的。这种卡顿和你的动作写法无关但演示时别人会以为是你做的效果不行。规避办法是控制同时进行的动画数量。我见过有人为了让菜单背景有个渐变色过渡、图标有个缩放效果、文字有个位移一个展开动作挂七八个动画预览时直接变成幻灯片。原型演示的目的是表达交互逻辑不是做视觉特效动画控制在两三个就够。还有一个假卡顿的来源是面板尺寸的突变。如果面板高度从 48 一下子跳到 192没写尺寸动画只写了状态切换人的视觉会把它感知成一次闪烁而不是一次展开。解决办法前面说过要么加尺寸动画要么统一两个状态的高度。另外建议在正式演示之前用浏览器而不是 RP8 自带的预览窗口跑一遍完整流程把所有菜单都点开再收起一遍。自带预览窗口的渲染和真实浏览器有差异我在预览窗口里看着顺滑的效果到 Chrome 里放出过一次明显掉帧原因是页面上有个大尺寸的图片蒙版。这种问题只有真机跑一遍才会暴露。6. 多级菜单的互斥与联动手风琴效果怎么不写乱交互6.1 互斥逻辑的硬编码写法点开一个其他自动收起这个效果听起来高级实现起来是纯粹的体力活因为 RP8 的动态面板没有列出所有同级别面板并遍历操作的能力你只能一个一个点名。假设有四个一级项menu-01到menu-04那么点击menu-01的完整动作序列是设置menu-01状态为expand设置menu-02状态为collapse设置menu-03状态为collapse设置menu-04状态为collapse四个菜单项就是十六个动作其中十二个是把别人收起来。这个数量在可接受范围内。如果是八个一级项就是五十六个动作写起来开始烦但还扛得住。超过十个我会考虑放弃互斥效果——原型阶段让用户手动收起也没什么反而更接近某些真实产品的行为。为了少写动作有个优化技巧只把当前是展开状态的面板收起来。RP8 的条件判断可以读面板当前状态如果面板状态等于 expand加上这个条件那些本来就没展开的面板就不会执行多余的动作。性能上没什么差别但动作列表读起来清楚很多改的时候一眼能看出意图。另一个优化是用母版。如果菜单结构比较规整每个一级项下面都是同样数量的二级项可以把单个菜单单元做成母版在页面里拖四份然后在母版里写交互。但母版里的交互是共享的你没法让母版 A 收起源自母版 B 的面板——除非用母版的事件触发页面级动作。这条路在 RP8 里走得通但很绕我不推荐新手尝试老老实实复制元件、逐个改目标更稳。6.2 OnPanelStateChange 反向同步箭头与高亮有时需求会变成不管从哪里触发收起箭头都要转回来。比如你在菜单外面放一个全部收起按钮或者二级菜单项点击后要自动收起。这时候如果箭头旋转只写在单击事件里通过其他途径收起时箭头就不会同步。RP8 的动态面板有OnPanelStateChange事件面板状态改变时触发这个事件就是干这个的。给每个面板加上这个事件在里面写如果新状态是 expand箭头转到 90 度如果是 collapse转到 0 度。这样无论面板因为什么原因切换状态箭头都会跟着变。判断新状态的方式是用条件判断读面板当前状态因为事件触发时状态已经切完了所以读到的就是新状态。同理一级项的文字高亮也可以用这个事件同步。把设为选中样式的动作放进OnPanelStateChange外面那些全部收起的按钮只需要改面板状态高亮和箭头自动跟着走不用重复写。这个模式我用得越来越多因为它把视觉联动集中到了一个地方改样式只改一处。代价是每个面板都要加一个事件四个面板就是四处但每处的内容是一样的复制粘贴很快。6.3 默认展开项与首次加载状态打开页面时默认展开第一项这个需求很常见。实现方式是在页面的载入时事件里加一句设置 menu-01 状态为 expand。注意不要把这个动作写在面板自己的OnLoad里RP8 的元件级加载事件在某些情况下触发顺序不固定写在页面级最可靠。默认展开会带来一个连带问题面板初始高度和展开后的高度不一致时页面下方的所有内容都要按展开后的高度来排布。也就是说你在画布上排版的时候必须假设第一项是展开的把下方内容放在 Y 600 而不是 Y 456。这个细节漏了预览时下面的内容会被盖住一截。如果菜单项是可配置的原型里其实不存在动态配置但评审时可能有人问能不能默认展开第三项那就要保证每个可能的默认项展开后下方内容的初始位置都对得上。这时候最简单的办法还是统一状态高度收起态也占满高度牺牲一点空间换取默认展开任意一项都不会错位。还有一个首次加载的坑动画在载入时不应该播。如果载入时的展开动作带了 300 毫秒动画页面一打开就看见菜单自己展开一下观感很怪。在载入时的动作里把动画时长设为 0瞬间到位。7. 实测复盘折叠菜单在评审现场翻车的几个典型原因7.1 面板裁剪导致二级菜单点不到这是出现频率最高的问题表现是预览时二级菜单明明看得见但鼠标点上去没反应或者只能点到最上面一项。原因几乎都是面板高度不够超出的部分被裁剪内容选项切掉了。RP8 的裁剪是硬裁剪视觉上可能有残留尤其是加了一层半透明背景的时候但点击热区已经没了。排查路径很直接选中那个动态面板看属性面板里的高度数值和内容实际需要的高度对比。如果面板高度是 48而内容需要 192那就是它。改法有两种把面板拉高到 192或者关掉裁剪选项关掉之后内容溢出但可点击视觉上会盖住下方元件不推荐。还有一个隐蔽版本面板高度看着够但内部那个二级块的动态面板自己也被裁了。这是嵌套面板的经典问题外层够高、内层不够点击落在内层之外、外层之内看起来应该能点到实际上事件绑在内层的子元件上够不着。检查方法是把内层临时换个显眼背景色看它的实际范围是不是包住了所有条目。7.2 复制面板后交互引用错位做一个菜单项花了十分钟剩下三个想复制复制完发现点击第一个第四个也跟着展开。原因是复制出来的元件继承了原件的交互动作目标是原件自己但 RP8 在复制时会把目标为自身的引用改成新元件——大部分时候是对的但如果你的动作里同时包含了设置其他面板状态互斥那部分那些其他面板的引用会原样保留指向的还是原来那几个。这个问题的麻烦在于它是静默的不会报错只在点击时表现为连锁反应。我现在的习惯是复制完之后立刻打开每个副本的交互面板把所有的动作目标从头到尾读一遍凡是涉及设某某面板状态的逐个确认是不是自己想要的。四个菜单项大概花两分钟比在评审现场被问为什么点这个那个也开了体面得多。更彻底的做法是先复制元件、再写交互。先把四个一级项的骨架全部搭好、命名全部改好然后逐个写交互。这样写的时候目标名一目了然不容易选错。写交互永远是最后一步这个顺序我在所有 RP8 项目里都遵守。7.3 层叠顺序与固定到浏览器菜单展开时盖住旁边的内容这个通常是期望的但如果展开的菜单被旁边的内容盖住那就是层叠顺序问题。RP8 的层叠按照元件在页面大纲里的顺序后添加的在上面。解决办法是选中菜单容器右键置于顶层或者在大纲面板里手动拖到列表末尾。如果菜单需要跟着页面滚动固定在左侧后台原型的典型布局要给外层容器设固定到浏览器位置选左侧、垂直方向不固定。这里有两点要注意一是固定到浏览器只对页面级元件生效动态面板内部的元件设这个没有意义二是固定之后菜单的高度如果超过视口高度超出的部分滚不到所以在做长菜单时要么压缩项高要么允许菜单内部自己滚动RP8 做内部滚动比较麻烦通常的做法是接受溢出。还有一个层叠相关的细节展开状态下面板的点击热区可能盖住旁边的主内容区。如果你的面板宽度比视觉上的菜单宽比如为了容纳箭头留了透明边距点击主内容区靠近左侧的部分可能会被面板拦截。检查方式是把面板临时染个半透明色看它的实际范围有没有超出视觉边界。7.4 一套上线前的自检清单我给自己定了一份检查表每次做完折叠菜单按顺序过一遍能挡掉大部分低级问题检查项具体动作常见问题面板高度逐个展开确认无裁剪二级项点不到、底部被切动作目标打开交互面板逐条读目标名复制后引用错位、连锁展开动画时长确认同一事件内所有动画时长一致元素分离、内容悬空默认状态页面载入后默认展开项正确载入时播动画、下方内容错位点击区域点一级项、点二级项分别测点二级项导致整个菜单收起层叠顺序展开后是否遮挡预期内容被其他元件盖住、热区越界浏览器实测用真实浏览器跑一遍完整流程掉帧、字体偏移、滚动异常这张表里最容易被跳过的是最后一项。RP8 的编辑界面和浏览器渲染差异比想象中大尤其是旋转后的图标位置、文本的行高、半透明叠加的色差。我在编辑界面里调得完美无瑕的箭头到浏览器里偏了两像素原因是字体渲染的基线和设计稿不一样。这种问题没法在编辑界面发现只能真机跑。最后分享一个我自己摸索出来的提速技巧把最复杂的那个菜单项二级项最多的那个先做出来调到完全满意再把它复制成其他项然后删掉多余的二级条目。这个顺序比从简单项开始一个个加快得多因为调试工作量集中在一次后面的复制只是减法。减法比加法省心尤其是动作已经很复杂的时候。