Axure:拖动滑块解锁进行验证

2019-11-30 导读

导读 : 今天来分享下使用Axure制作拖动滑块解锁这个功能的方法,使用淘宝网的例子来还原制作过程。如下图:相信很多人对这个界面都不陌生,这是淘宝网的注册页面,除此之外目前很多网站都有用这种方式来进行验证,当然也有同一种方法不同的表现形式,比如拖动后完成拼图,以防止频繁的非正常请求,进行人机验证。操作描述:拖动滑块时,滑块水平左右运动,不可超出...

导读 : 今天来分享下使用Axure制作拖动滑块解锁这个功能的方法,使用淘宝网的例子来还原制作过程。如下图:相信很多人对这个界面都不陌生,这是淘宝网的注册页面,除此之外目前很多网站都有用这种方式来进行验证,当然也有同一种方法不同的...


Axure:拖动滑块解锁进行验证


今天来分享下使用Axure制作拖动滑块解锁д这个功能的方法●·,使用淘宝网的例子来还原制۞۞作过程。

如下图:

相信很多人对这个界面都不陌生,这是淘宝网的注册页面,除此之外目前很多网站都有用这种方式来进行验证,当然也有同一种方法不同的表现形式,比如拖动后完成拼图,以防止频繁的非正常请求,进行人机验证。

操作描述:

¤拖动┄┅滑块时,滑块水平左右运动,л不可超出灰色边框; 拖动时,绿色的背景↔随滑块进行移动; 拖动达到最右端时,显示白色文字“加载中”,等待半秒钟后显示白色文▍字“通过验证”,并且「对勾」图标变为绿色,同时“获取短信验证码”按钮变为可用状态; 如果拖动并为达到最右端,滑块则回到初始位置。

01

根据该效果图准备℉以下元件,其他部分元件仿照⿷淘宝注册页面调整就行,我这里就不逐ъ个列出了。

02

选中○动¤态面板【Slider】,为“拖动时”添加事件1 先添加条件,判︹︺︻断“元件范У围”是【Slider】面板“未接触”到【Touchpoint】——▁▂▃▄(我的Axure没汉化,重要的地方◥用红字标注∏了) 设置满足条件的动作:移动【Slider】为“水平拖动” 单击“界限”后的“添加边界”,设置在X轴的移动范围为“181-482”,此处范围根据【Tou★chpoint】元件实际摆放的位置而定〒。

03

如过不满足事件1所设定的条件▼时,执行动作为:“设置文本”于元件【Tips】为“富文本”,然后点击编辑富文本为“加载中…”

添加动作“等待”,时间为:500毫秒。

添加动作:“设置文本”于元Δ件【TipsЁ】为“富文本”,然后点击编辑富文本为“通过の验证”。

继续添加动作“设置动态面板状态”于动态面板【Slider】为“Ti◁ck”。

设置元件【Nextb■utton】初始状态为:“禁用”。

注意:【Nextbutton▓】元件的“可用”状态是鲜艳的颜色,需要事先设定好,而且需要在属性中设定“不可用”状态的颜色为灰色。

然后继续回元件【Slider】的“Case 2”中,设置动作“启用”【Nextbutton】。

04

添╯╰加动态面板【Slideфr】“拖动结束时”事件case1。

为case1添加条件判断,判断“元件范围”【Slider】“未接触” “元件范围┈┉”【Touchpoint】。(具体∪图示可参看上文步骤2‥)

当满足条件时的动作设置为”移动“动态面板【Slider】”到达“ x=171,y=227┆┇ (此处坐标视你操作时【Slider】面板的具体位置而定)。

添加动态面板☆【Slider】“移动时”事件case1。

设置case1动作为“移动△”元件【Greenbox】“跟随”当前动态✿。✿面板移动。

这样,Θ整个拖动┍滑块解锁的原型就基▎▏本完成了,细节∏的地方如果需要美化的可自行研究,整个过程的难点主要在于对动态面๑板移动以及条件判断的运用┚,对于条件判断不熟悉的同学可以多找█些案例尝试练习。

另外需要提醒的是,如果尝试模仿别的功↙能来练习,在开始前一定要弄清楚操作描述并写下来,这对流程的理解和条件判断的设◆定,以及元件层级的摆放合理性都起到重…要的作用,我也会继续分享更多案例给大家一起实操。

 

作者:☆杰森,公众号:十八般产品

本文由 @杰森 原创☆发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplǐash,基于CC0协议


本站所收集的资源来源于互联网公开资料,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。本站部分作品是由网友自主投稿和发布,本站仅为交流平台,不为其版权负责。

如果你是产品经理,一定要学爆红产品「欢乐颂」编剧构建用户画像!
Bernstein Research:最看空分析师态度转变 推动FB股价周一飙升8%