美文网首页
Axure教程之--侧导航的简单做法

Axure教程之--侧导航的简单做法

作者: 互联网干货深度精选 | 来源:发表于2019-03-27 19:49 被阅读0次

在web端的后台管理平台,我们经常看到这样的侧导航。

演示地址:http://www.wulihub.com.cn/go/WXpjZW/index.html

我们来简单模仿一下交互效果,此教程主要是运用动态面板的显隐和推拉动元件的效果:

如图在axure里新建一个矩形,文字为模块导航1,再新建一个动态模版命名为01,动态面板里编辑state,依次添加4个矩形分别为模块一,模块二模块三,模块四 如图

然后分别复制矩形:模块导航2,模块导航3,和动态面板02,动态面板03.布局如下:

调整布局,把动态面板02,03设为隐藏,如图:

下一步全部选种,模块导航1.2和3,设置选项组和交换样式,如图:

交互样式添加【悬浮】和【选中】的交互样式,如图:

这里要注意的是,模块导航一默认选中的,所以得设置一下:

接下来就是添加交互效果了,给【模块导航1】添加【鼠标单击时】的交互效果,选择左侧的【元件】-》【设置选中】-》【当前元件】,设置如下

并选择左侧的【元件】-》【显示/隐藏】-》勾选【01】动态面板,可见性为“显示”,动画为“向下滑动”,500毫秒,更多选项为“推动元件”,方向为“下方”,再勾选【02】动态面板和【03】动态面板,可见性都为“隐藏”,动画为“向上滑动”,500毫秒,勾选“拉动元件”,方向为“下方”

然后再根据这个原则,依次设置模块导航2,和三的交互效果。。如图

切记:添加【鼠标单击时】的交互效果时,【模块导航2】则显示【02】动态面板,【模块导航3】则显示【03】动态面板。

设置完成后,整个原型就做完啦,是不是很简单呢?

原型下载:

相关文章

网友评论

      本文标题:Axure教程之--侧导航的简单做法

      本文链接:https://www.haomeiwen.com/subject/lxptbqtx.html