如何用axure做出Tab页签和滑动菜单

如何用axure做出Tab页签和滑动菜单,第1张

制作方法:(其实非常简单,换个方式思考。不要用写程序的方式思考原型的制作)

1. 先制作一个“导航”的Master,在Master里给各个页做好链接。(不区分Tab效果)

2. 在需要突出Tab效果的页面里,单独做一个效果盖在导航的对应位置上。不同的页之间通过复制,简单改一下文字就可完成。

如果您对我的回答有不满意的地方,还请您继续追问;

答题不易,互相理解,互相帮助!

        页签切换的功能在产品设计中经常会用到,比如导航切换、页面内的TAB页签切换等。那么,在Axure中如何实现?在原型绘制过程中,页签切换的实现方式有多种,这次来和大家分享一种最近新学的实现方式。

        这种实现方式主要通过运用设置页签选项的 交互样式 、对页签选项 设置选项组、动态面板 的方式来实现。比如下面是我们最终要实现的效果:

要实现以上效果,我们分步来 *** 作:

一、设置页签选项的 交互样式 ,来区分页签选项在鼠标悬停、选中/未选中下样式的不同。

1.从元件库拖矩形出来作为页签选项,并分别命名。另拖一条水平线出来做装饰;

2.选中四个矩形,设置为无边框;

3.选中第一个页签选项,设置鼠标悬停和选中状态下的交互样式后,确定保存。后面的页签也做相同的设置;

4.默认页面载入状态下,第一个页签选项被选中,所以要做如下设置:

二、通过 设置选项组 ,来实现当选择一个页签选项时,其他页签选项不会被选中。

1.全选四个页签选项,点击鼠标右键,在d出的菜单中选择“设置选项组”,输入选项组名称后确定即可。

三、通过 动态面板 ,来实现不同页签选项对应不同的页面。

1.从元件库中拖一个动态面板,双击动态面板,在d出的对话框中,对动态面板命名并增加四个状态;

2.双击每个面板状态,对不同的面板状态设置对应的页面。

四、通过 设置交互属性 ,实现页签切换时的动作交互。

1.选中第一个页签选项【全部】,设置鼠标单击时的动作交互:(1)设置面板状态,选择“审核状态”的动态面板,设置其状态为“全部”;(2)设置选中状态,设置当前元件的选中状态值为ture。

        2.同理,设置其余三个页签选项对应的鼠标单击时的动作交互,包括对应的动态面板状态和当前元件的选中状态。

        按照以上步骤完成 *** 作后,预览即可得到目标效果。大家有什么更好更实用的方法吗,来一起分享交流吧!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/8027289.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存