AxureRP教程–TAB标签使用

TAB标签的应用非常的多,很多地方都能看到TAB标签的应用,因为应用的广泛,自然在设计过程当中就会经常要用到TAB标签的设计了。而TAB标签的设计个人觉得也是在AxureRP中掌握动态面板使用的比较基础的一部分,前面在介绍动态面板功能的时候也有介绍过如果制作TAB页签的效果了,相信大家都基本上已经对TAB有了一个基础的认识。其实这个基础认识的就差不多了,因为漂亮好看的TAB标签也是用同样的原理设计制作出来的,并不是因为技术上有不一样,而是采用的样式或者素材不一样而已。因此这里就不再介绍TAB标签如何制作了,介绍几种稍微易用一点的有技术含量一点的使用方式。

前面在介绍图片映射组件的时候介绍了不用单击TAB标签来切换标签页的方式,即用鼠标移入移出的方式切换,这里也就不再介绍。还有一种通过输入内容来定位标签页的,一种加载页面自动轮换标签页得,一种可在原型生成后手动添加TAB标签的这三种效果,也会提供一些TAB标签的样例。

首先说一下加载页面自动轮换页面的效果,这个和幻灯片的效果几乎一样,只不过展现形式上不一样而已,设置方式就是通过OnPageLoad事件,让页面加载的时候即开始切换动态面板的状态,并设定每个一段时间切换一次,全部TAB标签都切换完毕后重新加载页面,又会重新开始,这样就会有循环的效果。原理同幻灯片效果,主要应用在类似新手引导,功能介绍等设计效果上,如现在流程的社交网站的新手教程,软件功能的介绍页面等。

通过输入内容来切换标签的效果应用的不是很多,到目前还没有碰到过,这个例子也是在别人分享的设计实例里看到的。这里分享一下,也算是一种新的设计思路,至于应用,只要掌握了方法,自然用到的时候能够想起来。实现原理是通过判断输入内容来达到切换状态,也即用单行输入框的OnKeyUp事件来触发。这里主要是要控制输入框在输入完毕后立即清空且设置焦点在输入框上,以便下次输入,大家可以看一下源文件,就明白了。

最后一种就是新增TAB标签的效果,根据特定的条件,在原有TAB标签上新增出一个TAB标签页,这个效果的应用是比较广泛的,只是现在很多设计会绕开这种应用,因为这个等于是开放给用户自定义了。实现原理是预先设置动态面板就是四个状态页,只不过前三个状态页都只有三个TAB页签,第四个状态有四个TAB页签,这样默认将第一个状态页显示出来的时候是少一个页签的。再在第四个页签处设置一个隐藏的页签,控制其显示属性,等到触发加页签的事件时,使其显示出来,这样加载到第四个状态页后再切换至其他三个状态页,也就都有4个状态页签的效果了。

这里示例中还添加了给新增页面自定义名称和内容的功能,这个与前面讲变量赋值的功能类似,就是通过变量的中介作用,在组件间相互传输值。通过添加标签来触发,先显示设置名称和内容的动态面板,然后才开始新增TAB页签的过程。整个实例用到了多次动态面板,稍显复杂,不过实现的功能是比较有应用性的,只要逻辑清楚,设置起来就没有什么问题。

TAB标签的应用很广泛,因此也会衍生出很多不同的效果,这里只是介绍了其中的一部分,欢迎大家一起探讨。

示例在AxureRP 5.5版本下调试通过

 

点此查看演示

点此下载源文件

相关TAB标签样式示例请于本站AxureRP资源下载处下载



无觅相关文章插件,快速提升流量

“AxureRP教程–TAB标签使用”2 条评论

除甲醛 | 2011-08-9 07:42 |
commenter

AxureRP是什么..

commenter

一款原型设计工具