AxureRP教程–固定工具栏菜单栏效果

固定工具栏菜单栏效果在对外产品上设计的不多,最常见得应用是在一些产品的管理后台,如常见的CMS系统的管理后台,像shopex,ecshop这样的,而在对内的产品设计上应用的会比较多一些。这个效果就类似Excel里面的固定抬头,无论下面怎么滚动,抬头的位置都是不动的,这样就方便用户随时的确认。所以这个效果一般常用于设计报表展示页面,或者是一些系统设置页面。之所以这个效果在对外产品上用的不多,有一个可能的情况是,这个效果在代码实现的时候最常用的方法是用IFrame框来内嵌,这样会降低首页被搜索引擎抓取的几率,自从WEB 2.0之后,大都改成DIV来做了,但内部产品没有这样的问题。这只是个人的看法,有点扯远了。

用AxureRP来实现固定工具栏或者固定菜单栏的效果,原理其实很简单,用的也是frame的概念,就是用内嵌框架组件(Inline Frame)来加载页面,而把需要固定的部分放在这个组件外围,这样内嵌页面上下左右滚动的时候都不会影响到组件外面,也就实现了这个效果。

如上图所示,制作了一个简易的固定工具栏和固定菜单栏的演示效果。默认内部框架组件是有边框的,可以在右键菜单—编辑内部框架—边框开关中设置其显示还是隐藏,这里设置为隐藏,这样看上去效果会自然一些。左边为菜单式导航栏,点击可以在主体页面切换展示内容,可以注意面包屑导航的变化,高级一点的也可以把面包屑导航也放到外面去,这样滚动的时候就不会隐藏掉,可以随时告诉用户现在是在哪个页面;上面是一排三个图片组件,用来表示操作的工具栏按钮,点击能够切换。

应该说这个效果实现起来是比较简单的,就是可能不知道去用这样的方法来实现。这里需要注意的一个地方是,内部框架组件的设置宽度和多要加载的页面的宽度要有一个差额,大概是一小格左右,如果页面宽度过宽,就会出现横向滚动条,当然也可以在内部框架的右键菜单–编辑内部框架中设置是否需要滚动条的显示;如果不需要横向滚动条,就需要注意设置两者的宽度。

设计一些内部信息化系统产品的时候应该会有用到这个效果,示例有点简洁,大家如有更多更好的想法,可回复提出或者至IT民工论坛里提出。

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

 

点此查看演示

点此下载源文件



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

“AxureRP教程–固定工具栏菜单栏效果”14 条评论

commenter

新年快乐!!!

commenter

新年快乐!

commenter

快过年了,博主还有时间更新文章…我的中国培训网http://www.jinriyouke.com都好长时间没有管理了。

commenter

感谢楼主精彩分享,谢谢!

dgdnuefugv | 2012-02-4 09:33 |
commenter

这个想法挺不错的

keutmqjkeh | 2012-02-4 18:09 |
commenter

嘿嘿,这个还挺好用的,很多地方都能套用

gltujtoldz | 2012-02-5 02:56 |

谢谢分享!

mrydofqvnt | 2012-02-5 12:18 |
commenter

多谢分享!

fycmrsbudy | 2012-02-5 21:07 |
commenter

这个组件很少用到

iplcmnentk | 2012-02-6 05:51 |
commenter

不错,虽然没用过这个组件,有知道了一种新思路

juqhowonwv | 2012-02-6 14:13 |
commenter

同楼上意见

产品排行榜 | 2012-02-13 13:23 |
commenter

顶一个,支持一下
http://www.taojje.com

commenter

看看博客.写得不错http://zhaodian8.com

网站 | 2012-03-30 13:58 |
commenter

帮我看看网站,不知道怎样优化