【原型设计】如何利用Axure实现下拉子菜单？

Axure RP是一款专业的快速原型设计工具，让我们能够快速设计并创建出应用软件或Web页面的具备高保真和交互能力的原型。通过原型设计，不但能更好地与客户进行交流确认，也能明确地给开发人员以成品效果作为开发指导。本文介绍如何透过这款工具实现下拉子菜单功能的原型设计。

在本次的下拉子菜单功能实现中，我们主要用到了动态面板（当然不用动态面板也能实现，只是效果和效率上没有那么好），动态面板是Axure中的一款高级组件，可以有效帮助我们实现隐藏/显示、滑动、拖动、状态切换等效果。

我们先来看一下最终效果图，此示例主要靠动态面板的状态切换来实现子菜单的下拉和收起的效果：

下面我们一起来看下实现的过程：

Step 1

从元件库中拉取3个动态面板到画布中，按如下图示进行排列。

Step 2

双击第一个动态面板，为其起个名字【模板管理】，并且增加两个状态，分别为菜单收起和菜单下拉。

Step 3

双击第一个状态【菜单收起】，进入该状态的编辑中，添加一个矩形并输入菜单的名字【模板管理】。

Step 4

重新双击动态面板打开状态管理页面，双击第二个状态【菜单下拉】，把第一个状态的矩形框负责过来，同时增加几个子菜单用的小矩形框，并且填入菜单名。

Step 5

按上述步骤把其余两个菜单及其子菜单编辑好。

Step 6

接下来需要对菜单进行状态切换的配置了，选择菜单【模板管理】，双击右边的【鼠标单击时】。

Step 7

在用例编辑中，选择左边的【设置面板状态】，在右边栏中勾选我们需要设置的菜单【模板管理】，然后在选择状态中选中【菜单下拉】，勾选下方的【推动/拉动元件】，保存退出。

Step 8

然后把【自动调整为内容尺寸】勾选上。

Step 9

此时预留效果，已经能将第一个菜单的子菜单通过鼠标点击的方式进行展开了。

Step 10

上面已经完成了点击鼠标把子菜单下拉出来的效果，接下来我们需要配置鼠标移出时将菜单收起的效果。在右边栏的【更多事件】中，选择【鼠标移出时】。

Step 11

按刚才同样的方式进行配置事件。

Step 12

截止目前的配置，已经完成了第一个菜单的下拉效果了：鼠标点击【模板管理菜单】会把子菜单展开，鼠标移出时，子菜单则自动收回。

Step 13

接着按上面的步骤，将【任务管理】和【系统管理】菜单依样进行配置。

Step 14

进行预览，则可以验证我们的配置是否成功了（截图实在是无法表现出这种动态的效果）。

Step 15

稍微修饰一下，去掉边框，增加个小图标，修改一下对齐，加个线条等，好看一点。

Final

最终效果如下：

至此，我们就实现了下拉子菜单的效果，当鼠标点击主菜单时，将下拉出相应的子菜单，当鼠标移出主菜单区域时，自动收起子菜单。

出品：嘉为科技