如何使用Axure:[5]制作多级导航
无论我们制作什么产品的原型,导航都是不可避免的。而导航的制作方式又因个人选择不同的有所不同,此篇为大家介绍如何制作一个最简单的多级导航。
工具/原料
Axure RP 7
准备
1、打开Axure RP,新建一个页面,并命名为MultiNavigation
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/ba274f598540102af9e06a11b142a07aa010c555.jpg)
2、拖动一个矩形作为导航的底
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/bd72f23834bb19efa45c58a7497bd28286893a5a.jpg)
3、拖动若干个矩形,并取消它们的边框作为一级导航PS:为了方便起见,我们可以先为其配制一个底色
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/c33acc828689a146bbb2ba4af4bd4c7c34b3345a.jpg)
4、为一级导航添加文字
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/efb861bd4c7c34b32d4267095841037de137315a.jpg)
5、添加一个矩形,转换为动态面板,并命名为SecondNav,用于呈现二级导航
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/d2001d7de137c97635bf297644672b5fd5462b5a.jpg)
编制导航
1、双击SecondNav,为每个一级导航都添加一个状态
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/7c84d1672b5fd5461995eca77fd0b503c8d2245a.jpg)
2、切换到各个状态当中,并添加带图文的二级项目
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/b955ead0b503c8d267fd13fd498333bf3bef215a.jpg)
3、设置SecondNav的可见性为「不可见」
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/c3c22dbf3bef354f77bbe08d23db574afa321b5a.jpg)
添加事件
1、回到MultiNavigation,为一级导航项目添加鼠标进入事件用例case1
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/2db6c1b2dc19ce2c6a184a6d7fdca039131f115a.jpg)
2、为case1添加条件,如果SecondNav为不可见
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/6834ecc4ec99594338021c4d95425d6b04d1045a.jpg)
3、为case1添加事件,切换到对应的状态,然后显示SecondNav
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/5c2a1ad149299a887a10bc5667eeadbcbe2f7f5a.jpg)
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/4759c1dae43b3b864f221be4185653bbf820755a.jpg)
4、为一级导航添加事件用例case2,并添加条件,如果鼠标没有进入SecondNav面板
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/974a2f21056104a302ead71d63d7592ae3ef6b5a.jpg)
5、为case2添加事件,隐藏SecondNav
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/1570c1b6326c5766f8cc56e0a4632385e036615a.jpg)
6、为SecondNav添加事件,当鼠标移出面板后,隐藏SecondNav
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/22c4fe36e29147e85be36dc1b603bbea3e86585a.jpg)
结束
1、到这里一个简单的导航就做好了。我们可以自行调整样式,以及为各个导航项目添加页面链接
![如何使用Axure:[5]制作多级导航](https://exp-picture.cdn.bcebos.com/baab208630486143b8d71c828febf6a75f0f535a.jpg)
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:73
阅读量:61
阅读量:48
阅读量:54
阅读量:69