Axure RP实战:打造高效图形旋转验证码

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''

然后设置 滑块【移动】,设置 滑轨的 leftright左右边界 这里比较简单

下图为【旋转】中局部变量的设置

接下来详细介绍一下,滑块滑动图形跟着旋转,需要在滑块从开始到结束旋转三百六十度,这样的话就一定可以摆正图形。

1.要计算滑块总共可以移动多少距离可以用滑轨的宽度减去滑块的宽度

[[LVAR2.width-LVAR1.width]]

  1. 知道了距离和角度,我们就可以算一个距离单位内图形对应所需要旋转的角度

[[360/(LVAR2.width-LVAR1.width)]]

  1. 知道了一个距离单位内图形对应所需要旋转的角度,我们就可以利用已滑动的距离与这想乘

[[LVAR1.left-LVAR2.left)*360/(LVAR2.width-LVAR1.width]]

这里的设置结束以后,我去预览调试,结果结果和我想象的不一样。我刚开始拖动滑块,图形就摆正了。

后来发现 我们之前设计滑块拖动时的图形旋转,是以图形处于摆正的状态,即 为基准开始旋转的。

这意味着,当滑块从起始位置拖动到结束位置时,图形的旋转是从 360°,因此会出现这样的情况,即刚开始拖动图形就显得已经摆正了。

然而,我们的图形实际上是预先已经旋转了一定角度的,我们希望实现的效果是在这个当前角度的基础上再旋转一圈。

因此,我们需要在之前的计算公式中加入当前图形已有的旋转角度【tx_jd】

最终公式: [[LVAR1.left-LVAR2.left)*360/(LVAR2.width-LVAR1.widt)+tx_jd]]

验证

当鼠标松开滑块拖动时,验证当前的图形是否摆正

滑块【拖动结束时】,判断是否验证成功,验证成功就显示【验证通过】的提示,并将变量【Rot_Ver_Result】设置为【True】,否则将滑块移动【回拖动前位置】,并将图形按变量值【Angle】旋转回之前的角度。

Axure 提供了获取元件旋转角度的函数【rotation】,只要拿这个函数的结果跟可认为已经摆正的角度的取值范围进行比较就行了

就制作完成了 !

结语

我们希望通过 Axure 原型设计的展示,能够激发更多设计师和开发者的灵感,共同推动图形旋转验证码在用户体验设计中的应用。

未来,我们期待看到更多创新的验证码解决方案,以满足用户对于便捷性、趣味性和个性化体验的追求

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423364.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【人工智能】OpenAI最新发布的GPT-o1模型,和GPT-4o到底哪个更强?最新分析结果就在这里!

在人工智能的快速发展中,OpenAI的每一次新模型发布都引发了广泛的关注与讨论。2023年9月13日,OpenAI正式推出了名为o1的新模型,这一模型不仅是其系列“推理”模型中的首个代表,更是朝着类人人工智能迈进的重要一步。本文将综合分析…

详细分析linux中的MySql跳过密码验证以及Bug(图文)

目录 1.问题所示2. 基本知识3. 解决方法3.1 跳过验证Bug3.2 设定初始密码 1.问题所示 发现密码验证错误,遗失密码 2. 基本知识 停止MySQL服务:sudo systemctl stop mysql 以跳过权限表模式启动MySQL:sudo mysqld_safe --skip-grant-tables …

vulnhub靶机:Holynix: v1

下载 下载地址:https://www.vulnhub.com/entry/holynix-v1,20/ 打开虚拟机 选择下载解压之后的文件打开 新添加一张 NAT 网卡,mac 地址修改如下 00:0c:29:bc:05:de 给原来的桥接网卡,随机生成一个 mac 地址 然后重启虚拟机 信息收集 主…

【C++二分查找 容斥原理】1201. 丑数 III

本文涉及的基础知识点 C二分查找 容斥原理:组合数学汇总 LeetCode1201. 丑数 III 丑数是可以被 a 或 b 或 c 整除的 正整数 。 给你四个整数:n 、a 、b 、c ,请你设计一个算法来找出第 n 个丑数。 示例 1: 输入:n …

单机docker-compose部署minio

单机多副本docker-compose部署minio 简单介绍 如果服务器有限可以单机挂载多硬盘实现多副本容错(生产不推荐) 部署好的文件状态 有两个重要文件 docker-compose.yaml和nginx.conf docker-compose.yaml是docker部署容器的配置信息包括4个minio和1个ng…

HCIA--实验十三:VLAN间通信子接口实验/双单臂路由实验

