无论我们制作什么产品的原型,导航都是不可避免的。而导航的制作方式又因个人选择不同的有所不同,此篇为大家介绍如何制作一个最简单的多级导航。
工具/原料
Axure RP 7
准备
1
打开Axure RP,新建一个页面,并命名为MultiNavigation
2
拖动一个矩形作为导航的底
3
拖动若干个矩形,并取消它们的边框作为一级导航PS:为了方便起见,我们可以先为其配制一个底色
4
为一级导航添加文字
5
添加一个矩形,转换为动态面板,并命名为SecondNav,用于呈现二级导航
编制导航
1
双击SecondNav,为每个一级导航都添加一个状态
2
切换到各个状态当中,并添加带图文的二级项目
3
设置SecondNav的可见性为「不可见」
添加事件
1
回到MultiNavigation,为一级导航项目添加鼠标进入事件用例case1
2
为case1添加条件,如果SecondNav为不可见
3
为case1添加事件,切换到对应的状态,然后显示SecondNav
4
为一级导航添加事件用例case2,并添加条件,如果鼠标没有进入SecondNav面板
5
为case2添加事件,隐藏SecondNav
6
为SecondNav添加事件,当鼠标移出面板后,隐藏SecondNav
结束
到这里一个简单的导航就做好了。我们可以自行调整样式,以及为各个导航项目添加页面链接END
注意事项
多级导航有很多种制作方法,这里只是最简单的一种。
上一篇:男朋友不务正业怎么办