《Axure拖动滑块解锁进行验证操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,动态面板,交互设计等多维度案例或实操来进行更多的学习;此教程是由Bibbidi-bobbidi-boo在2021-08-27发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天来分享下使用Axure制作拖动滑块解锁这个功能的方法,使用淘宝网的例子来还原制作过程。
如下图:
相信很多人对这个界面都不陌生,这是淘宝网的注册页面,除此之外目前很多网站都有用这种方式来进行验证,当然也有同一种方法不同的表现形式,比如拖动后完成拼图,以防止频繁的非正常请求,进行人机验证。
操作描述:
根据该效果图准备以下元件,其他部分元件仿照淘宝注册页面调整就行,我这里就不逐个列出了。
添加动作“等待”,时间为:500毫秒。
添加动作:“设置文本”于元件【Tips】为“富文本”,然后点击编辑富文本为“通过验证”。
继续添加动作“设置动态面板状态”于动态面板【Slider】为“Tick”。
设置元件【Nextbutton】初始状态为:“禁用”。
注意:【Nextbutton】元件的“可用”状态是鲜艳的颜色,需要事先设定好,而且需要在属性中设定“不可用”状态的颜色为灰色。
然后继续回元件【Slider】的“Case 2”中,设置动作“启用”【Nextbutton】。
添加动态面板【Slider】“拖动结束时”事件case1。
为case1添加条件判断,判断“元件范围”【Slider】“未接触” “元件范围”【Touchpoint】。(具体图示可参看上文步骤2)
当满足条件时的动作设置为”移动“动态面板【Slider】”到达“ x=171,y=227 (此处坐标视你操作时【Slider】面板的具体位置而定)。
添加动态面板【Slider】“移动时”事件case1。
设置case1动作为“移动”元件【Greenbox】“跟随”当前动态面板移动。
这样,整个拖动滑块解锁的原型就基本完成了,细节的地方如果需要美化的可自行研究,整个过程的难点主要在于对动态面板移动以及条件判断的运用,对于条件判断不熟悉的同学可以多找些案例尝试练习。
以上就是Axure拖动滑块解锁进行验证操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure滑动解锁验证效果操作实例
2022-06-20 16:57
2022-05-16 10:13
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论