《Axure制作导航栏的展开与收缩教程》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,动态面板,原型等多维度案例或实操来进行更多的学习;此教程是由刘小贺在2021-11-05发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
大家在制作产品设计的时候,后台管理页面都会有一个左侧和右侧的导航栏,导航栏在一排全部显示就会显得整个页面十分的凌乱,但如果使用导航栏的展开与收缩功能就能很好的分类放置在同一级导航栏下面,这样既能保证页面的美观还能节省更多的时间。下面就一起来跟北极熊素材库的小编一起来学习一番吧。
从三点带大家分析如何使用与制作:
演示效果:https://slegsq.axshare.com
我们在做一些B端产品项目时,大多的后台管理系统页面多为左侧或顶部放置导航栏,如果导航栏在一侧同时展示会显得比较繁琐,所以,使用导航栏的展开与收缩即可合理的将相关的分类放置同一级导航下,这样既节省了时间又可快速寻找到相应的页面。
我们需要先思考Axure如何展示导航栏展开与收缩呢?需要满足什么条件呢?是否需要显示隐藏呢?如何划分多级元件进行分开展示呢?
看到这相比大家会想到一个元件:动态面板。
在Axure中动态面板的使用性是非常高的,接下来我将为大家详细介绍如何利用动态面板做出我们想要的导航栏~
首先咱们先创建一个矩形,参数设置为 长度:256,高度:54,填充颜色:#001529,并去掉该线宽设置为:0,左侧边距:40,点击右键设置选项组并命名:导航栏(参数可根据自身需要设置)。
点击右键设置交互样式,选择【选中】设置了填充和字色的样式,设置后保存,点击右键选择【转换为动态面板】(样式可根据自身需要设置)。
双击动态面板复制内部面板分别命名为:导航栏一 合并、导航栏一 展开。选择【导航栏一 展开】,再复制三个矩形框内部文字描述为(二级导航栏)(样式可根据自身需要设置)。
以上基础步骤设置完毕后,接下来我们进行交互设置。
选择动态面板内【导航栏一 合并】点击矩形框,交互内容为:单击时-设置面板状态-目标:已有的动态面板、STATE:导航栏一 展开、推动和拉动元件。
选择动态面板内【导航栏一 展开】点击第一个矩形框,交互内容为:单击时-设置面板状态-目标:已有的动态面板、STATE:导航栏一 合并、推动和拉动元件。
选择动态面板内【导航栏一 展开】点击第二个矩形框,交互内容为:单击时-设置选中-当前元件。并分别对下方两个元件设置同样交互。
最后一步:选择已创建的第一个动态面板进行复制两次依次放置下方,查看预览演示就完成啦~
以上就是Axure制作导航栏的展开与收缩教程的全部内容介绍了,关于更多Axure制作微信原型教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure RP自动轮播图设计教程
2022-06-13 09:37
2022-05-23 10:29
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论