徐倩 发表于 2011-5-25 15:21:35

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

一,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博客,http://www.hongren.org/post/290.html

预览HTML锚点交互效果

eggtart 发表于 2011-5-30 22:10:02

webppd:party谢谢~~瓦回去试试看~

一穷二白 发表于 2011-6-3 22:48:23

学习了!

pooh1217 发表于 2011-7-20 14:59:28

好好研究,研究。。。

kkevin 发表于 2011-7-27 17:17:00

当我设置跨页面跳转时 按照图示步骤设置完时不能完成跳转,请问原因是什么?有没有原型PR文件可供参考?

风往南吹 发表于 2012-4-18 15:17:28

很好的帖子,谢谢

猫信涵 发表于 2012-4-19 09:25:19

学习了!

hongfan.zhang 发表于 2012-4-24 15:20:37

大概知道了实现思路,研究研究

yj1s 发表于 2012-5-15 15:13:33

学习了!3q
页: [1]
查看完整版本: 用axure rp 6.0版本演示页面锚点见转换交互效果