Question

Axure如何制作拖动滑块解锁效果原型？

Answer 1

我们很多时候在打开手机或者是APP登录、网站注册登录时都看见过需要输入验证码或者拖动滑块解锁才能进入的情况，而将这样的形式放回到Axure原型制作里面，你会制作出来吗？今天将教大家如何Axure制作拖动滑块解锁效果原型，感兴趣的就学习起来！学会Axure，人人都是产品经理！这句话，想必对于准备自学Axure或者正在自学Axure的小伙伴们来说并不陌生！而想要完全掌握Axure成为产品经理，可能也并非容易，入门简单，但是交互原理可并不简单！因此提供了系列的Axure自学视频课，可以全面的学习Axure软件基础以及交互原型案例实操~

Axure制作拖动滑块解锁效果原型步骤：

01需求分析

首先先来看一下这个具体的需求是什么？

需求比较简单：滑块可以自左向右水平滑动，滑动过的地方显示为绿色条块；当滑动到最右端的时候显示验证通过，并启用下一步的操作按钮可以继续进行下一步操作。

从上面的描述，我们看到有2个关键点：一个是滑块可以在一定范围内滑动；二是滑块到达终点时会触发文字显示，按钮启用。当然，这里最关键也最难实现的点是第一点。

那这个需求跟Axure怎么关联起来呢？

没错，仍然是动态面板。小伙伴们可能会说发现Axure动态面板还是很强大的呀！确实如此。

02Axure关键点分析

这里的动态面板有2个，一个是滑块，另一个是滑块滑动范围

1）先说滑块滑动范围用到的动态面板

因为滑块滑动过的地方显示为绿色，故需要设置2种动态面板来表示两种颜色

这里需要特别注意，绿色状态的x轴坐标轴为负数，表示默认是看不到

2）接着说滑块动态面板

滑块是有移动范围限制的并且只能水平移动，其中范围为上面1）动态面板范围之内，最右侧的地方我们可以通过用热区来表示

滑块范围

交互条件为鼠标拖动时，范围为小于等于热区的x轴坐标轴，滑块也随着移动

当滑块移至热区的x轴坐标轴时，则显示验证通过字样，并且启用下一步操作按钮

以上就是关于“Axure如何制作拖动滑块解锁效果原型？”的全部内容精彩分享了，希望能够帮助到你！更多Axure精彩分享，尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话，那我不妨建议你直接学习体验一下我们的Axure自学自学课，专业讲师授课，可以从基础的知识点开始学起，逐步深入掌握哦~