在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】动态面板。
设置完成后,整个原型就做完啦,是不是很简单呢?
原型下载:
网友评论