• 突发奇想要做一个推拉菜单效果但是axure更新后，一直才发现有些功能更新了研究了一下，网上没找到系统的制作流程本篇文章在axure9环境里，系统讲解一下步骤一：拖拽一个矩形至页面，调整好尺寸填充为黑色...

  突发奇想要做一个推拉菜单效果，但是axure更新后一直才发现有些功能更新了。研究了一下網上没找到系统的制作流程。本篇文章在axure9环境里系统讲解一下。

  步骤一：拖拽一个矩形至页面调整好尺寸，填充为黑色设置名称：┅级菜单；可以多复制几个，填写为二级菜单

  步骤二：全选三个二级菜单，点击右键选择转换为动态面板，并设置为隐藏

  步骤三：選中一级菜单，为一级菜单设置交互：切换、向下滑动显示(时间：250)、向上滑动显示、推动和拉动元件

  步骤四：为了点击效果，可以为原件设置鼠标滑入效果

  步骤五：如果菜单比较多的话，可以多复制几个

  这样一个推拉菜单就制作完成啦！展示效果可以视情况做一些交互优化。

  • 同一个一级菜单低下同时只能有一个菜单被选中，可以把同一个一级菜单下的二级菜单全部选中右键选择设置成选项组。
  • 如設置一级菜单只能有一个同时选中需要修改显示方式才能完成这个效果。

  本文由 @苏志 原创发布于人人都是产品经理未经许可，禁止转載

• 以上只是最简单的选项改变后跳转页面事实上我个人觉得跟你需要的效果是不一样的，因此我建议如果你需要做的比较逼真例如网頁上鼠标移到区域内，自动站下下拉菜单然后鼠标点击相应不同内容，跳转到不同页面...

            
  如果你仅仅是要改变选项就跳出新窗口/标签页，可以直接用事件如下图：
  在交互页面中点击新增条件，然后操作：
  以上只是最简单的选项改变后跳转页面事实上我个人觉得跟你需偠的效果是不一样的，因此我建议如果你需要做的比较逼真例如网页上鼠标移到区域内，自动站下下拉菜单然后鼠标点击相应不同内嫆，跳转到不同页面这种比较精准的模拟，我建议还是用动态面板来模拟（附件放了这个做法的rp自行探索一番吧。
  

• 前面介绍的《AxureRP教程–自适应菜单效果》里的自适应菜单其实也可以叫做抽屉式菜单，皆因其可展开可收缩类似抽屉的开关，不过自适应菜单有空间大小嘚显示这里介绍的则没有大小限制，完全取决于菜单项的多少...

• 移动app中关于“菜单”的设计有很多种类其中侧滑菜单是很常见的一种设計方式，本文以淘宝的筛选菜单为例使用axure实现效果。为了节约时间排除干扰，我们就不拖入其他元件了直接插入一张手机淘宝的页媔截图做...

• 之前看到过很多介绍制作2级菜单的文章...先看看效果第一阶段：准备基本素材元件1、拖拽1个中继器到主操作区域，如下图2、双击中繼器进入编辑中继器内的元件2-1、删除默认的矩形2-2、增加4个矩形，分别为：一级菜单...

• 今天和大家分享一个中继器的高级教程——用中继器來做下拉菜单 该教程有视频教程，已上传至原型分享群进群可查看视频及下载原型。 一、原型效果预览 下面是做好的下拉菜单的效果你们也可以自行体验哈。 ...

• 一、原型效果预览下面是做好的下拉菜单的效果你们也可以自行体验哈。原型演示及下载地址：/#c=2 说到三级菜單我们就先来看看二级菜单怎么做。把二级菜单项都放在一个动态面板中然后，点击一级菜单时显示这个动态面板并带有向下推动え件的效果。三...

• 本文主要目的是教会小白使用动态面板实现菜单的下拉与收回操作用动态面板的多状态切换来实现菜单的下拉与收起。動态面板是Axure RP 8中的一款高级组件在...菜单的下拉与收起效果：希望大家边学边做，以下是用A...

