Axure教程：滑块验证

需求分析

根据我们在上面看的效果，滑块验证的需求如下：

（1）初始状态：滑块在最右侧，并且显示“ >> ”，“ 下一步 ”按钮禁用（灰色）；

（2）拖动状态：当使用鼠标拖动的时候，滑块随着鼠标移动，并且滑块移过的地方用绿色覆盖；

（3）当滑块移动到最右侧时候，滑块上面显示”ok”，按钮变成可用（白色）；

（4）如果滑块在移动的过程中，没有移动到最右侧，滑块退回初始位置，滑块轨道还是被灰色覆盖。

设计思路

（1）这个案例需要用到滑块拖动，那需要动态面板实现滑块；

（2）滑块只能在滑道里面移动，需要设置滑块移动范围不能超过滑道；

（3）滑道背景的的改变，可以在滑块后面设置一个绿色的背景矩形，背景矩形位于滑道的上层，当滑动移动端的时候，改变这个背景矩形的大小。

原型设计

（1）拖动3个矩形放入画布，分别是滑块(slider)、滑道(track)、背景(back)，这三个矩形的层次从前往后分别是滑块、背景和滑道。

（2）把滑块slider转换为动态面板。

（3）拖入一个矩形作为“第一步”按钮，并且设置该矩形为禁用。

（4）当然我们还要拖入一个输入框，作为手机号码输入框。

到此，原型就设计完成，最后的效果如下：

交互设计

（1）设置动态面板slider的移动中事件，当slider移动中的时候，设置滑块slider跟随移动，并且设置绿色背景back的尺寸跟随变化。

（2）当拖动结束时候，判断是否已经拖动到最右侧，如果拖动到最右侧，就把“下一步”按钮设为可用状态。

（3）如果拖动结束时，没有拖动到最右侧，则滑块slider位置复原，背景back尺寸复原。

（4）设置按钮下一步的交互样式，当禁用的时候，用灰色填充。

到了这步，滑块验证的功能就算做好了，同学们赶紧去试试吧。

本文作者 @马白龙

版权声明

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