如何使用Axure:[5]制作多级导航

 时间:2024-10-13 07:28:38

无论我们制作什么产品的原型,导航都是不可避免的。而导航的制作方式又因个人选择不同的有所不同,此篇为大家介绍如何制作一个最简单的多级导航。

工具/原料

Axure RP 7

准备

1、打开Axure RP,新建一个页面,并命名为MultiNavigation

如何使用Axure:[5]制作多级导航

2、拖动一个矩形作为导航的底

如何使用Axure:[5]制作多级导航

3、拖动若干个矩形,并取消它们的边框作为一级导航PS:为了方便起见,我们可以先为其配制一个底色

如何使用Axure:[5]制作多级导航

4、为一级导航添加文字

如何使用Axure:[5]制作多级导航

5、添加一个矩形,转换为动态面板,并命名为SecondNav,用于呈现二级导航

如何使用Axure:[5]制作多级导航

编制导航

1、双击SecondNav,为每个一级导航都添加一个状态

如何使用Axure:[5]制作多级导航

2、切换到各个状态当中,并添加带图文的二级项目

如何使用Axure:[5]制作多级导航

3、设置SecondNav的可见性为「不可见」

如何使用Axure:[5]制作多级导航

添加事件

1、回到MultiNavigation,为一级导航项目添加鼠标进入事件用例case1

如何使用Axure:[5]制作多级导航

2、为case1添加条件,如果SecondNav为不可见

如何使用Axure:[5]制作多级导航

3、为case1添加事件,切换到对应的状态,然后显示SecondNav

如何使用Axure:[5]制作多级导航
如何使用Axure:[5]制作多级导航

4、为一级导航添加事件用例case2,并添加条件,如果鼠标没有进入SecondNav面板

如何使用Axure:[5]制作多级导航

5、为case2添加事件,隐藏SecondNav

如何使用Axure:[5]制作多级导航

6、为SecondNav添加事件,当鼠标移出面板后,隐藏SecondNav

如何使用Axure:[5]制作多级导航

结束

1、到这里一个简单的导航就做好了。我们可以自行调整样式,以及为各个导航项目添加页面链接

如何使用Axure:[5]制作多级导航
  • 三消王者怎么玩?
  • 重庆1949怎么买票
  • 机动车驾照考科目一的流程是怎样的?
  • 薄荷泡水喝对人体都有哪些好处?
  • 教你如何用微信免费查询交通违章
  • 热门搜索
    生命安全手抄报 关于数学的手抄报内容 创模手抄报 校园是我家手抄报 地震知识手抄报 关于廉政的手抄报 安全健康手抄报 关于低碳环保的手抄报 读书月手抄报 反映寒假生活的手抄报