Shawn

欢迎来到我的博客!

「Axure利用动态面板制作二级菜单」

 2周前  •   成长路  •   ,  •   98  •   0

很久前就有在博客说我在实习,最近几天在给公司新版本产品制作原型的时候,发现以前用的菜单母版都是最简单的拼凑,完全没有任何交互,就想做个比较友好的菜单原型。然而,弱鸡的我并不怎么会使用动态面板,就上axure官网查了下资料,花了半天不到把这个带交互的二级菜单给做出来了,下面就说下详细步骤吧,希望能够对大家有所帮助~

首先,打开Axure,在元件库中选择“动态面板”,将其拖至你的编辑区:

当然,你也可以选择把现有的控件转换成动态面板,右键点击控件,选择“转换为动态面板”即可。

这时候,你会发现,在页面的概要区域,该动态面板会有一个state1,这就是该动态面板的一个状态,我们可以控制动态面板在不同的情况下显示不一样的状态,我想这或许也是动态面板名称的由来吧。

然后我们可以双击state1进入该状态的编辑区,在这个页面中你需要设计好你的一级菜单。

此时,你的对应整体页面只会有一个一级菜单,就像这样:

这里我们需要给这个一级菜单添加子菜单,下面就是最关键的步骤了:

  1. 双击你的动态面板,在弹出的“面板状态管理”弹窗页面中给面板添加一个新的状态,这里我就使用了默认的状态名state2:
  2. 在对应的state2页面中添加上你之前画的一级菜单,并在其相对位置补充上你需要的二级菜单,这样我们就制作好了该动态面板的两个状态:
  3. 在state1和state2页面分别给设置的组合的属性中勾选上“允许出发鼠标交互”,并设置好对应的交互:

在完成全部步骤之后,我们就可以预览我们制作的菜单了,下面放下我制作的二级菜单演示动图:

上一篇:
没有了,已经是最新文章啦

 评论


 已有0条评论

    还没有任何评论,你来说两句吧!