【Axure交互教程】 滑动拼图验证登录效果
作品名称:滑动拼图验证登录效果
作品编号:Case008
软件版本:Axure9
作品类型:交互案例
原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case008
很多网站都会设置登录验证以防止机器人登录,滑块拼图验证是比较常见的一种形式,今天我们用Axure9来制作一个带拼图验证的完整登录效果。
交互效果说明
1.在账户密码输入界面点击登录,进行拼图验证,拖动滑块,上方拼图块随滑块同步移动,拼图失败显示文字提示,滑块及拼图返回初始位置;
2.拼图验证成功后返回账户密码输入界面,并通过上方文字提示账户密码输入的验证结果。
预览效果
制作交互效果
整个交互分成两个部分,分别是拖动拼图以及账户密码输入,我们需要拖入一个动态面板,命名为「content」,调整动态面板大小,创建以上两个状态。
一、制作拖动拼图效果
交互效果分析
1.拖动滑块时,上方的拼图块随着滑块滑动而同步滑动,且滑动范围不超过灰色背景条的两端。
2.拖动结束时,若拼图块对齐缺口,弹出成功提示的弹层并且返回到登录面板中。
3.拖动结束时,若拼图块未对齐缺口,滑块和拼图块返回原来的位置,显示文字提示。
元件准备
双击拖入的动态面板「content」,选择【滑动验证】状态,按照图示准备好以下元件并进行命名。
元件说明
1.「success notice」是拼图成功的提示弹层,底部的矩形可以设置为透明度为70%白色填充,将整个组合置于图片上方,点击右键【设为不可见】。
2.「contact line」为宽度为4px的热区,热区是透明的元件,作为辅助用途,放到缺口的右侧作为拼图块移动时接触的条件;
3.选中文字「notice」,点击右键,选择【交互样式】,添加【选中】效果时,设置字体颜色为红色。
添加交互效果
1.给滑块「slider」添加【拖动时】的交互,分别设置滑块「slider」和拼图块「block」【跟随水平拖动】,点击【更多选项】,添加边界值【左侧≥30】【右侧≤330】;
2.给滑块「slider」添加【拖动结束时】的交互,点击【添加情形】,【元件范围】-「block」-接触-【元件范围】-「contact line」时,添加以下动作:
【显示】弹层组合「success notice」;【等待1000ms】;【设置面板】「content」为【输入账号密码】状态;隐藏「success notice」;移动「slider」及「block」【回拖动前位置】,动画为【线性500ms】;
3.继续给滑块「slider」添加【拖动结束时】的交互,设置和2中条件相反即【Else If为真】,添加以下动作:
移动「slider」及「block」【回拖动前位置】,动画为【线性500ms】;【选中】提示文本「notice」;【设置文本】「notice」为:“请控制拼图对齐缺口”。
做完以上步骤,拖动拼图的效果就完成了,滑块「slider」全部交互如图:
二、账号密码输入验证
交互效果分析
对输入内容为空/错误进行判断并提示用户,主要有以下几种情形
1.用户名输入为空时,提示:请输入用户名
2.密码输入为空时,提示:请输入密码
3.用户输入错误时,提示:用户名不存在
4.密码输入错误时,提示:密码输入错误
5.用户名密码均输入正确时,提示:登录成功
元件准备
双击拖入的动态面板「content」,选择【账号密码输入】状态:
1.拖入一个矩形框,调整大小,设置边框颜色为:#666EE8,透明度:20%,命名为「username-line」,在右侧交互样式面板中设置【元件选中时】的样式为边框颜色:#666EE8,透明度:100%,设置选项组名称为「option」;
2.拖入一个文本框元件,置于「username-line」上方,隐藏边框,命名为:「username-input」,在右侧交互样式面板中设置提示文字为:“请输入账号”
3.同理制作出密码的输入组件并进行命名。
4.拖入一个矩形元件,调整样式,命名为:「login」;拖入一个文本标签,置于用户名输入上方,命名为「notice」,点击右键【设为不可见】。
所有元件及命名如下:
添加交互
1.给「username-input」添加【获取焦点时】的交互,【选中「username-line」为真】;【失去焦点时】【选中「username-line」为假】;
2.同样给「password-input」添加【获取焦点时】的交互,【选中「password-line」为真】;【失去焦点时】【选中「password-line」为假】;
3.接下来给登录按钮「login」添加【单击时】的交互,分别添加我们在交互分析中的上5个情形,并设置对应的动作,这里就不一一赘述了,所有的交互效果如下:
添加完成后就完成整个交互了,如果还有不清楚的地方,可在文章开头点击预览链接中的下载按钮,下载源文件查看交互细节。
更多高保真原型及交互案例请访问:http://daisyaxure.com
【Axure交互教程】 滑动拼图验证登录效果相关推荐
- 【Axure交互教程】 锚点滚动效果
作品名称:锚点滚动效果 作品编号:Case006 软件版本:Axure9 作品类型:交互案例 锚点滚动效果即点击锚点,页面滚动到指定的位置的效果,经常与导航结合起来运用.锚点滚动在Axure中有多种实 ...
- 【Axure交互教程】购物车结算效果
作品名称:滑动拼图验证登录效果 作品编号:Case010 软件版本:Axure9 作品类型:交互案例 今天我们制作的是移动端的购物车结算效果,主要涉及的是中继器的使用,全选以及数量的计算. 原型预览链 ...
- html 滑动拼图验证,vue登录滑动拼图验证
vue登录滑动拼图验证 vue登录滑动拼图验证 一.安装插件: npm install --save vue-monoplasty-slide-verify 二.main.js引入: import S ...
- 【VUE】vue实现登录滑动拼图验证的两种方法,纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
- 七丶青龙nvjdc部署教程+短信验证登录对接傻妞
青龙nvjdc部署教程+短信验证登录对接傻妞Nolanjdc 没有服务器的先自行购买,这里推荐腾讯云2H4G8M首年70–点击购买 青龙面板安装教程 傻妞机器人安装教程 XDD安装教程 QQ交流:10 ...
- php画拼图滑动验证,滑动拼图验证
3.逻辑:底部滑块的拖动控制小拼图移动,当其左边距与切割位置x坐标一致,或在一定范围内,即为正确:难点在于切割出来拼图,这一步参考上面链接地址: 5.部分源码如下:/** * @name BlockI ...
- vue3 滑块拼图验证登录(vue3-puzzle-vcode)
这里写自定义目录标题 首先,我们项目中很多情况下会用到滑动图片验证登录 vue有一个插件可以满足我们的需求 第一步先安装 npm install vue3-puzzle-vcode --save 第二 ...
- 【Axure交互教程】 可滑动的标签页效果
作品名称:可滑动的标签页效果 作品编号:Case002 软件版本:Axure9 作品类型:交互案例 原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case00 ...
- JavaScript---实现滑动拼图验证效果完整代码
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到c ...
- php滑动拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
最新文章
- 全变量进气系统伺服马_三种伺服电动缸系统的特点
- VTK:PolyData之AttachAttributes
- 字符串匹配的KMP算法(转)
- python3数字类型分为_Python初学3——数字类型及操作
- 用正则表达式抽取文本
- SQL Server系统数据库–模型数据库
- 属于哪个单元_到底怎么挑?动铁、动圈、动铁动圈混合买耳机哪个更好?
- one_hot编码学习与实践
- 使用kitti数据集实现自动驾驶——发布照片、点云、IMU、GPS、显示2D和3D侦测框
- 使用JRTPLIB收发RTP数据包
- win10 软路由_破费装了台LEDE软路由,测试WAN口能否跑万兆(中篇)
- matlab海龟交易策略,海龟交易策略
- 目前商店巡店督导遇到的问题要怎么管理
- Android仿微信朋友圈4实现评论动态时输入框和软键盘自动定位到内容下面
- 223611-42-5,S-acetyl-PEG4-alcohol含有硫乙酰基的PEG连接剂
- 【0】依照Django官网:实现第一个django app 安装必要的工具/模块
- AI技术是什么?AI对生活的影响有哪些?
- 计算机机箱架硬盘托架是什么,机械硬盘托架 笔记本光驱位硬盘托架到底靠不靠谱?有人说会烧主板,我都害怕了,......
- Kali-WIFI攻防(二)----无线网络分析工具Aircrack-ng
- Vue 过滤器、计算属性、侦听器 图解版 一目了然