Axure制作顶部吸附交互效果的网页原型教程

2018-12-1910:09:12原型设计Comments3,706 views字数 666阅读模式

浏览网页时候，会发现网页上面导航栏一直保持不动，而下面的内容会随着滚动条的拖动而滑动，这个效果就是所谓的顶部吸附的效果，该怎么使用axure制作这个交互效果呢？下面我们就来看看详细的教程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

1、首先新建一个空白页面，在工作区域拖入本次要使用的元件元素，几个矩形和几个动态面板就可以了，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

2、然后我们对元件元素的样式进行调整，并对里面的描述文字进行编写，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

3、这一步需要对两个动态面板的名称进行设置，一个是上面的信息展示，一个是下面的导航信息，如下图所示。命名没有要求，想叫什么都可以。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

4、打开动态面板，将两个矩形复制到动态面板中，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

5、下面一步需要将两个动态面板的固定到浏览器这一项进行设置，水平要固定到居中位置，垂直要在上，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

6、元件相关样式及属性设置完成后，开始对交互事件进行设置，这里需要给页面加入交互事件，首先是第一个判断条件，使用函数判断窗口距离，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

7、然后设置第一个动态面板移动的绝对位置，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

8、然后设置第二动态面板隐藏，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

9、同上的方式，做第二个判断条件，并对两个动态面板的交互进行设置，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

10、最后一步，因为是窗口滚动的效果，所以需要再拖入一个矩形，并将矩形拉长一些，这样浏览的时候窗口就有滚动条了，如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

11、好了，工作准备完成，f5预览一下效果，试着滚动鼠标，这些信息栏会消失，导航栏会吸附到最上面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

Axure制作顶部吸附交互效果的网页原型教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

以上就是Axure顶部吸附交互效果的制作方法，希望大家喜欢，请继续关注菜鸟学院（www.cainiaoxueyuan.com）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8745.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/yuanxing/8745.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定