一下如何在Axure中制作导航栏的展开与收缩?

图片[1]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

本文主要讲解如何在Axure中扩展和收缩导航栏。

本文主要从三点分析如何使用和制作:

演示效果:

一、使用场景

我们在做一些B端产品项目的时候,大部分后台管理系统页面大多是在左侧或者顶部放置导航栏。如果导航栏同时显示在一侧,会比较麻烦。因此,导航栏的扩展和收缩可以将相关类别合理的放在同级导航下,既节省时间,又能快速找到对应的页面。

图片[2]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

二、思维分析

我们需要思考一下 Axure 是如何展示导航栏如何扩展和收缩的?需要满足哪些条件?你需要显示和隐藏它吗?如何划分多级组件单独展示?

看到这个,你会想到一个组件:动态面板。

Axure 中动态面板的可用性非常高。接下来我会详细介绍如何使用动态面板来制作我们想要的导航栏~

三、Axure 制作

首先,我们创建一个矩形,设置参数为长度:256,高度:54导航样式的自定义,填充颜色:#,去掉线宽设置为:0,左边距:40。右击设置选项组并命名为:导航栏(参数可以根据自己的需要设置)。

图片[3]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

右键设置交互样式,选择【选择】设置填充样式和字体颜色,设置后保存,右键选择【转换为动态面板】(样式可根据你自己的需要)。

图片[4]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

双击动态面板复制内部面板并命名为: Bar 1 Merge, Bar 1 。选择【 Bar 1 】,然后将三个矩形框内的文字描述复制为( Bar)(样式可以根据自己的需要设置)。

图片[5]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

以上基本步骤设置好后,我们就进行交互设置。

图片[6]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

在动态面板中选择【导航栏-合并】并点击矩形框,交互内容为:点击-设置面板状态-目标:现有动态面板,状态:导航栏一展开,推拉元素。

图片[7]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

在动态面板中选择【展开导航栏】并点击第一个矩形框,交互内容为:点击时-设置面板状态-目标:现有动态面板,状态:导航栏-合并、推拉元素.

图片[8]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

在动态面板中选择【导航栏1展开】,点击第二个矩形框,交互内容为:点击-设置选中-当前组件。并为下面的两个组件设置相同的交互。

图片[9]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

最后一步:选中第一个创建好的动态面板,复制两次,一个一个放在下面导航样式的自定义,查看预览demo就大功告成了~

图片[10]-一下如何在Axure中制作导航栏的展开与收缩?-唐朝资源网

希望内容对大家有帮助,会持续更新内容,大家一起学习~

本文最初由@ 发表于大家。产品经理,未经作者许可,禁止转载。

题图来自,基于CC0协议。

© 版权声明
THE END
喜欢就支持一下吧
点赞145赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容