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

倖福魔咒の 提交于 2020-08-11 23:44:13

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


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


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

1.png


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


Step 1

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

2.png


Step 2

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

3.png


Step 3

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

4.png


Step 4

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

5.png


Step 5

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

6.png


Step 6

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

7.png


Step 7

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

8.png


Step 8

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

9.png


Step 9

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

10.png


Step 10

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

11.png

12.png



Step 11

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

13.png


14.png


Step 12

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

15.png


Step 13

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

16.png


17.png


Step 14

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

18.png


Step 15

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

19.png

20.png

21.png

22.png


Final

最终效果如下:


23.png



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


出品:嘉为科技


其他优质文章

【软件开发】如何在DevOps实践中,持续优化体系构建?

落地敏捷开发的12个建议,打造自定义开发管理模式!

如何定位根本原因,试试5-Why分析法!

【自动化运维】如何设计实现漏洞全过程管理?

【自签名证书】如何解决访问蓝鲸平台时,提示网站不安全问题?

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!