AxureRP教程–PATH菜单效果

最近网上流传的牛人利用纯CSS代码制作出来的PATH菜单效果,看上去很炫丽,然后就引发了利用AxureRP来模拟制作这个效果的讨论,WEBPPD的创始人也说利用AxureRP是可以实现这个效果的,因此我就尝试了一下,制作出一个比较蹩脚的PATH菜单效果,与大家分享。

网上流传的是用CSS制作的,可以很流畅的实现展开收缩效果,效果很好,确实很厉害。用AxureRP来制作的话会有两种比较可行的办法,一种是渐隐渐现的控制显示隐藏或者控制移动的效果,另外一种就是利用动态面板的状态改变来实现,可能还有别的办法是我没有想到的,有想到的朋友可以分享一下,这里举例用的是第一种控制显示隐藏的方式。两种方式其实都要靠动态面板来实现,这里推荐用AxureRP 6.0来做,因为AxureRP 6.0版本的动态面板自带了很多过渡效果,这个是6.0以下版本没有的,实现起来效果会更好。实现原理基本上就是控制不同大小不同透明度的动态面板的显示隐藏,然后控制好不同的等待时间,使之以先后顺序显示隐藏。介绍的例子更简化一些,没有设计不同透明度的控制,只设计了显示大小。

最终的显示效果如上图所示,五个图标可以设计成不同的菜单。按钮也是用动态面板来控制,分别为展开按钮和收缩按钮两个状态,相应的展开效果和收缩效果完成之后做状态切换。图标都是用图片组件来做的,每个图标分一大一小两种,大的就是最终的显示效果,小的则用来做中间的过渡效果,因此图标总共用了十个动态面板来实现。

设置时初始状态十个动态面板先全部设置为隐藏,然后通过按钮的单击事件来控制动态面板的显示隐藏动作。这里有一个显示顺序的问题,例子中的这种排列可以有从左到右,从右到左,从中间到两边这样三种常见的显示顺序,也不排除有的人喜欢间隔显示的,显示顺序决定了再设置动作时控制的顺序和等待时间的多少设置,因此一定要一开始就决定好显示顺序,然后再开始设计动作间的先后顺序,注意等待时间的设置和动态面板自身过渡动画效果时间的分配,尽量让整个效果过渡起来自然就可以了。

上图左侧是展开按钮的动作设置,右侧是收缩按钮的动作设置,详细的可以参见源文件里面的设置。

其实这个PATH菜单效果也就是追求一种比较炫丽的显示方式,不过这个菜单展示样式确实是蛮新颖的,可以在产品设计当中考虑一下。这个效果设计原型的难度可能不是很大,可能在开发实现过程中会有些问题,特别是前端脚本的编写,在设计实施的时候需要先和技术沟通一下是否可行。

这个效果就介绍到这里,好像HPX那边有发起PATH菜单用AxureRP设计的比赛,大家可以去看看,对这个效果有什么想法或者问题的,大家可以到IT民工论坛中提出,也可以在下方回复,多多交流分享。

示例在AxureRP 6.0下调试通过

 

点此查看演示

点此下载源文件

即日起,大家如有原型设计方面的问题交流,可至IT民工论坛提出,大家共同学习,共同进步。



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

“AxureRP教程–PATH菜单效果”2 条评论

air max 2012 | 2011-12-24 16:23 |

厉害厉害!

itmghyl | 2012-11-27 23:21 |
commenter

让弹出的那几个小控件初始都处于同一位置(设为隐藏),通过点击另外的部件控制这几个小控件的移动(设置控件为显示),移动方式设置为弹性;再点击部件使这几个控件回到初始位置(再次设为隐藏),如果时间设置的好,做出的效果非常逼真,但是我做出来的感觉没原声PATH那么好,可能是部件的外观问题。。