Question

Axure怎么制作滑动滑块原型？

Answer 1

滑块滑动的原型，在产品设计里面也不少见！对于很多新手小伙伴而言，可能都十分好奇怎么制作！因此，接下来将为大家分享Axure制作滑动滑块原型的教程！入门Axure做产品经理，就上来学习！精选多套优质Axure自学视频课，综合全面的教会大家Axure软件基础操作以及原型交互，让你可以理论+实践全面发展~

Axure制作滑动滑块原型步骤：

（1）首先在Axure中画出一个简单的滑块

（2）将原型滑块右键设置为动态面板（因为动态面板才可以设置拖动和滚动事件）

（3）给动态面板设置拖动事件，拖动时让滑块动态面板水平移动

（4）完成，进行预览

我们预览时会发现滑块会超出矩形线段的范围，这并不是我们想要的效果。

（5）设置拖动的边界（演示中左侧大于40px，右侧小于610px）

（6）操作完成，我们预览来看一下效果吧

Axure中的滚动事件

应用场景如：长页面的显示；线上滚动是出现置顶按钮；滚动切换Tab等

操作方式：pc端：鼠标滚轮上下滚动手机端：上下滑动即可

本次我们以Chrome的Infinity插件切换效果为例：

（1）首先在Axure中画出一个简单的线框图（又懒又强迫症，我就先截图了）

（2）调整第一页和第二页的位置后合并为分组，同时创建一个动态面板

（3）调整动态面板的大小，这是很重要的一步，如果你之前的尝试没有成功，那么很可能是这步的问题。滚动只有动态面板可以上下滚动时，也就是动态面板区域要比内容小。故我们将动态面板调整为比内容小1px的高度，和合适的宽度。（没有出现滚动条的可以在动态面板上右键选择显示滚动条）

（4）给动态面板设置滚动事件，分别设置向上和向下滚动时移动到我们想要的位置，为了不那么僵硬我们增加一个弹性动画，时间500ms。

（5）现在我们想要的效果已经完成了，但是作为完美主义，我们最后吧滚动条隐藏一下吧

（6）我们期望的效果已经完美完成了，最后我们顺便把上面提到到拖动事件也加一下吧。分别设置向左拖动和向右拖动是移动到对应的位置，同时设置拖动时随着拖动一起移动（边界左右稍微增加一点距离，效果会更好哦）

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