用axure rp 6.0版本演示系统菜单栏目折叠交互效果

发布:xueshitianqian | 分类:产品经理 | 引用:0 | 浏览:

27 May 2011

        最近吧公司几个项目产品原型图都做完了,目前就跟踪UI、前端、技术开发一些琐事,有时间就在逛逛Webppd论坛,看看axure 有那些更多好玩的交互东西可以练练手,刚才又发现一个好玩的东西。特别是在设计系统后台产品的时候用的最多,设计菜单折叠和展开的效果。废话不多说了,先说说具体操作步骤已备有用。

 一,母版中设计栏目菜单和导航部分(做系统的产品经理我想都知道用母版来设计页面重复的部分以后需要修改起来比较方便,不用每个页面去修改直接修改母版然后导入即可。)

使用动态面板,画三个菜单栏目的大小区域,然后在动态标签中设置栏目具体名称和子栏目的名称,也可以直接在母版中添加树节点。如下图所示:

二,设置标签中的栏目一、栏目二、栏目三和子栏目

对栏目一设置,双击栏目的动态面板,就弹出设置栏目名称框,输入名称:栏目一和子栏目方便后面使用,在动态面板管理器中双击设置的“栏目一”,选择配置动作:选择该栏目下的子栏目即可。对栏目一交互设置如下图:

还没有完哦。继续设置栏目一下的子菜单,注意:子菜单需要再加一个动态模板,设置子栏目内容。选择配置动作:选择下一个主栏目(栏目二)。如下图:(这里移动距离设置的140根据菜单长度设置。)

设置完展开菜单(动态面板显示时候——onshow)的交互效果,还需要设置一个关闭菜单(动态面板隐藏时候——onhide)的交互效果。选择配置动作:选择下一个主栏目(栏目二)。如下设置子菜单的交互效果:

注意:这里设置距离的时候,用的是负数(-140)

三,栏目一的交互折叠效果基本完成了,同理栏目二同样设置。栏目三(最地下一个栏目)不需要设置子栏目的效果。直接设置栏目三的切换可见性动作即可。

这里还没有结束哦。注意:回到母版中,对中间的栏目二设置跟随当前面板移动,否则在折叠的切换的时候,底下的效果不会紧跟着移动。在配置选择中:选择紧跟这个栏目的下一个栏目设置如:设置中间栏目二的时候,配置动作选择栏目三,动作跟随当前面板。

这回终于结束了,哈哈。根据自己的按照webppd上的朋友操作,自己来设计了一个菜单栏目的设计步骤,有兴趣的朋友可以留言一起交流学习。徐倩SEO博客 www.hongren.org

下载rp原件包(菜单栏目折叠效果)

axure6动态面板跟随移动.rar

  • 相关文章:

37评论 - 用axure rp 6.0版本演示系统菜单栏目折叠交互效果

Avatar

whya7436

2013-1-10 18:44:23

Haha之前,婚姻,家庭,收入等,所谓的完美匹配,结婚不到一年的婚姻,但“不小心”触礁,所谓的“意外”我和丈夫是适当的我。对于他来说,可还清。我们两个属于外人的品性温和,不关心,不争强好胜,它可以说是属于类似性质。从小型的家庭背景的两个人,有没有什么特别大的起伏的经历,和一个孩子,很多80后买不起对方。卷扬机
我前男友的背叛,和儿童家庭的压力我的教育,是我自己缺乏自信,感情没有信心,这样的爱情,我不关心,而是选择了结婚,但女子发现了一个缺乏信任,提到了几乎所有你的书会犯愚蠢的错误,我已经做了。我们争取明显的婚姻,连同我们的角色转换,我的体重越来越轻,直到两个月前爆发的冷战,已经通过了所有的争吵,他应该......83Haha

Avatar

安踏官方旗舰店

2012-7-29 12:00:24

我觉得还好吧12256

Avatar

博洋家纺怎么样

