Axure教程：用动态面板制作一个动态的网站菜单栏

之前在 善用 Axure 母版，提高原型设计效率 和 每个产品都应该有自己的一套原型组件库 这两篇文章中说了下 Axure 母版和组件库对于提高原型设计效率起到了不少的效用，今天再来码一篇关于 Axure 动态面板。写这些的目的并非是要把 Axure 中所有的功能都写一篇文章出来，只是会把那些大家可能会忽略的但是却在工作中非常实用的功能点总结出来便于后续回顾，同时期望可以给同样产品的你带来点启发。

动态面板，顾名思义就是包含了很多状态的页面 。在工作中大家经常遇到各种菜单栏切换，比如京东订单列表和微信底部的菜单栏，在点击不同的菜单栏会展示不同的页面。

这一篇我们就以一个官网菜单栏切换的为例，一起来看看官网的菜单栏切换如何在 Axure 中完成，首先来看看最终的效果 。

菜单栏切换

我们先来分析下看看：

• 点击切换不同的菜单栏的时候展示不同的页面

• 点击对应的菜单栏，高亮对应的菜单

每一个菜单栏被点击后展示的页面都可以当作一种状态页面，这里可以用动态面板来实现，再设置菜单栏被点击后展示对应动态面板对应的页面似乎就可以完成了。

好，沿着这个思路，我们在 Axure 中做一些组件的准备工作：

• 首页准备下网站的 5 个导航栏，用文本标签来做就好了

• 再将 5 个导航对应的 5 个页面做出来，前面说到了，每一个页面就是一种状态，所以我们用动态面板来实现。拖一个动态面板到页面中，双击动态面板更改下对应的名称，方便后面选择按钮点击的时候选择对应的页面

5 个动态面板

• 再双击对应的动态面板名称可以进入详细页面，在详细页面中设置对应的页面内容，我这里简单就设置成文字便于识别

动态面板详情页

准备工作做好之后，接下来要做的就是添加对应的点击动作，让按钮点击之后可以到对应的页面：

• 选中对应的导航菜单，添加 Click 事件

设置点击事件

• 设置面板状态，选择此前菜单对应的内容页（ 这 就是为什么最先开始建议就要设置好对应状态页面的原因，因为这里就会很容 易选择）

设置点击后显示的状态页面

现在有那么点感觉了，但是还不够好，因为不知道当前选择的是哪个菜单。所以我们还得在此基础上再做些优化。

动态面板切换

进一步优化：

• 全选中这 5 个导航，设置 “鼠标悬停” 和 “选中” 将字色改成强调色

• 预览发现 “鼠标悬停” 这个事件生效了，选中没有生效对不对，不用担心，是因为程序并不知道当前这个菜单栏是否被选中了，好，我们来做一些事情告诉程序

“鼠标悬停” 和 “选中” 事件

• 点击的时候告诉程序当前选中了，所以我们在点击菜单栏的时候将当前菜单栏设置为选中状态

点击菜单栏的时候设置选中状态

• 再次预览的时候，发现只要点击了颜色就全高亮。我们需要再设置一个环节，全选所有菜单栏，鼠标右键选项组，设置一个名称就可以了

设置选项组

• 进入页面的时候正常来说应该是要默认选中首页，所以我们增加一个页面 LOAD 事件，设置首页为选中状态

设置默认选中首页

至于怎么在菜单栏下面加选中的下划线，思路和上面的切换页面内容的动态面板设置类似。最终效果展示：

最终效果

留一个小的思考题：如果鼠标放上去的时候菜单栏就出现下划线如何来做？ 好的，今天就码到这里了，有什么好的发现，可以在底部留言一起交流分享啊~，哈哈哈~

当然产品还是关注需求本身，不宜过于深究，了解 Axure 一些常用的技能并应用在合适的场景这是我们产品人需要关心的。