今天来分享下使用Axure制作拖动滑块解锁这个功能的方法,使用淘宝网的例子来还原制作过程。
如下图:
相信很多人对这个界面都不陌生,这是淘宝网的注册页面,除此之外目前很多网站都有用这种方式来进行验证,当然也有同一种方法不同的表现形式,比如拖动后完成拼图,以防止频繁的非正常请求,进行人机验证。
操作描述:
- 拖动滑块时,滑块水平左右运动,不可超出灰色边框;
- 拖动时,绿色的背景随滑块进行移动;
- 拖动达到最右端时,显示白色文字“加载中”,等待半秒钟后显示白色文字“通过验证”,并且「对勾」图标变为绿色,同时“获取短信验证码”按钮变为可用状态;
- 如果拖动并为达到最右端,滑块则回到初始位置。
01
根据该效果图准备以下元件,其他部分元件仿照淘宝注册页面调整就行,我这里就不逐个列出了。