2012-7-13 19:51:50

我觉得还好吧71982

Avatar

阿札女包

2012-7-12 16:48:04

http://aza.lygyzmj.com专门支持原创文章

Avatar

chanel香水

2012-7-10 19:58:25

爽。。我都羡慕了。http://www.daycw.net

Avatar

456游戏

2012-7-8 21:57:01

楼主,太爱你了。http://www.28s8.com

Avatar

gxg男装

2012-6-25 8:53:14

专程来顶你raiqp

Avatar

香奈儿香水价格

2012-6-18 15:23:42

专程来顶你xgcng

Avatar

汽车防雨罩

2012-6-18 14:53:31

专程来顶你vuezj

Avatar

篷房租赁

2012-6-15 4:44:10

拜读了。

Avatar

汽车遮阳罩

2012-6-14 20:54:35

304616401dayrw

Avatar

天猫网首页

2012-6-14 18:42:08

我觉得还好吧19304

Avatar

天猫网首页

2012-6-10 21:59:08

我觉得还好吧01374

Avatar

ck香水官网

2012-6-5 15:26:10

文章不错00322

Avatar

广州海尔空调维修

2012-5-21 7:56:17

感谢楼主的精心整理,支持您。

Avatar

无锡一级建造师

2012-4-13 17:09:38

成功和失败就在于一念之差

Avatar

无锡理财规划师

2012-4-10 18:06:38

博客真是牛气

Avatar

注册宁波公司

2012-1-4 15:24:41

支持。。。。。。

Avatar

学习学习

2011-12-11 19:19:52

学习了

Avatar

纳帕佳

2011-12-7 14:45:28

刚刚学,很多东西都不是很清楚,现在开始好好学了~~、

Avatar

团我网

2011-10-29 9:51:54

这效果不错

Avatar

银川最好的婚纱摄影

2011-10-14 14:20:00

不错这效果还是很好的

Avatar

银川婚纱摄影工作室

2011-10-11 13:21:44

过来看看,还是学习到了

Avatar

www.hao4444.com

2011-9-19 2:32:08

www.hao4444.com新站如何能让百度快点收录呢,好几天了。楼主写的这么专业的文章,帮忙看看吧

Avatar

杭州搬家公司

2011-9-3 15:18:33

过来看看。支持下。

Avatar

百草梅灵散

2011-8-31 11:25:00

楼主是做 软件开发的?
http://www.meilingsan.com
http://www.meilingsan.com/sitemap.xml
http://www.meilingsan.com/rss.xml

Avatar

北京SEO

2011-8-17 21:24:17

写的专业性太强啊。学习一下,

Avatar

水曲柳

2011-8-2 10:43:40

看的不是很明白 进来学习学习~~

Avatar

如何接吻

2011-7-27 22:41:22

www.yao363.com 支持老师

Avatar

福州婚纱摄影

2011-7-19 14:36:28

支持下

Avatar

商标查询

2011-7-14 11:00:31

我进来学习一下

Avatar

广州佳和胃肠医院

2011-7-2 15:06:47

很好很强大,不过都不懂,嘿嘿

Avatar

双桥生活论坛

2011-6-21 22:41:21

不错啊。很好。

Avatar

依风

2011-6-3 15:10:46

不错,我也是从seo走上交互设计的

Avatar

美女

2011-5-29 17:42:33

看不明白,支持下

Avatar

高丝雪肌精官方网站

2011-5-29 13:08:28

恩 写的不凑 支持你了

Avatar

seo

2011-5-27 23:02:06

过来观摩观摩,看不懂。

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于

徐倩产品设计博客www.hongren.org,SEO技术交流学习、网站运营、网络营销、产品设计。在互联网这条长路上找到产品方向作为以后职业目标,博客上点点滴滴记录工作三年来的心路历程。也希望在此结交更多志同道合的朋友一起交流学习。

我的图片

日历


控制面板

最近发表

最近留言