Axure RP实战:打造高效文字点选验证码

Axure RP实战:打造高效文字点选验证码

前言

在数字时代,网络安全和用户体验是设计在线表单时的两大关键考量。

验证码作为一种验证用户身份的技术,已经从简单的数字和字母组合,发展到了更为复杂和用户友好的形式。

今天,我要介绍的是一种创新的验证码解决方案——文字点选验证码,它不仅提升了安全性,同时也优化了用户的交互体验。

准备的材料

所需要用的东西很简单:3个显示的矩形,3个用户点击的矩形,一个刷新按钮,一个确定按钮,一个动态面板里面有默认背景图、成功、失败的三个状态。

我们要做的是从预设库中随机选3字,上方展示抽取文字及顺序,下方生成3个随机位置角度待选。

用户需按顺序点击,全对则成功。

接下来分享设计。

变量准备

除了以上的内容之外,我们还需要准备几个全局变量

ccwz:我们用来生成文字的库

zzwz:最终要验证的文字以及顺序

yhwz:用户点击的文字以及顺序

Result2:用来标识验证是否通过

处理显示文字和用户所需点击的文字

我这里的【看】就是显示的验证文字,【点】就是用户所需点击的验证文字。

首先待验证的文字是从字库随机抽取出来的(就是ccwz,自己随机生成一点文字进去就行了),取出来之后,【看】【点】的文字都同时【设置文本】为所抽取的文字,然后再把这个文字【追加】到变量【zzwz】中。

concat 的作用就是在原来的文字基础上追加文字,而不会把原来的文字覆盖掉,【看】【点】的第二个和第三个矩形的文字都是一样的设置,如下图所示

接下来我们再对用户所需点击的文字做一些处理:

用户点击的验证文字刷新的位置是随机的,所以我们在【载入时】去设置用户点击的验证文字的旋转角度和移动位置。

【旋转】随便旋转,【移动】在框内就行了。

还需要添加【单击时】判断当前的文字是否选中,如果未选中,就【设置选中】,并将当前选中的文字追击到到变量【yhwz】

这里注意一点,一定要写判断条件,不然的话每点击一次,就会追加一次文字

刷新按钮

刷新按钮的主要功能就是

【设置变量值】清空用户点击的文字和顺序(yhwz),清空对比验证文字和顺序,清空结果;

【触发事件】让显示文字和所需点击的文字都重新载入;

【设置面板状态】回到默认背景

【设置选中】让所有所需点击的文字的选中状态为假

确认按钮

确认按钮就直接对比用户所点击的文字和顺序 和 存储的验证文字的文字和顺序,如果成功就【设置面板状态】为成功,【设置变量】 Result2true ,隐藏点击文字

如果失败就【设置面板状态】为失败,【等待】一段时间,【触发事件】刷新按钮点击就行了

总结

随着技术的不断进步,用户体验的设计也变得越来越重要。

在本文中,我们探讨了如何使用 Axure 设计一个点选文字验证码,这不仅提高了用户验证的安全性,同时也优化了用户交互的流程。

通过精心设计的交互元素,我们能够确保用户在享受便捷服务的同时,也能感受到设计的温度和思考。

最后,让我们记住,设计不仅仅是为了解决问题,更是为了创造美好的体验。每一次的创新和尝试,都是我们向着更加人性化、智能化的数字世界迈出的一步。

让我们携手前进,共同期待一个更加精彩的明天。

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

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

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

相关文章

数量关系:成本售价利润问题

问:某品牌服装,甲店进货价比乙店便宜10%,两店同时按20%的利润定价,这样1件商品乙店比甲店多赚4元,乙店的定价是多少元?() A 200 B 216 C 240【正确答案】 D 300标准答案:设乙店的进货价为x,则甲店的为0.9x…

灵办AI:解锁办公新境界,让工作更智能、更高效!

在这个信息爆炸的时代,我们每个人都在寻找能够提升效率、简化工作流程的工具。如果您正在寻找一个能够全方位提升工作效率的AI助手,那么灵办AI绝对值得您的关注。 为什么选择灵办AI? 在众多AI工具中,灵办AI凭借其卓越的性能和独…

Python数据采集与网络爬虫技术实训室解决方案

在大数据与人工智能时代,数据采集与分析已成为企业决策、市场洞察、产品创新等领域不可或缺的一环。而Python,作为一门高效、易学的编程语言,凭借其强大的库支持和广泛的应用场景,在数据采集与网络爬虫领域展现出了非凡的潜力。唯…

【微信小程序】导入项目

1.在微信开发工具中,点击【导入项目】 2.在打开的界面中执行2个步骤 1.找到要导入项目的路径2.AppID要改成自己的AppID 3.package.json包初始化【装包之前要确保有package.json文件】 1.在【资源管理器】空白处,点击鼠标右键,选择【】&am…

显示中文字体问题解决:ImportError: The _imagingft C module is not installed

使用opencv写入中文时,用以下代码会导致乱码: cv2.putText(im0, f"{label}:{score}", (xmin, ymin), cv2.FONT_HERSHEY_SIMPLEX, 2, (0,255,0), 3)因此需要借助PIL库写入中文字符,用法如下: import cv2 from PIL impo…

一个简单的springboot项目(有源码)

