AxureRP教程–自适应菜单效果

自适应菜单在一些交互效果比较好的网站上应用的比较多,这种自适应的效果也不一定用于菜单,也常见用于产品的介绍,可以每次切换一部分内容,方便用户只聚焦于当前所展示的内容。自适应的效果一般就是在展示一组内容的时,其中一部分内容展开的时候,同组的其他内容会自动收缩,以腾出空间来展开内容,也即在固定的空间大小内,可随意切换显示的内容。个人感觉这种效果比较适合应用在手机上,因为手机屏幕就那么大,展示合适的内容即可,一般网站着陆页都是内容很多的,不过菜单项不易太多,否则收缩的地方会显得很拥挤,就不好看了。

自适应菜单效果的实现也需要借助动态面板来实现页面切换,这里介绍两种方式,一种是利用动态面板的状态切换来实现,这种也是最简单;另外一种是从官方提供的样例里面提取出来的,用的是动态面板的移动特性。对于刚学习AxureRP的人来说,控制动态面板的状态切换远比控制其移动来的简单易学,因此个人推荐第一种方式。

第一种方式的实现原理是依据菜单项的数量,比如有三个菜单项,就设计三个状态页,每个页面展示相应的内容,然后控制菜单项的单击事件为切换到相应的状态页即可。应该来说很简单,之前有多个例子都用到了这种方式,如果要有延时移动的视觉效果,只需参照《AxureRP教程–伸缩效果》那样多设计几个过渡状态页,并设定合适的等待时间来切换即可。

第二种方式是通过控制动态面板移动来实现的,因此比较容易实现延时移动的效果,皆因每次的位移量可以比较容易的进行控制,这个例子的实现方式比较复杂,好在有英文的实现步骤说明。实现方式就是依据步骤来做的,用的是单选按钮的OnFocus事件,好像国外的设计师在做这种效果的时候比较喜欢用这种方式,这种方式给别人看起来会很复杂,很高深的样子,其实是有比较简单的实现方式的,多的就不介绍了,有兴趣的朋友可以看源文件。

这里也建议大家在看源文件的时候把动态面板的查看视图打开,皆因确实动态面板嵌套的比较多,或者直接查看那个步骤说明会比较简单。

这个自适应菜单的效果是固定空间大小的,因此在应用的时候可能还是会有一些限制,因为首先需要一定的空间,其次就是这部分空间的摆放位置,用来做两侧的导航菜单的时候可能会稍微好一点。

 

点此查看演示

点此下载源文件



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

“AxureRP教程–自适应菜单效果”有1条评论

loretta | 2012-08-30 17:27 |
commenter

好桑感 第二种方法还木有看懂 不过做的好精致 回头再研究下~