用axure rp 6.0版本演示页面锚点见转换交互效果

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

25 May 2011

           自从转入 产品方向后很少写文章了,今天在博客上看到那么多老朋友来我博客上留言说“一个多月了,咋还不更新文章呢”。徐倩SEO博客真的很对不起这么多SEO圈的朋友了,由于转行了,对SEO关注的不及从前了,这方面的文章也就不写了。现在虽然转做产品了,但是我学习的产品好东西也不会忘记发出来和大家一起分享下,如果有兴趣的朋友也可以按照步骤玩玩。挺不错的一个小玩意、今天想用axure RP 6.0版本演示下锚点在同页面上交互效果和锚点跨页面交互效果。学习这玩意还是从webppd上看到的。很感谢尹广磊的这个交互设计平台,提供给我们这些学习交互设计的朋友不很多学习参考的好东西。

 一,axure rp 6.0 版 锚点在同页面上交互设计步骤

1. 先在要加入锚点的地方加入一个“图片映射区域”,如图:

2. 在要实现锚点跳转的按钮上加到交互动作,动作选择:滚动到图片映射区域。如图:

 

继续设置交互选项。如下图

 

注意:别忘记最重要一步哦。这里我在按照webppd操作的时候出现过的错误。上面的操作步骤虽然基本结束了,但是F5导出原型图的时候,发现点击按钮并不发生锚点跳转。为什么呢?因为axure的交互之一是视觉上的交互,并非真的如程序js中那种交互功能,我们需要吧页面低端的距离定出来,让整个页面拉长一些,让视觉上看到交互的变化。

如下图所示设置低端的东西出来。才能产生锚点交互的效果哦

 

二,axure rp 6.0 版 锚点跨页面上交互设计步骤

说明:不同页面间的锚点跳转需要借用一下中间变量。即:当要离开该页面到达另一个页面时,先给该变量赋值为1(或2、或3),然后再跳转到另一页面。接下来在另一页面的“OnPageLoad”里加入交互动作,设置判断条件,当变量值等于1时,跳转到这个页面“海淀学习中心”处。
1. 首页看看变量管理,添加一个变量。(默认会有一个:OnLoadVariable)如图:(这里如果有变量 onloadvariable就不用在增加变量了,记住这个变量单词,后面会对它进行赋值1、2、3来传递给跨页面的锚点位置哦)

2. 对要离开的页面“设置按钮”,给变量赋值。如图:(注意箭头的方向哦,这里要设置两个交互动作,设置一:选择按钮“海淀学习中心”,选交互事件设置用例,在当前窗口中打开连接,设置用例,链接到锚点跨页面的页面如 跨页面-锚点。)

 

设置二,设置变量/部件值,关注用例中的变化和配置动作中的变化,点击配置动作中的设置编辑器,弹出框设置传递中间值。

3. 在到达页跨页面“锚点—跨页面”中设置好位置一、二、三的图片映射区域后。在 锚点—跨页面“OnPageLoad”中加交互。如图:
     注意:onpageload事件到底在哪呢?是不是再右侧交互区?不是的。看axure 底部有个展开的按钮,原来是在那个里面藏着了。找到位置了进行设置 如下图:(注意箭头的方向就是操作过程。)

 

还有一步别忘记了,设置传递值哦。

4. 完成后的“锚点-跨页面”中“OnPageLoad”处的效果。

最后,还是别忘记了,控制低端的 组件啊。以上流程结束。大家如果操作过程中遇到细节问题可以留言哦。

徐倩SEO博客,ww.hongren.org

预览HTML锚点交互效果

锚点跳转交互效果.rar

  • 相关文章:

34评论 - 用axure rp 6.0版本演示页面锚点见转换交互效果

Avatar

温州棋牌游戏

2012-12-28 19:33:49

嗯,雁荡山茶苑银子 http://www.ydscy.com 100元=250万 确实挺不错561755

Avatar

www.3ghyw.com

2012-12-18 19:26:04

路过看看 学习了,谢谢分享769407

Avatar

teenyen

2012-12-14 19:10:26

路过,分享;千纸百袋网www.teenyen.com专业制作包衣纸、内衬纸、环保袋、购物袋、无纺布袋、防尘袋、牛津布袋、帆布袋和西装套,百年品质工艺,一线品牌口碑,洽谈热线:13817787578,值得期待!408531

Avatar

抗日剧电视剧大全

2012-10-27 6:52:13

思路很好,楼主再接再厉出更精彩的

Avatar

中空玻璃设备中空玻璃生产线铝合金门窗设备

2012-8-15 11:10:09

要铭记 在心,每天都是一年中最美好的日子。中国建材 网建材招商卫浴厨具涂料门招商

Avatar

甲醛检测

2012-8-2 3:43:56

好像哪里见到过。

Avatar

台湾商务签证

2012-8-1 6:21:54

拜读了。

Avatar

www.wangsula.com

2012-6-29 21:48:54

非常感谢您的分享

Avatar

标识设计

2012-6-20 5:21:10

博主真厉害。

Avatar

2012淘宝网女装冬装外套新款

2012-6-19 15:51:03

爽。。我都羡慕了。http://www.ladytg.com

Avatar

海氧之家制氧机

2012-6-17 19:50:41

爽。。我都羡慕了。http://www.laojia365.com

Avatar

淘宝网夏装

2012-6-15 15:45:55

文章不错71491

Avatar

扑克单人操作

2012-6-14 7:56:42

第一次来,留个名!

Avatar

银时代饰品

2012-6-7 22:45:07

304616401omnzf

Avatar

camel骆驼官网

2012-5-31 11:27:32

文章不错03087

Avatar

无锡会计培训

2012-4-14 15:51:42

能学懂的,感觉还不错,学不懂得,有点乱。。。

Avatar

广州格力空调维修

2012-4-13 5:26:28

辛苦了!感谢楼主的无私奉献

Avatar

无锡平面设计培训

2012-4-10 9:10:47

学习了

Avatar

孕妇网

2012-1-3 16:30:36

来了解学习啦。。
孕妇食谱大全www.v77.cc
孕妇装www.go0551.com

Avatar

南京搬家公司

2011-11-20 14:35:07

谢谢分享

Avatar

39dyw

2011-11-17 6:32:44

不错不错,高手。

Avatar

除权买入

2011-11-4 10:44:27

不错,支持一下

Avatar

wushiqin

2011-10-11 21:48:46

低端的组件?在那里操作呢

Avatar

三亚电脑维修

2011-8-10 20:52:38

这次真的不一样了!

Avatar

新夜游戏论坛

2011-8-3 17:39:07

cc540.yxsoo.com 过来支持一下。

Avatar

广州佳和胃肠医院

2011-7-2 15:09:34

好样的,写的不错,支持啦

Avatar

美女

2011-5-27 15:34:53

虚心学习,写的很好

Avatar

尖锐湿疣的治疗方法

2011-5-26 16:42:40

图片映射区域

Avatar

美女图片

2011-5-26 11:41:07

好好虚心学习········

Avatar

213123eqwe

2011-5-26 11:33:33

这么好的帖子,如果将来我再也看不到了,那我该怎么办?那我该怎么办? http://www.zhaomled.com

Avatar

英语笑话

2011-5-25 22:13:46

过来坐坐啦

Avatar

左旋360减肥咖啡

2011-5-25 22:12:33

分享的很棒

Avatar

减肥药排行榜

2011-5-25 22:11:53

来了解学习啦。。

Avatar

高丝雪肌精官方网站

2011-5-25 20:25:13

写的不错 支持你了

发表评论

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

关于

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

我的图片

日历


控制面板

最近发表

最近留言