开发一个springboot项目 代码迭代整合工具 gitee建模意义程序处理方式开发功能的步骤web服务网络状态码 web应用的开发分层springboot的作用 springboot框架搭建框架中各组件作用框架的演变如何提取hive中的表结构创建springboot 工程的引导模版 要选择aliyun ,否则…

回顾MVC

Tomcat是servlet的容器,想用HttpServlet需要导入tomcat jar包 下图是没用springmvc时的场景,首先在web.xml里面配置访问路径为/Hello然后 通过get请求去调用login方法最后重定向到index.jsp中 index.jsp里面的内容 重定向到index.jsp中 在控制台获取到username里面的…

uniapp video标签无法播放视频

当video标签路径含有中文以及特殊字符视频就会无法播放 解决方法使用encodeURIComponent对路径进行加密处理 videoSrc data.coursewareFile? ${appConfig.apiUrl encodeURIComponent(data.coursewareFile)}: "";最后效果

突破编程 C++ 设计模式(组合模式)详尽攻略

在软件开发中,设计模式为程序员提供了解决特定问题的最佳实践。设计模式不仅提高了代码的可复用性和可维护性,还能帮助团队更好地进行协作。在这篇文章中,我们将深入探讨组合模式——一种结构型设计模式。 组合模式允许你将对象组合成树形结…

FUNCTION_ALV 下拉框的实现

下拉框可以用drdn_field或者使用DRDN_HNDL,这个文章主要是下拉框的基本使用,核心就是在fieldcat内表里面设置好下拉框的字段或者组的编号 文章目录 drdn_field使用DRDN_HNDL复制状态完整代码核心代码运行结果 drdn_field 使用DRDN_HNDL 复制状态 完整代码…

不仅仅是文化:解决常见安全问题根源

今年,GitLab对DevSecOps专业人士的年度调查发现了一些与组织文化相关的问题,这些问题可能会阻碍工程团队和安全团队之间的更深层次协调。 大多数(58%)的安全受访者表示,他们很难让开发部门优先修复漏洞,52%的人表示,繁…

fastjson序列化时过滤字段的方法

在使用fastjson进行序列化时,可能需要根据实际需求过滤掉某些字段,以避免将敏感信息或不必要的字段发送到客户端。fastjson提供了多种灵活的方式来实现这一需求。以下整理了fastjson序列化时过滤字段的几种常用方法。 方法一:使用fastjson的…

【CVPR‘23】CompletionFormer:用于深度补全的 Transformer 网络!已开源

【CVPR23】CompletionFormer:用于深度补全的 Transformer 网络! 摘要方法3.1 RGB 和深度嵌入3.2 联合卷积注意力和 Transformer 编码器3.3 解码器3.4 SPN 精化和损失函数主要贡献实验结果论文地址:https://openaccess.thecvf.com/content/CVPR2023/papers/Zhang_CompletionF…

【专项刷题】— 链表

1、2两数相加 - 力扣(LeetCode) 思路: 只要有任意一个链表还没有为空的时候就继续加,当链表为空的时候但是t不尾0,还是进入循环进行操作 代码: public ListNode addTwoNumbers(ListNode l1, ListNode l2) {…

Git学习(001 git介绍以及安装)

尚硅谷2024最新Git企业实战教程,全方位学习git与gitlab 总时长 5:42:00 共40P 此文章包含第1p-第p4的内容 文章目录 介绍Git介绍GitLab介绍 概述Git安装版本控制工具介绍 介绍 Git介绍 GitLab介绍 相当于中央仓库 概述 Git安装 进入官网(下载当前版本 2.43.0) …

AD原理图Update成PCB时提示Comparator Results的原因

在使用AD20把原理图转换成PCB时,AD提示 【原理图导入PCB时提示ECO的原因】 解释是: 原理图中存在元件未添加PCB封装。 验证 1、从右下角的panels打开messages 2、Validate PCB Project 3、warning中的确提示有元器件缺少封装 在更改添加了原理图中的元…

FL Studio 24.1.1.4285官方中文版全新发布,最新功能解析

【功能强大:一站式音乐制作平台】 说到功能,这款软件简直就是全能战士。从录音、编曲到混音、母带处理,FL Studio几乎能涵盖音乐制作的方方面面。而且它还支持多种插件格式,让你的音乐作品更加丰富多彩。 【兼容性强:…

改造小蚁摄像头支持免费无限容量云储存(Samba挂载篇)

为什么要改造? 插卡摄像头最大的一个问题就是频繁的读写会导致内存卡寿命急速下降,哪怕是市面上支持NAS转存的摄像头也是先录制到SD卡里,然后把SD卡上的视频再转存到NAS。同样对内存卡和NAS硬盘寿命都是损耗巨大。而这类监控视频绝大多数情况…

数据结构——树的三种表示方法

目录 引言 树 1.树的定义 2.树的基本概念 3.树的表示方式 (1)双亲表示法 (2)孩子表示法 (3)左孩子右兄弟表示法 (4)树的应用 结束语 引言 在学习完栈和队列的之后后,我们接下来学习新的数据结构——树。 树 1.树的定义 树是一种非线性数据结构&#x…

智慧公路大数据运营中心整体解决方案

方案简介: 智慧公路大数据运营中心解决方案的实施,不仅提高了公路交通的运行效率和管理水平,还推动了智慧交通建设的深入发展。通过消除信息孤岛、促进数据共享和开放,实现了交通信息资源的有效整合和利用。未来,随着…