一、实验内容 1.需求/要求: 将两个单臂路由通过两台交换机连接起来,成为双臂路由,并探讨这么做的原因。实现全网通,让任何一台主机之间都可以通信。 二、实验过程 1.拓扑图: 2.步骤: 1.给PC配置ip地址…

大数据新视界 --大数据大厂之HBase深度探寻:大规模数据存储与查询的卓越方案

💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

如何将本地项目上传到GitHub(SSH连接)

在个人GitHub中新建项目(远程仓库),添加一个README文件,方便后面验证 记住这个默认分支,我这里是main,你的可能是master或其他 先复制下SSH地址 在项目文件夹中右键打开Git命令行 初始化本地仓库,同时指定默认分支为ma…

OA项目值用户登入首页展示

1.什么是OA 办公自动化(Office Automation,简称OA)是将现代化办公和计算机技术结合起来的一种新型的办公方式。办公自动化没有统一的定义,凡是在传统的办公室中采用各种新技术、新机器、新设备从事办公业务,都属于办公自动化的领域。通过实现办公自动化,或者说实现数字化…

Java 每日一刊(第6期):整数运算

文章目录 前言Java 的整数类型基本的整数运算符整数除法与取模自增与自减运算整数的进制表示整数溢出问题位运算整数的优化技巧类型自动提升(Type Promotion)强制类型转换(Type Casting)本期小知识 在有限的符号中,我们…

web基础之信息泄露

1、目录遍历漏洞 (1)原理:本质是没有过滤用户输入的 ../ 相关的目录跳转符,使得攻击者通过目录跳转符来遍历服务器中的任意文件。 (2)题解: eg:根据提示遍历网页目录信息,会在某一个…

文生视频算法

文生视频 Sora解决问题:解决思路: CogVideoX解决问题:解决思路: Stable Video Diffusion(SVD)解决问题:解决思路: 主流AI视频技术框架: Sora Sora: A Review on Backg…

Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()

isRef() isRef():检查某个值是否为 ref。 isRef函数接收一个参数,即要判断的值。如果该参数是由ref创建的响应式对象,则返回true;否则,返回false。 import { ref, isRef } from vue const normalValue 这是一个普通…

Ajax 揭秘:异步 Web 交互的艺术

Ajax 揭秘:异步 Web 交互的艺术 一 . Ajax 的概述1.1 什么是 Ajax ?1.2 同步和异步的区别1.3 Ajax 的应用场景1.3.1 注册表单的用户名异步校验1.3.2 内容自动补全 二 . Ajax 的交互模型和传统交互模型的区别三 . Ajax 异步请求 axios3.1 axios 介绍3.1.1 使用步骤3…

STM32——看门狗通俗解析

笔者在学习看门狗的视频后,对看门狗仍然是一知半解,后面在实际应用中发现它是一个很好用的检测或者调试工具。所以总结一下笔者作为初学小白对看门狗的理解。 主函数初始化阶段、循环阶段和复位 众所周知,程序的运行一般是这样的&#xff1…

【面试八股总结】Redis持久化

Redis 实现了数据持久化的机制,这个机制会把数据存储到磁盘,这样在 Redis 重启就能够从磁盘中恢复原有的数据。 Redis 共有三种数据持久化的⽅式: AOF 日志:每执行一条写操作命令,就把该命令以追加的方式写入到⼀个文…

【计算机网络】HTTP相关问题与解答

此篇文章内容会不定期更新,仅作为学习过程中的笔记记录 目录 一、HTTP请求和响应报文是怎样的? 1、请求报文 2、响应报文 二、HTTP请求方法有哪些? GET HEAD POST PUT DELETE PATCH OPTIONS TRACE CONNECT 三、GET请求与POST请…

菜单、工具栏 的基本使用

效果 代码 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<QDebug> #include<QPushButton>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupU…

将一个字符串以三个字符为间隔分别放在三个字符串数组里

要求 请编写函数fun&#xff0c;其功能是:编写函数char *fun(char*s0,char *s1,char *s2,char*s3)&#xff0c; 要求实现: 将s0所指字符串分解成三个字符串&#xff0c;分别存入s1、s2、s3所指内存中。分解的方法是&#xff0c;s1、s2、53从s0中依次顺序每隔3个字符取1例如:s0…

OpenCV 4.10 windows 上编译并上传conan

目录 一. 上传opencv 预编译包 二. 自己手动写一个测试包并上传 三. 自己写一个app, 引用包 一. 上传opencv 预编译包 1. 下载Opencv, 并用cmake 打开 打开工程之后&#xff0c;编译&#xff0c;install&#xff0c; 目录如下 2. 准备conan 包 把Debug 和 Release 分开放 3…