Axure菜鸟教程:制作导航栏的展开与收缩

2021-10-2709:09:07原型设计Comments2,924 views字数 883阅读模式

从三点带大家分析如何使用与制作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

  1. 使用场景
  2. 思路分析
  3. Axure制作

演示效果:https://slegsq.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

一、使用场景

我们在做一些B端产品项目时,大多的后台管理系统页面多为左侧或顶部放置导航栏,如果导航栏在一侧同时展示会显得比较繁琐,所以,使用导航栏的展开与收缩即可合理的将相关的分类放置同一级导航下,这样既节省了时间又可快速寻找到相应的页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

二、思路分析

我们需要先思考Axure如何展示导航栏展开与收缩呢?需要满足什么条件呢?是否需要显示隐藏呢?如何划分多级元件进行分开展示呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

看到这相比大家会想到一个元件:动态面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

在Axure中动态面板的使用性是非常高的,接下来我将为大家详细介绍如何利用动态面板做出我们想要的导航栏~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

三、Axure制作

首先咱们先创建一个矩形,参数设置为 长度:256,高度:54,填充颜色:#001529,并去掉该线宽设置为:0,左侧边距:40,点击右键设置选项组并命名:导航栏(参数可根据自身需要设置)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

点击右键设置交互样式,选择【选中】设置了填充和字色的样式,设置后保存,点击右键选择【转换为动态面板】(样式可根据自身需要设置)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

双击动态面板复制内部面板分别命名为:导航栏一 合并、导航栏一 展开。选择【导航栏一 展开】,再复制三个矩形框内部文字描述为(二级导航栏)(样式可根据自身需要设置)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

以上基础步骤设置完毕后,接下来我们进行交互设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

选择动态面板内【导航栏一 合并】点击矩形框,交互内容为:单击时-设置面板状态-目标:已有的动态面板、STATE:导航栏一 展开、推动和拉动元件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

选择动态面板内【导航栏一 展开】点击第一个矩形框,交互内容为:单击时-设置面板状态-目标:已有的动态面板、STATE:导航栏一 合并、推动和拉动元件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

选择动态面板内【导航栏一 展开】点击第二个矩形框,交互内容为:单击时-设置选中-当前元件。并分别对下方两个元件设置同样交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

最后一步:选择已创建的第一个动态面板进行复制两次依次放置下方,查看预览演示就完成啦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

Axure菜鸟教程:制作导航栏的展开与收缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

希望内容可以帮助到您,会不断更新内容,大家一起学习~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

本文由 @画图仔 原创发布于人人都是产品经理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22691.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/22691.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定