一天上手Axure RP (2.3) Web案例

2016-06-23 本文已影响219人湖边的阿曦

Web案例的最后一阶段，相对要复杂些。不过不要担心，相信自己，稍微思考下就能理解。

STEP 1 . 准备内容

因为内容较多，这就不一一讲如何添加的了，相信看了前面操作的同学能轻松搞定。这次我们稍微把内容排多一些，这样才能有Y滚动效果。最后效果如图：

感觉好真

当然，内容可以再多些。

分析：当页面往下滑动时，导航栏会离开我们的视野。这并不是我们想要的，我们希望它一直固定到顶部。由此可见，触发事件应该是页面滚动，然后来改变导航栏的坐标位置，让它一直在顶部(y=0)。

1. 将要固定的导航栏，整块转为动态面板。

2. 我们需要监听页面(Page)的"OnWindowScroll"事件。当往下滑动超出(大于)导航距离最顶部的距离时(y=44)，导航的y值就要等于滑动的垂直距离，这样就可以保持导航一直出现在浏览器的顶部。

OnWindowScroll

y设定的值是"[[Window.scrollY]]"，那么这个"[[Window.scrollY]]"是从哪来的呢？

在值文本框后面有个"fx"的按钮，点击后可以看见一个值编辑页面。在这里，我们可以调用一些Axure为我们提供的[变量]或[方法]。可以看见我们这用到的Window.scrollY变量。（在视频中，我们有讲到如何直观的去查看这些值）

Window.scrollY

3. 当scrollY不大于44的时候，我们应该把导航放回原位。

Interactions

这里我们使用"Inline Frame"组件，来链接到外部视频/网站，显示在我们原型中。

Inline Frame

我们将链接设置其中：

link to an external url

把它转为动态面板，并固定在浏览器中央。

Pin to Browser Center

"Set Hidden"，在页面加载完后显示，以模态形式。我们需要Page的"OnPageLoad"事件。

Show Video

这样，在进入该页面时就会自动显示视频并播放。点击周围任意空白处则隐藏视频。

Result

这样，Web案例就算完毕了。感觉怎么样？欢迎通过任何方式给我反馈哟。

看视频可以看到，更多内容，更细节的操作哟。

工具能表现你的思考结果，甚至过程，过分依赖工具则会束缚你的思维。