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

tianzc

[/url]

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

一，axure rp 6.0 版 锚点在同页面上交互设计步骤 1.　先在要加入锚点的地方加入一个“图片映射区域”，如图： [url=http://www.webppd.com/attachment.php?aid=3467&k=1f9f910efd6d6d30c71d97fdb213bd6a&t=1413190599&nothumb=yes&sid=0e1bjirn8Jj%2F69TmEsjHx4TdJcWPd%2Bi8EWkfmkZRhCNFbkQ]下载 (207.42 KB) 2011-5-25 15:21 2.　在要实现锚点跳转的按钮上加到交互动作，动作选择：滚动到图片映射区域。如图： 下载 (74.26 KB) 2011-5-25 15:21 继续设置交互选项。如下图 下载 (112.33 KB) 2011-5-25 15:21 注意：别忘记最重要一步哦。这里我在按照webppd操作的时候出现过的错误。上面的操作步骤虽然基本结束了，但是F5导出原型图的时候，发现点击按钮并不发生锚点跳转。为什么呢？因为Axure的交互之一是视觉上的交互，并非真的如程序js中那种交互功能，我们需要吧页面低端的距离定出来，让整个页面拉长一些，让视觉上看到交互的变化。 如下图所示设置低端的东西出来。才能产生锚点交互的效果哦 下载 (253.31 KB) 2011-5-25 15:21 二，Axure RP 6.0 版 锚点跨页面上交互设计步骤 说明：不同页面间的锚点跳转需要借用一下中间变量。即：当要离开该页面到达另一个页面时，先给该变量赋值为1（或２、或３），然后再跳转到另一页面。接下来在另一页面的“OnPageLoad”里加入交互动作，设置判断条件，当变量值等于1时，跳转到这个页面“海淀学习中心”处。 1.　首页看看变量管理，添加一个变量。（默认会有一个：OnLoadVariable）如图：（这里如果有变量 onloadvariable就不用在增加变量了，记住这个变量单词，后面会对它进行赋值1、2、3来传递给跨页面的锚点位置哦） 下载 (136 KB) 2011-5-25 15:21 2.　对要离开的页面“设置按钮”，给变量赋值。如图：（注意箭头的方向哦，这里要设置两个交互动作，设置一：选择按钮“海淀学习中心”，选交互事件设置用例，在当前窗口中打开连接，设置用例，链接到锚点跨页面的页面如 跨页面-锚点。） 下载 (259.01 KB) 2011-5-25 15:21 设置二，设置变量/部件值，关注用例中的变化和配置动作中的变化，点击配置动作中的设置编辑器，弹出框设置传递中间值。 下载 (165.26 KB) 2011-5-25 15:21 3.　在到达页跨页面“锚点—跨页面”中设置好位置一、二、三的图片映射区域后。在 锚点—跨页面“OnPageLoad”中加交互。如图：      注意：onpageload事件到底在哪呢？是不是再右侧交互区？不是的。看axure 底部有个展开的按钮，原来是在那个里面藏着了。找到位置了进行设置 如下图：（注意箭头的方向就是操作过程。） 下载 (143.35 KB) 2011-5-25 15:21 还有一步别忘记了，设置传递值哦。 下载 (121.75 KB) 2011-5-25 15:21 4.　完成后的“锚点-跨页面”中“OnPageLoad”处的效果。 下载 (162.13 KB) 2011-5-25 15:21 最后，还是别忘记了，控制低端的 组件啊。以上流程结束。大家如果操作过程中遇到细节问题可以留言哦。 徐倩SEO博客，http://www.hongren.org/post/290.html 预览HTML锚点交互效果

锚点跳转交互效果.rar (207.78 KB)下载次数:508
2011-5-25 15:24








收藏分享评分