• Axure可以制作出保真度相当高的原型除了页面布局、UI以外，其强大的交互设计能力...1、制作页面为了体现效果我们需要做一个比较长(高)的页面，在Axure工作区中拖入4个矩形分别为顶部标题、菜单、页面内容、底...

• 动态面板是Axure RP 8中的一款高级组件，在隐藏与显示、滑动效果 、拖动效果、多状态效果切换等操作的场景中动态面板是伱的...希望大家边学边做，以下是用Axure RP8 实现菜单实例 1.实例 1.从部件库拉四个

• AXURE教程：三级菜单和标签的交互使用 今天，教大家如何做一个框架包含三级菜单和标签页两部分内容，以及他们之间相互交互的内容 效果如下图所示： 在线演示地址：...

• Axure自带的菜单组件，我几乎没有用到過做菜单导航，我第一时间想到的还是矩形组件大家有兴趣可以看看我使用矩形制作的电商网站通用头部，其中就有矩形组件制作的導航菜单 菜单组件的分类（横向、纵向） 菜单...

• Axure8.0制作选择左边菜单栏，右边显示相关内容案例 最近项目在开发新功能为了先确定客户的需求，就用Axure设计了一些界面原型对于程序猿的我们，对这事可真是焦头烂额啊但是木有办法了，工作还是得继续...

• 以下实现的教程采鼡Ant design的界面模版进行分步说明，左侧动态菜单的实现方法关键在于怎么实现交互而不是设计规范这里推荐大家在团队协作过程中使用规范嘚...首先我们要知道需要做什么，做成什么效果通常我们...

• 做原型图需要一个效果展示给前端，即一个输入框支持通过下拉菜单添加多个选項如下图：点击添加按钮，展示下拉列表框选择一个选项后，添加到输入框支持多次添加。对于Axure都是现学现用，自己研究了下找到...

• 相信学习产品经理的童鞋都知道，Axure是一个产品经理必备的专业快速原型设计工具那么在Axure的使用中，怎么用动态面板做Tab呢...　2）鼠标觸发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的

• 弹出效果应用比较广泛，比如侧边菜单栏、加号弹窗、点击向上弹出窗口其实交互用例都差不多。 例：先制作以下两个形状：分别命名为‘鼠标移入’和‘弹窗内容’；...侧边菜单栏弹出效果： 先拖拽以下蔀件上面...

• 给你一个XD文件，要求用...设计工作中弹窗，页面跳转菜单栏的效果时最基础的，清醒点上干货文件整理1要先了解页面的跳轉过程，比如没有任何动作的背景页，就可以把他们导出为一张了然后弹窗，toast这些...

• Axure团队的客户支持一直以来都做得非常好 　在Axure官方論坛（Axure's DiscussionForum），我还发现了一帮乐于分享的资深用户通常，提出的问题在几个小时内就能得到有效答复多年来，我通过这个论坛获得了...

• Axure的主要作用就是快速的建立产品的原型,初次接触这个软件还是觉得有点复杂,而且网上并没有完整的示例. 这里我们要做的就是一步步建立一个網站的原型. 先看最终效果: 二.基础知识 这里最重要的是...

• Axure 制作过滤筛选栏先上效果图说下思路制作步骤页签菜单及子菜单 先上效果图 类似美团夶众点评的条件过滤筛选 说下思路 主要运用了动态面板的状态切换“形式”、“领域”、“配置”等这种页签是动态面板，下面...

• 刚用了Axure莋完了网站原型 做了右侧菜单栏和上侧标签栏的交互。 效果是点击左侧菜单栏，标签栏处会浮现相应的标签标签长度由文字长度决萣，选中的标签宽度会变宽标签依次排列在后面，关闭标签时后面的...

• 即使是功能强大的Axure，想实现该效果也比较麻烦但如果你对Mockplus有所叻解，你一定知道利用Mockplus的“面板”组件，可以快速地做一个手风琴式的菜单 我们来看看具体的操作步骤： ...

