Question

Axure怎么制作可伸缩的导航效果？

Answer 1

我们在一些网站网页点击菜单栏的时候，通常都会看到有一些子菜单在主菜单栏里伸缩出来，其实这很常见！而使用Axure制作这样的导航伸缩效果，可能很多小伙伴就犯难了！下面就教大家怎么使用Axure软件制作导航的伸缩效果！对于准备自学或者正在自学Axure的小伙伴，那么我建议你学习体验的Axure自学视频课，0基础到案例实操，全面学习~

Axure制作可伸缩的导航效果步骤：

一、场景简述

我们在进行原型设计时，经常会碰到一些用菜单栏或导航栏无法完全展示的子菜单，这时，可伸缩的导航是非常不错的选择，简单在网上截几个图感受一下：

二、需求分析

鼠标移入菜单时，菜单触发强调效果；

鼠标移入菜单时，子菜单显示；

鼠标由菜单移入子菜单时，子菜单依旧显示；

鼠标移出子菜单时，菜单强调效果消失，子菜单隐藏。

三、功能实现第一步

拖入矩形+绘制小三角形：

菜单：

动态面板：

第二步，绘制子菜单

如图，命名为子菜单，设置为隐藏（不要把隐藏设置到热区上了）。

第三步，设置动画

1.对“菜单”组合设置鼠标移入时-选中-当前原件-true

-显示/隐藏-子菜单组合-显示

-设置面板状态-小三角形-state2

2.对“菜单”组合继续设置鼠标移出时_选中_当前原件_false

-显示/隐藏-子菜单组合-隐藏

-设置面板状态-小三角形-state1

3.对子菜单上覆盖一层热区，对热区重复以上鼠标移入、移出时的响应动作；

对菜单组合设置动作：

对热区设置动作：

通过以上设置，可以基本实现以下：

鼠标移入菜单，菜单被强调，子菜单显示，若鼠标直接从菜单移出，子菜单消失，菜单恢复；

鼠标移入菜单，菜单被强调，子菜单显示，鼠标从菜单移入子菜单，菜单继续被强调，子菜单继续显示；

鼠标从子菜单移出，子菜单消失，菜单恢复。

四、问题思考

细心的朋友可能发现问题，鼠标若是直接从空白区域移入子菜单，子菜单同样会显示，菜单同样会被强调，这个又如何解决呢？

我们作如下思考：当且仅当鼠标移入菜单后再移入子菜单，才能触发鼠标移入子菜单时的对应动作，因此我们很容易联想到条件设置，也就是case。

因此，我们引入全局变量，作如下设计：

1.在鼠标移入菜单时，设置全局变量OnLoadVariable==1；

2.对热区-鼠标移入设置-添加条件：

变量值-ifOnLoadVariable==1

3.鼠标移出菜单时，恢复OnLoadVariable==0

以上就是关于“Axure怎么制作可伸缩的导航效果？”的全部精彩内容分享了，希望你能从中有所收获哦！如果觉得一篇文章不够尽兴，那么Axure相关文章可别错过！总而言之，学习道路，单一知识是很难成就自我全面发展的！想要全面精通擅长一个技能，那么学习也得全面！来，全面学习Axure，综合获取知识点，快速有效促成独立自主原型设计~