辉灿新闻网 原型设计 Axure实例:二三级菜单展开/折叠效果的实现

Axure实例:二三级菜单展开/折叠效果的实现

本文介绍了菜单二三级中展开/折叠效果,大家可以参考学习。

后台系统的管理菜单级联原型设计,一般后台菜单的级别分为2、3级,也会通过结构布局来化解菜单折叠的问题,但是有些复杂系统还是会需要菜单的展开折叠。

下面讲一下Axure实现这一效果的过程:

一、准备组件矩形:一级菜单矩形:二级菜单

可根据自己的需要进行颜色、大小等区分,将一级菜单和二级菜单排列好。

二、添加交互

1. 将所有二级菜单转化为动态面板,命名:二级菜单,并设置为隐藏

2. 选中一级菜单,添加点击事件,选中二级菜单动态面板,可见性:切换;勾选推动/拉动元件,如下图:

3. 将一级菜单和二级菜单全部选中,复制粘贴,粘贴的个数自己定。

效果如下图:

三、三级菜单类似

在以上的基础上编辑,选中一个一级菜单和二级菜单进行编辑:

选择二级菜单动态面板,编辑里面的元件,添加三级菜单。

重复以上的步骤:

    先将二级菜单和三级菜单进行排列,选中所有三级菜单,转化为动态面板,命名:三级菜单,并设置为隐藏。

2.对二级菜单添加点击事件。

隐藏——二级菜单——拉动元件:

切换可见性——三级菜单动态面板——可见性:切换——推动/拉动元件:

显示——二级菜单——推动元件:

3. 选中二级菜单和三级菜单,复制、粘贴

效果如下:

4. 最后返回顶层,一级菜单的层级。

选中一级菜单和二级菜单,复制、粘贴,效果如下:

四、完成

可预览查看效果,如有额外精细化的效果,可以自己在相应的元件上添加效果,如下:

效果地址:https://ekmfa2.axshare.com

鉴于很多人有遇到问题,这是源文件可以参考下,链接: https://pan.baidu.com/s/14Eu8id8Nq9l41if6IJbHyg 密码: pi4h

本文由 @西贝槑 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自PEXELS,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/3262.html

作者: 西贝槑

育儿APP「伴宝成长」产品需求文档(PRD)

如何画出专业的原型图?(下)

发表评论

您的电子邮箱地址不会被公开。

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部