AxureRP教程–红绿灯效果

红绿灯效果在实际设计当中是没有什么用的,因为红绿灯一般都只会横在马路上,而不会出现在网页上,设计这个主要是娱乐一下,不过在设计过程中发现,这个实例要是转化一下思路,还是可以应用在网站设计中的,比如在线问答的时间控制,页面切换的倒计时控制等,因为实现原理是一样的,只不过显示的内容会不一样,会更加丰富而已。

这个效果在前面介绍AxureRP的单选框复选框组件应用的时候有提到,当时没有拿出来详细说,用AxureRP来实现这个效果,主要还是要熟悉各个组件之间的配合使用,以及各组件自身的属性作用。实现原理是利用单选框组件的编组功能,使红黄绿单个选项只能选择一个,再通过动态面板的状态转换控制不同选项下的页面显示,里面的倒计时效果前面已有介绍,这里利用了页面的OnPageLoad事件控制效果的自动运行。

?

这个例子里面涉及的功能都有介绍过,主要是理清逻辑,各组件间相互配合的顺序,整合在一起就是一个完整的效果了。马路上的红绿灯的倒计时是放在灯的右边的,做的好一点,可以把单选框替换成图片,用图片来标示灯亮灯灭,然后旁边加上倒计时,这样就更逼真了,不过那样也会更复杂,因为元素变多了,就更需要注意配合顺序。

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

《原型设计》微电子杂志? 点此订阅

点此查看演示

点此下载源文件



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

评论已关闭!