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

续:《一天上手Axure RP (2.1) Web案例》,《一天上手Axure RP (2.2) Web案例》。

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


STEP 1 . 准备内容


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

感觉好真

当然,内容可以再多些。


STEP 2 . 固定导航栏


分析:当页面往下滑动时,导航栏会离开我们的视野。这并不是我们想要的,我们希望它一直固定到顶部。由此可见,触发事件应该是页面滚动,然后来改变导航栏的坐标位置,让它一直在顶部(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


STEP 3 . 播放外部视频


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

Inline Frame

我们将链接设置其中:

link to an external url

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

Pin to Browser Center

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

Show Video

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

Result

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


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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容