Axure9教程:如何做推拉菜单效果

景明
9 评论 13788 浏览 21 收藏 3 分钟
🔗 B端产品经理需要更多地进行深入的用户访谈、调研、分析,而C端产品经理需要更多地快速的用户测试、反馈、迭代

突发奇想要做一个推拉菜单效果,但是axure更新后,一直才发现有些功能更新了。研究了一下,网上没找到系统的制作流程。本篇文章在axure9环境里,系统讲解一下。

步骤一:拖拽一个矩形至页面,调整好尺寸,填充为黑色,设置名称:一级菜单;可以多复制几个,填写为二级菜单。

步骤二:全选三个二级菜单,点击右键,选择转换为动态面板,并设置为隐藏。

步骤三:选中一级菜单,为一级菜单设置交互:切换、向下滑动显示(时间:250)、向上滑动显示、推动和拉动元件。

步骤四:为了点击效果,可以为原件设置鼠标滑入效果。

步骤五:如果菜单比较多的话,可以多复制几个。

这样一个推拉菜单就制作完成啦!展示效果可以视情况做一些交互优化。

小提示:

  • 同一个一级菜单低下,同时只能有一个菜单被选中,可以把同一个一级菜单下的二级菜单全部选中,右键选择设置成选项组。
  • 如设置一级菜单只能有一个同时选中,需要修改显示方式才能完成这个效果。

 

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

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 右键没有转换为动态面板的按钮啊?怎么操作。

    来自中国 回复
    1. 右键最后一个,如果没有需要更新软件了

      来自广东 回复
  2. 为啥做了,推拉时偶尔出现错乱

    来自浙江 回复
    1. 我也有这种困惑

      回复
    2. 😂不要执着于效果了

      来自广东 回复
  3. 3级菜单栏有办法做推拉吗?

    来自广东 回复
    1. QT菜单?

      来自河北 回复
    2. 从最底层开始做,例如你第三层就是底层,那就第三层开始设置动态模板,一层一层套,实验过了可以

      来自广东 回复
    3. 可以的,不过没必要,把时间用在需求调研分析上比较好

      来自广东 回复
专题
35482人已学习22篇文章
从动效设计原则、动效工具、制作方法、标注技巧等全方位解读
专题
16969人已学习12篇文章
供应链管理系统是最早期面向企业的软件解决方案之一,供应商管理又是供应链链条中的上游部分。本专题的文章分享了供应商管理设计指南以及供应链的基础知识。
专题
50852人已学习25篇文章
在产品初期,有什么方法能获取及维护高质量的种子用户呢?
专题
81396人已学习19篇文章
当AI已然成为新的焦点和风口,产品经理该如何抓住这个风口顺势飞起?
专题
12218人已学习12篇文章
随着现代科技的不断发展进步,智慧城市的建设也在不断发展,本专题的文章分享了智慧城市设计指南。
专题
14963人已学习13篇文章
价格是竞争的重要手段,所以对于一个产品来说,产品定价是非常重要的。本专题的文章分享了如何给产品定价和产品定价的策略。