Axure教程:PC端导航栏吸附效果

01 前期准备

软件:Axure 9.0

硬件:Windows/Mac电脑

思考:实现吸附效果前的思考(可参考下图)

产品经理,产品经理网站

02 教程

(1)制作PC页面如下图(本文以考拉海购为例)

产品经理,产品经理网站

(2)将顶部搜索区组合并命名,右键将组合设置为顶层,主要是为后续针对搜索区实现吸附效果。

产品经理,产品经理网站

(3)接下来,对页面设置窗口滚动时的交互,这时候要考虑两种情况:

  1. 保证能够正常滚动所有内容
  2. 固定搜索区内容,只滚动下方内容

(4)先确定好搜索区在你设置页面的x,y的位置(我这里显示的是x=79 ,y=171)

产品经理,产品经理网站

(5) 我们针对页面选择交互【窗口滚动时】,并添加情形1如下图,意思就是当我们滚动的时候超过搜索区的高度,我们就执行吸附效果的交互

产品经理,产品经理网站

(6)添加情形2如下图,因为我们这里只有两种情形,可以直接不添加条件,会默认设置为情形1的对立条件,该效果就是为了实现当页面滚动回顶部的时候,让搜索区回到它本来的位置上。
产品经理,产品经理网站(7)再次将搜索区置于顶层,预览查看吸附效果,反复调整,直到满意为止,我们就做好了。

产品经理,产品经理网站

结语

这次我们用到的是窗口函数,有的同学可能会问,为什么不用动态面板,动态面板其实更适合广告位等固定位置的滚动展示,比如一直保持在底部或者顶部。本次效果主要是为了让大家更加熟悉窗口函数的使用。

 

本文作者 @蓝汐 !

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部