Axure RP从入门到精通（五十一） 案例 - 左侧菜单栏导航

1、添加一级菜单、二级菜单 在元件库拖拽一个矩形到‘左侧菜单栏’页面，设置矩形背景颜色。 在元件库拖拽一个文本标签到‘左侧菜单栏’页面当作一级菜单，设置字体大小和颜色。 复制几个文本标签当作二级菜单，设置字体大小和颜色。 2、设置动态面板 选中二级菜单右键点击‘转换为动态面板’。 将动态面板设置为隐藏。 选中动态面板设置一个名称。 参照上述步骤将其他二级菜单也添加一下动态面板。 3、添加切换动作，点击一级菜单时，显示下属二级菜单。 选中一级菜单，在交互里面找到‘鼠标单击时’。 切换可见性——

一、实现效果展示 本节主要介绍在产品高保真原型图制作过程中，如何利用Axure创建左侧下拉菜单导航，以更好的帮助产品经理表达产品形态、领导者明确产品设计理念、开发人员迅速开发产品。先上图，展示最终达到的效果： 二、插入动态面板 首先插入一个矩形框，调整尺寸及颜色，输入文字【一级菜单1】，右侧面板名称命名为【一级菜单1】，并点击右键转化为【动态面板】，复制一个并重命名为【一级菜单2】。如下图： 双击【一级菜单1】，进入动态面板管理，将此刻的状态【state1】重命名为【折叠】，如下图：

双击p1，面板状态管理。把state1改名为展开状态。在点击+号按钮，新添两项，取名为展开状态和收起状态。．给动态面板p1设置动作，选择状态那里选择“Next”．双击打开收起状态，在面板中画一个导航栏A一样的矩形。把把导航栏A、A1、A2设为动态面板，取名p1。给导航栏B设置动作，导航栏对应正确的动态面板。首先在面板上画几个矩形，大小一样排列好。首先在面板上画几个矩形，大小一样排列好。把B1、B2设为动态面板，取名p2。

在状态一“折叠”下创建交互，选择事件（单击/双击...触发）-选择“设置面板状态”-修改面板状态为”展开“，并勾选二级菜单展示方式。再选择状态二“展开”以同样步骤创建交互就能得到一个菜单栏咯。建议：给每一个动态面板设置名称，这样在后续设置交互时，便于区别、操作！2、双击打开后设置每个状态的样式。1、给对应项创建“动态面板”

目前很多B端产品都是基于左侧的导航栏，有研究表明导航栏放在左侧效率更高。那基于Axure怎么能够实现呢，其实只需要动态面板组件就可以搞定。 1.首先，拖入四个矩形组件，如下图所示，第一个矩形取名为一级菜单1。然后将后三个全部选中，右键选择转化为动态面板。取名为二级菜单1。 2.这个动态面板可以预先设置为隐藏。该设置是为了实现在点击一级菜单时才能显示出二级菜单。默认是不展开的效果。 3.接下来设置动画效果，选中一级菜单1组件，右侧选择动作--单击时，显示/隐藏，目标选择二级菜单1，选择切换，同时

单击时>显示/隐藏动态面板>切换>向下滑动>更多选项>推拉原件>下方>效果选择线性>点击完成。第三步：拖拉一个动态面板>动态面板里面拖拉button作二级菜单>动态面板隐藏。第五步：再拖拉一个button做一级菜单，和原先的一级菜单并排。第四步：点击一级菜单button，设置交互【第二步：拖拉1个button作一级菜单。第一步：打开axure,创建1个页面。

轮播图是一种常见的界面元素，用于在网页或移动应用中展示多个图片或内容，并通过自动循环或手动切换的方式进行展示。通常由一个主要的显示区域和一组导航指示器（如小圆点或箭头）组成。轮播图可以用于展示产品、广告、新闻、图片集等内容，以吸引用户的注意力并提供更多的信息和选择。它一般会在页面的头部或突出位置展示，通过切换不同的图片或内容，引导用户进行浏览和交互。轮播图可以自动播放，按照设定的时间间隔自动切换展示的内容；也可以由用户手动切换，通过点击导航指示器或滑动触摸屏幕来切换内容。通过合适的。