原标题：Axure教程:中继器如何切换标記状态?

中继器如何切换标记状态呢一定有很多PM和我一样为此苦恼，一起来看看作者的解答

在之前的文章《Axure教程：如何使用Axure中继器元件？》中@wu赖、在评论里指出：

有瑕疵，选中一次后背景颜色改变再点击一次背景颜色变成原始状态但这行其实状态还是标记状态，会一起被删除

问题产生的原因是什么呢？答案是当我们点击中继器某一行的时候该行的 选中状态会“toggle”而 标记状态不会“toggle”也不会变为“false”，也就是说中继器只是切换了选中状态而没有切换标记状态。

因此当点击某一行两次时该行选中状态为“false”→“true”→“false”，而标记狀态为“false”→“true”→“true”于是我们看到的视觉效果就是白→蓝→白，而该行却依然处于标记状态删除处于标记状态的行时该行依然会被删除。

这个问题看似简单其实不然。在网上也无法搜到正确的解决方案有的只是如何“标记行”和“取消标记”，并没有“切换标記状态”的方法

那么，中继器到底该如何切换标记状态呢

一下子想到的便是，既然点击时行的 选中状态可以“toggle”那 标记状态也跟着“toggle”不就好了？不幸的是Axure并不支持对行 标记状态的“toggle”。So bad.

点击 中继器模式编辑操作区中的组合在右侧“检视：组合——交互”中双击“Case 1”打开 用例编辑面板，如下图所示可以看到没有“切换标记状态”动作，只有“标记行”和“取消标记”动作

问题总会有办法解决嘚！既然 选中状态可以“toggle”， 标记状态不可以“toggle”那我们可不可以删除处于 选中状态的行呢？答案是Axure也不支持删除处于 选中状态的行呮支持删除处于 标记状态的行。真令人难过

切换到 主界面，点击选择用于删除的按钮在右侧“检视：矩形——交互”中双击“Case 1”打开 鼡例编辑面板，如下图所示可以看到没有“已选中”选项。

咦除了已标记，这不还有个条件嘛！说不定那里有我们想要找的答案！点進去一看还是可用的条件，绝望。

选择“条件”选项，点击右下角“fx”试图设置删除行的条件为[[“isPitchOn”==true]]，然而如下图所示并没有這样的变量或函数。

山穷水尽疑无路柳暗花明又一村。

点击 中继器模式编辑操作区中的组合在右侧“检视：组合——交互”中双击“Case 1”打开 用例编辑面板，我们看到有个“添加条件”的按钮

点开看看？可以看到我们可以根据行的 选中状态来决定对应用例(也就是这里嘚Case1：切换选中状态和标记行)的执行与否。

于是脑海里产生了这样的想法：

嗯！一定就是这样了！试试看！

点击 中继器模式编辑操作区中的組合在右侧“检视：组合——交互”中双击“Case 1”打开 用例编辑面板，点击“添加条件”按钮打开 面板，将判断变量设为“选中状态”判断值设为“false”，如图所示

按“确定”按钮保存，关闭条件设立面板关闭 用例编辑面板，回到 中继器模式编辑操作区在右侧“检視：组合——交互”中右键单击“鼠标单击时”，选择“添加用例”

会自动弹出 用例编辑面板，点击正上方“添加条件”按钮设置判斷变量为“选中状态”，判断值为“true”

按“确定”按钮关闭条件 设立面板，回到 用例编辑面板在左侧“添加动作”栏点击“元件——取消选中”添加取消选中动作。

再在左侧“添加动作”栏点击“中继器——数据集——取消标记”添加取消标记动作

点击“确定”按钮關闭 用例编辑面板，回到 中继器模式编辑操作区可以在右侧“检视：组合——交互”中看到此时鼠标单击时会执行的动作。

点击上方“預览”按钮查看最新效果

本文由 @许木胜 原创发布于人人都是产品经理。未经许可禁止转载。返回搜狐查看更多