Axure8实现左侧动态菜单的几种方法

以下实现的教程采用Ant design的界面模版进行分步说明，左侧动态菜单的实现方法关键在于怎么实现交互而不是设计规范，这里推荐大家在团队协作过程中使用规范的设计框架，网上有很多，可以自己找。特别是后台产品的设计开发，有助于快速输出产品，把原型转变为html这个过程的沟通时间和开发时间可以大大减少，所以我在这篇教程中也是怎么方便怎么来。

 

首先我们要知道需要做什么，做成什么效果，通常我们使用的导航如下图所示

带有父级菜单和子菜单，还有可能有三级菜单，这里以两级的菜单为例。

 

第一种

页面相互跳转，每个导航按钮对应一个页面

所包含的知识点：

1、通过设置按钮链接跳转页面来实现简单的交互

 

实现方法：

首先在Axure的页面管理器创建根目录，一般的业务流程是先登录才能进行后面的操作，所以这里的案例也要遵从正常的产品流程，当用户进入系统时，用户没有操作菜单，所以全部菜单是闭合的，要有一个默认的状态，暂定为首页。大致的流程如下所示：

接下来是画界面，我这里已经在ant design下载了web端的原型库，想要使用原型库的同学，请自行到ant design官网下载，目前使用的是3.0的版本，官网上会定时对原型库作更新，所以这里就不提供下载文件了，大家看我怎么使用就好。

从元件库里找到antdesign的侧导航，选择一个拖动到Axure的页面画板中，这个步骤很简单。

 

接着是修改导航的菜单按钮，使导航和页面管理器的根目录一一对应

因为这种方法制作的左侧导航不能单独展开和闭合，虽然可以使用页面链接来展示出来，但是和页面中的功能内容相搭配的时候，最后的交互显得很奇怪，做原型的时候只能全部展开，另外组织语言对交互进行说明，把交互方式写进说明文档里，原型能不能实现交互就显得不那么重要了。

最后把界面中的导航链接起来，设置鼠标单击的交互用例，导航中的每一个按钮都需要设置。具体操作，选中左侧导航的按钮，在Axure软件的属性->交互中设置鼠标单击时的交互，添加动作为在当前窗口打开目录中的指定页面。如下图所示：

每一个导航按钮都重复上面的设置操作，或者根据自身的需求给每个菜单按钮添加鼠标移入的交互，设置完之后，把界面全选->复制，分别粘贴到根目录下的页面，修改对应页面的按钮颜色，完成侧边导航的制作。

优点：新手快速入门，使用页面链接就能实现导航的切换交互。不用考虑太多的交互在Axure原型中实现，可以快速产出原型形成产品文档，敏捷开发。

缺点：左侧导航的子菜单不能开合，每个状态都需要一个页面来显示，最终造成文档较大，而且展示过程需要点一次加载一次页面，每个页面要等待1到2秒，导致展示过程不是很顺畅，有时加载反应慢了会误以为此按钮忘记设置链接页面。

 

第二种

通过组件的显示/隐藏和移动实现导航子菜单的开合

所包含的知识点：

1、通过显示/隐藏实现子菜单的开合

2、通过元件的推动/拉动实现上下菜单的跟随

 

实现方法：

这个方法在人人都是产品经理网站里有位大神分享过，原文章的地址点击这里，实现的过程相对比较复杂，需要记住组件移动前的位置坐标和移动后的位置坐标，当左侧的菜单比较多的时候，很容易造成混乱。

 

优点：可以实现导航单独的联动，点击父级菜单，控制子菜单开合，其它菜单就会闭合。更符合用户的实际使用场景。

缺点：当菜单比较多的情况下，制作起来比较麻烦

 

第三种

通过动态面板的状态切换实现导航交互

所包含的知识点：

1、通过动态面板的状态切换实现子菜单的开合

2、通过元件的推动/拉动实现上下菜单的跟随

 

实现方法：

大体方法和第二种类似，只不过把动态面板的显示/隐藏改为动态面板的状态切换，相比更加模块化，其实原理都一样，在制作产品原型的时候，左侧导航通过内联框架框架对页面进行控制，达到顺畅的页面切换效果。内联框架在很多场景会被使用到，实现页面中的局部变化，同学们自己可以去了解一下内联框架，这里就不详细讲解。

组成部分：闭合状态的菜单、展开状态的菜单、动态面板

大致思路就是使用动态面板来控制闭合状态的菜单和展开状态的菜单，菜单之间使用推动/拉动实现相互跟随

导航的尺寸根据所需来定，一般使用Ant design的设计规范就不改变样式了，这里就从模版中拆分出两个组件，组件库里没有的，可以自行创建。得到如下图两个状态的组件：

然后按照展开状态组件的尺寸创建一个动态面板，如上图展开状态的组件为256*181，然后给动态面板添加一个状态State（默认有一个），使面板的状态数量为2个，提供相互切换。

分别把两个导航状态放置动态面板的两个状态中，快速双击State即可进入状态中修改动态面板的状态内容，组件要和动态面板对齐，处于XY轴的（0.0）位置

完成组件的搭建之后，接着是设置组件之间的交互，从动态面板的状态返回到上一层，点击选中该动态面板，在右侧的属性->交互中设置设置动态画板自动调整为内容尺寸。

然后在右侧的属性->交互中设置鼠标点击时的交互用例

 

设置的参数如下图所示：

其他的菜单模块都按照以上流程去设置，最后把菜单模块（每一个菜单模块已经打包成一个动态面板）按照所需放置左侧位置，如下图所示：

最后设置每个按钮的交互，进入到每个动态画板的状态中，给每个菜单按钮设置选中的交互和鼠标滑过的交互，有多种方法，我在下面预览里采用了最笨的方法，因为我是沿用之前的模版上做的，你们根据自己所需设置就行，这里就不一一讲解。

 

最终的导航原型预览：https://axhub.im/pro/09a4373fc9b9e88b

原型下载地址：链接:https://pan.baidu.com/s/1l-LNNKn-9onf0pOQ4xFSeQ  密码:nklt