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