滑动拼图是互联网一种新的验证形式,被广泛应用在各种网站的登录、注册、找回密码。用户可以不需要填写复杂的验证码,而是用鼠标去拖动滑块便能通过验证。
下面为今日头条的滑动拼图验证,接下来将为大家讲解:
一、界面元件搭建(教程为axure 8)首先,需要下面这些元件。热区1和热区2是用来校验小图的位置是否正确,作为左右的重合区间。
所有元件的初始位置如下:
二、交互事件实现(1)选中动态面板【滑块】,添加【拖动时】交互事件,勾选【当前元件】,设置为:水平移动,添加左右边界。
详细设置图如下:
下图为左边界:
下图为右边界:300为背景矩形的宽度。
同理,勾选【小图】,设置同样的移动和左右边界。
其次,增加【滑块】移动时,【高亮】条的尺寸跟着变化。设置【高亮】矩形的宽度为:[[LVAR1.x-LVAR2.x]],其中,LVAR1.x为【滑块】的X轴坐标值,LVAR2.x为【背景】的X轴坐标值。
如下图所示:
最后,需要添加【拖动结束时】的交互事件。即当【小图】移动到与热区1、热区2重叠的时候,显示验证成功。
如下图所示:
同理,否则,显示【失败】矩形,提示失败。同时需要触发【刷新】按钮的【鼠标点击事件】,后续会补充此交互事件。
详细交互事件如下:
(2)接下来,需要添加刷新验证码的功能,初始元件的位置。
选中【刷新】按钮,添加【鼠标单击时】交互事件,隐藏【成功】矩形。移动【滑块】和【小图】到绝对位置,X轴设置为[[LVAR1.x]],其中LVAR1.x为【背景】的的X轴坐标值。同时,设置矩形【高亮】的尺寸为40*40,锚点为左边。
三、注意事项(1)热区1和热区2的位置和宽度,决定着小图滑动验证时的准确率。即与小图重叠的概率。并且能保证,小图能同时覆盖到这两个热区。
(2)添加【滑块】的右边界:背景矩形的宽度300也可以替换为函数LVAR1.width。即为[[LVAR1.x-LVAR1.width]]。更加灵活应用。
四、效果展示如有疑问,欢迎向我留言~
编辑导语:在举办产物运营时,我们会从一些数据指标对产物举办判定,可是我们如何把这些指标和板块举办分类和判定?本文作者分享了关于如何拟定产物的焦点数据方针的思考方法,我们一起来进修一下。 提到产物的一...
编辑导语:在事情中我们需要通过文档与团队举办交换记录,包罗设计团队、研发团队、销售团队、技能支持与客服团队等。每个团队需要的文档是差异的,因此在产物的生命周期中产物司理需要编写各类文档用于和团队举办协...
编辑导语:拼多多在消费者心中是一个较量自制的卖货平台,一直打着百亿津贴的计策挑战着其他几个电商平台,但百亿津贴对付它来说是个双刃剑,要怎么均衡是一个问题;本文作者从拼多多在线上卖车阐明百亿津贴的计策。...
编辑导语:如何晋升新用户留存率是产物成长进程中的一浩劫题,留不住用户,产物自身的保留就会受到威胁。本文作者为我们具体地先容了什么是留存,而且通过留存曲线调查用户留存环境,最后总结出了新用户留存的两点要...
编辑导读:经验过几番“大战”后,共享单车就剩下哈罗、美团单车(摩拜)、青桔三足鼎立。近期,各大厂们在共享电单车规模跃跃欲试。本文将从三个方面,提出本身的一点思考,但愿对你有辅佐。 网约车市场滴滴一家...
编辑导语:众所周知,如今的流量获取难、本钱高,不少平台选择用裂变的方法举办营销,低本钱结果也还不错;拼多多一直都以砍一刀等方法举办裂变,如今微信念书也推出了“0元得纸书”,用砍价的方法举办裂变;本文作...