查看: 22160|回复: 19

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

[复制链接]

0

主题

29

回帖

42

积分

会员

PM

Rank: 5Rank: 5

积分
42
QQ
发表于 2011-5-27 16:39:54 | 显示全部楼层 |阅读模式
尹广磊公众帐号
一,母版中设计栏目菜单和导航部分(做系统的产品经理我想都知道用母版来设计页面重复的部分以后需要修改起来比较方便,不用每个页面去修改直接修改母版然后导入即可。)

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

muban-1.jpg

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

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


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

zlm1.jpg

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

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

zlm2.jpg

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

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

moban-2.jpg

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

0

主题

321

回帖

123

积分

会员

Rank: 5Rank: 5

积分
123
发表于 2011-5-28 08:55:50 | 显示全部楼层
楼主是个厉害的姑娘。

问一下,现在可以有双击的交互动作吗?
我爱策划,喜欢交互,热爱Axure。
深圳产品经理群:154281076

0

主题

321

回帖

123

积分

会员

Rank: 5Rank: 5

积分
123
发表于 2011-5-28 09:28:50 | 显示全部楼层
学会了,感谢楼主。
以前觉得做这种伸缩栏很麻烦,现在发现没那么难。
我爱策划,喜欢交互,热爱Axure。
深圳产品经理群:154281076

0

主题

2

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-6-9 19:12:54 | 显示全部楼层
怎么让子菜单展开和收起来的时候项目一,二,三标题有变化,比如加个上,下箭头之类的?

0

主题

2

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-6-9 19:15:16 | 显示全部楼层
我现在正为这个苦恼,想让菜单任何一个展开的时候,其他栏目收起。但似乎很麻烦,需要帮助^_^

0

主题

14

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-6-10 22:54:41 | 显示全部楼层
学习

0

主题

27

回帖

61

积分

会员

Rank: 5Rank: 5

积分
61
发表于 2011-7-20 16:30:52 | 显示全部楼层
认真学习。。。

0

主题

64

回帖

161

积分

会员

Rank: 5Rank: 5

积分
161
发表于 2011-8-17 10:11:09 | 显示全部楼层
效果不错

0

主题

184

回帖

168

积分

会员

摸索中

Rank: 5Rank: 5

积分
168
QQ
发表于 2011-8-20 14:29:11 | 显示全部楼层
学习了!感谢LZ

0

主题

11

回帖

117

积分

会员

Rank: 5Rank: 5

积分
117
发表于 2011-8-25 08:06:03 | 显示全部楼层
5# henny


这个可以实现,将指示按钮放在两个动态面板里,一个设置显示一个设置隐藏,在切换时就可以有效果了。

面板移动加指示.rp

61.82 KB, 下载次数: 277

0

主题

29

回帖

42

积分

会员

PM

Rank: 5Rank: 5

积分
42
QQ
 楼主| 发表于 2011-9-29 15:49:10 | 显示全部楼层
11# 马玉杰

这个不错,我也学会了。呵呵
徐倩SEO博客 www.hongren.org
千雨日语网 www.qianyuriyu.com

0

主题

5

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2012-10-11 18:59:07 | 显示全部楼层
5# henny


这个可以实现,将指示按钮放在两个动态面板里,一个设置显示一个设置隐藏,在切换时就可以有效果了。
马玉杰 发表于 2011-8-25 08:06


马克 就在找这个 回头学习一下 多谢各位高人

0

主题

1

回帖

96

积分

会员

Rank: 5Rank: 5

积分
96
发表于 2013-2-17 23:53:06 | 显示全部楼层
回复@马玉杰:
首先,非常感谢您,跟着您的范例研究了下,终于做出来了跟您一样的效果。
可是,发现了两个问题,继续探讨:
一、您有没有觉得我们的子菜单消失地有点突兀呢?所以我给加上了淡入淡出500ms的动画
二、您有没有想过,我们的菜单其实初始状态都是应该闭合的而不是打开的呢?呜呜,我前后八个菜单加八个子菜单啊,全按照您的方式试置好了,也达到效果了,却发现菜单的初始状态不应是打开的,而应是闭合的。:'(一个晚上木吃木喝奋斗到现在,还在单位木有回家啊!就是这样的结果啊!!!!呜呜!!!!

0

主题

9

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-2-20 17:41:03 | 显示全部楼层
学会了,感谢楼主,谢谢!

0

主题

4

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2014-3-24 11:21:40 | 显示全部楼层
我也是这样的  真的不知道怎么办啊

0

主题

4

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2014-3-24 11:24:12 | 显示全部楼层
14# skyflier


想问您,这个问题解决了嘛?我也遇到这个问题 很苦苦恼啊

0

主题

4

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2014-3-24 11:29:08 | 显示全部楼层
1# 徐倩   楼主怎么把原始状态改为关闭的呢?

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2014-5-12 16:25:21 | 显示全部楼层
被一个折叠的困扰很久,一直没解决,求大神指导

0

主题

1

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2015-3-26 14:49:15 | 显示全部楼层
1# 徐倩

get the message,tks!

0

主题

13

回帖

13

积分

会员

Rank: 5Rank: 5

积分
13
发表于 2016-1-21 17:22:10 | 显示全部楼层
14# skyflier


你可以在起始状态的时候把栏目一,二,三设置为隐藏,单击后显示出来,就能达到你想要的效果。
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-3-29 10:35

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表