产品邦-帮助产品经理成长

互联网产品经理学院-满足产品经理的求知欲-产品邦

当前位置: 主页 > Axure > Axure高级教程 >

004.使用axure的动态面板制作tab切换效果教程

来源:非原型,不设计 heguangming.com 作者:萧何 点击:
Axure的动态面板可以用来做什么? tab式页签的切换效果:Axure的官方给出的实例就是这个 鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的垂直菜单、水平菜单来实现,常用于导航的原型制作。 鼠标触发式的浮窗效果:类似Alt的效果,

产品经理学院提供全面的产品经理学习培训教程。
本教程为 004.使用axure的动态面板制作tab切换效果-Axure高级教程
通过本 axure rp 6.5 教程可以掌握 004.使用axure的动态面板制作tab切换效果的方法。

Axure的动态面板可以用来做什么?


1、tab式页签的切换效果:Axure的官方给出的实例就是这个

2、鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现,常用于导航的原型制作。

3、鼠标触发式的浮窗效果:类似“Alt”的效果,常用于浏览提示和触发式广告。

4、JS的鼠标点击弹层效果:这个是目前使用被广泛使用的效果之一。

5、注册表单中的根据焦点判断提示的效果:当焦点在输入框内的时候提示该表单栏目填写规范,当焦点离开输入框的时候根据填写的结果提示正确或者错误原因,这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。


 

  今天我们要制作的就是动态面板tab式页签的切换效果,我们以淘宝网的登录框为主要实例案例,正好综合一下其他组件的使用,这次我们只涉及到tab标签的切换,其他变量效果等都不涉及。

 

1. 实例截图分析
 

  淘宝的登录框主要分为了2个页面标签,淘宝会员和支付宝会员,登录者在这2个不同的标签页进行切换选择自己的登录方式,并且未选中状态层呈突出显示。其他都是一些文本面板加文本框、复选框、按钮组件可以制作的。重点是如何实现这2个标签在点击下自动切换。

 



 

第一步:拖动一个动态面板组件到页面编辑区域,并设置其大小为400*360


 

 

第二步:给动态面板添加2个状态:淘宝会员、支付宝会员


1、单击右键》编辑动态面板》管理面板状态

2、直接双击动态面板,即可弹出管理动态面板状态【常用、简单、方便】

3、点击加号按钮,可以不断的添加状态

4、点击第二个红色的框,可以编辑该动态面板的所有状态


 




 

第三步:拖动一个矩形组件,并设置其坐标为0:0  大小400*360





 

第四步:在拖动二个矩形组件,设置第一个坐标0:0  第二个坐标:200:0    大小都是 200*30


并分别在矩形组件上编辑文字:淘宝会员、支付宝会员

 


 

第五步:设置点击切换


1、选中淘宝会员组件,双击【单击时】弹出用例编辑器,

2、选中【设置动态面板状态为指定状态】

3、选中淘宝登录框(前面给组件已经命名了)

4、选中对应状态(淘宝会员)

点击查看大图


按照同样方式,设置支付宝会员到对应的动态面板状态


 

第六步:复制该动态面板的矩形组件到支付宝会员状态


做好上面的步骤,我们生成原型,就可以实现tab标签的切换效果,不过并不能很真切的看出切换的变化,下面我们在做一些东西,让他在切换之后,有所变化


 

第七步:设置颜色渐变


我们之前分析过,发现他在未选中状态是突出显示的,现在我们利用矩形的渐变,给为选中状态设置渐变色,如何设置矩形渐变,参考前面文章

 



 



 

第八步:设置其他组件内容


拖动一些组件到页面编辑区域,并对其文字进行编辑

 


第九步:生成原型




 

  该案例主要掌握动态面板制作的tab切换效果,其他如组件的对其啊,大小设置啊,布局啊,不在本次教程的考虑范围之内,其他内容,大家可以凭借自己的想法去做,做的多了,就会形成一套自己制作原型的步骤和方法。

  其实在实际制作tab标签切换,如果tab页面过多,我自己都不是按照上述方法一步步走流程的,主要快速简单的去做。不过初学者还是按照流程来。


Axure TAB页相关例子和部件库

1、AxureRP原型TAB自动切换及隐藏
2、Axure RP鼠标点击切换Tab演示(有鼠标悬停效果)
3、Axure RP TAB标签库文件下载 Axure RP rplib

 

友荐云推荐 (责任编辑:蓝极行)
顶一下
(3)
75%
踩一下
(1)
25%
------分隔线----------------------------
栏目列表
推荐内容