温州网站推广公司,门户网站建站多少钱,查看网站国际联网备案号,百度一下电脑版Axure RP实战#xff1a;打造高效图形旋转验证码
在数字产品设计的海洋中#xff0c;验证码环节往往是用户交互体验的细微之处#xff0c;却承载着验证用户身份的重要任务。
传统的文本验证码虽然简单直接#xff0c;但随着用户需求的提高和设计趋势的发展#xff0c;它…Axure RP实战打造高效图形旋转验证码
在数字产品设计的海洋中验证码环节往往是用户交互体验的细微之处却承载着验证用户身份的重要任务。
传统的文本验证码虽然简单直接但随着用户需求的提高和设计趋势的发展它们逐渐显得有些过时。
图形旋转验证码以其新颖性和互动性为用户提供了一种全新的体验。
本文将详细介绍如何使用 Axure 这一强大的原型设计工具来创建一个图形旋转验证码旨在分享技术实现的细节探讨其在提升用户体验方面的潜力。
一.准备材料
一个矩形作容器和背景
一张验证的图片(做成圆的)
一个验证通过后的组合图形(先隐藏与验证图片重叠)
一个动态面板内有滑块
一个滑轨 二.所需变量
tx_jd: 在验证码初始化过程中将随机确定一个图形旋转角度并用一个变量存储该角度值此变量初始默认为0
tx_rc: 这个变量用于定义用户在调整图形位置时可接受的误差范围。如果没有这个误差范围用户需要非常精确地对齐图形这将增加验证的难度。通过设置容差即使用户的对齐有小的偏差也可以视为成功
tx_jg:验证的结果 true or false 三.交互设计
图形
在验证码初始化时验证图形会被随机旋转一定角度因此我们需要为验证图形添加【载入时】进行【旋转】的交互动作。
由于角度是随机的所以我们需要生成一个随机角度并给变量【tx_jd】并将图形【旋转】的角度的值设置为【tx_jd】。 这里存在一个问题如以下情况所示如果按照容差默认值为5度来设置当生成的旋转角度落在355度到5度这个范围内时实际上这个角度已经处于验证成功的容许范围内。
这意味着用户无需进行任何调整系统就会默认其验证通过这就产生了一个漏洞。
因此在生成旋转角度时应考虑到容差的影响旋转角度应当限定在5度到355度之间而非0度到360度。
如果要生成从 x 到 y 的随机数对应的公式是这样的: Math.random()*(y-x)x
因此公式就变成了上图那样:[[Math.random()*(360-tx_rc-tx_rc)tx_rc]]
滑块
滑块在滑轨内水平滑动滑动时也要让图形旋转。
这里判断一下没验证成功的时候可以拖动就是【tx_jg】!true
然后设置 滑块【移动】设置 滑轨的 left 和 right 为 左右边界 这里比较简单 下图为【旋转】中局部变量的设置 接下来详细介绍一下滑块滑动图形跟着旋转需要在滑块从开始到结束旋转三百六十度这样的话就一定可以摆正图形。
1.要计算滑块总共可以移动多少距离可以用滑轨的宽度减去滑块的宽度
[[LVAR2.width-LVAR1.width]]
知道了距离和角度我们就可以算一个距离单位内图形对应所需要旋转的角度
[[360/(LVAR2.width-LVAR1.width)]]
知道了一个距离单位内图形对应所需要旋转的角度我们就可以利用已滑动的距离与这想乘
[[LVAR1.left-LVAR2.left)*360/(LVAR2.width-LVAR1.width]]
这里的设置结束以后我去预览调试结果结果和我想象的不一样。我刚开始拖动滑块图形就摆正了。
后来发现 我们之前设计滑块拖动时的图形旋转是以图形处于摆正的状态即 0° 为基准开始旋转的。
这意味着当滑块从起始位置拖动到结束位置时图形的旋转是从 0° 到 360°因此会出现这样的情况即刚开始拖动图形就显得已经摆正了。
然而我们的图形实际上是预先已经旋转了一定角度的我们希望实现的效果是在这个当前角度的基础上再旋转一圈。
因此我们需要在之前的计算公式中加入当前图形已有的旋转角度【tx_jd】。
最终公式: [[LVAR1.left-LVAR2.left)*360/(LVAR2.width-LVAR1.widt)tx_jd]]
验证
当鼠标松开滑块拖动时验证当前的图形是否摆正
滑块【拖动结束时】判断是否验证成功验证成功就显示【验证通过】的提示并将变量【Rot_Ver_Result】设置为【True】否则将滑块移动【回拖动前位置】并将图形按变量值【Angle】旋转回之前的角度。 Axure 提供了获取元件旋转角度的函数【rotation】只要拿这个函数的结果跟可认为已经摆正的角度的取值范围进行比较就行了 就制作完成了 !
结语
我们希望通过 Axure 原型设计的展示能够激发更多设计师和开发者的灵感共同推动图形旋转验证码在用户体验设计中的应用。
未来我们期待看到更多创新的验证码解决方案以满足用户对于便捷性、趣味性和个性化体验的追求
– 欢迎点赞、关注、转发、收藏【我码玄黄】各大平台同名。
