Question

Axure如何做PC端导航栏吸附效果原型？

Answer 1

当我们浏览网页时，我们会发现顶部的导航栏保持不变，而下方的内容会随着滚动条的拖动而滑动，这种效应被称为顶部吸附效果。对于产品原型设计人员来说，制作这种效果是必备掌握的！所以，接下来将为各位新手小伙伴分享Axure制作PC端导航栏吸附效果原型教程！入门Axure做产品经理，就上来学习！精选多套优质Axure自学视频课，综合全面的教会大家Axure软件基础操作以及原型交互，让你可以理论+实践全面发展~

Axure做PC端导航栏吸附效果原型步骤：

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

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

（3）接下来，对页面设置窗口滚动时的交互，这时候要考虑两种情况：

保证能够正常滚动所有内容

固定搜索区内容，只滚动下方内容

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

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

（6）添加情形2如下图，因为我们这里只有两种情形，可以直接不添加条件，会默认设置为情形1的对立条件，该效果就是为了实现当页面滚动回顶部的时候，让搜索区回到它本来的位置上。

（7）再次将搜索区置于顶层，预览查看吸附效果，反复调整，直到满意为止，我们就做好了。

好咯，关于“Axure如何做PC端导航栏吸附效果原型？”的内容今天就分享到这里了，希望你能从中学到东西哦！Axure学习，的Axure相关文章、Axure自学视频课都是不错的选择！文字理解能力强的话，个人推荐Axure文章学习；但是想要专业学习Axure的话，还是推荐大家选择Axure自学视频课系统学！不仅可以更加清晰有条理，大家也都能够利用自己的碎片化时间学习！