快好知 kuaihz

Axure教程:拼图身份验证如何设计?

拼图进行身份验证已经越来越常见,这种验证方式趣味性十足,还能增强网络安全性,那今天我们来看看这个功能的原型是怎么做出来的。

注:在做的过程中看到前辈做过类似的滑动拼图解锁,但是我用的相关函数更简单易懂易操作,有兴趣大家可以都看看,自己选择适合的。

效果图送给大家

实现原理

移动拼图的按钮只能在杠杆中运动,移动按钮移动时,拼图跟着移动,拼图移动到对应位置的可允许误差范围内松开鼠标时,拼图验证成功,否则返回失败结果,按钮和拼图返回初始位

教程如下

1、设置好基本元件

2、设置拼图按钮只能在杠杆中运动

3、设置拼图面板在指定区域并跟随按钮面板移动

4、设置一个图像热区做为拼图的可允许误差范围,当按钮面板结束拖动时,如果红心面板没有接触到允许误差范围,则红心面板和按钮面板返回初始位置,矩形返回文字:验证失败,请重新验证。

5、当按钮面板结束拖动时,如果红心面板接触到允许误差范围时,红心面板移到白心位置,矩形返回文字:验证成功。

6、哈哈,终于设置好了,快预览看看效果,成就感满满是不是~~

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:拼图  拼图词条  验证  验证词条  身份  身份词条  教程  教程词条  如何  如何词条  
原型

 Axure教程:如何用Axure...

放弃一切错误的方法,从今天开始“刻意练习”, 因为这是最强大的,也是唯一正确的学习方法。—《刻意练习》作为一名产品经理,每天都要和技术打交道,技术知识...(展开)

原型

 用Axure做原型,一些提高效率...

前言:在产品经理工作中,特别是初级产品经理,制作原型是主要工作之一。Axure是用的最顺手的原型制作软件,虽然制作移动端在效果上并不是很好,但作为不需要做高保真...(展开)

原型

 Axure教程 | 如何使用中继...

本期教程制作的是web端的幻灯片,制作中使用了中继器做为图片和文本的内容存储源,制作繁琐了一点,但是可以当做初步了解中继器的一种方式。老规矩,先看GIF效果图幻...(展开)