Axure9 菜鸟教程:滑动拼图验证登录效果

2021-12-2214:47:49原型设计Comments3,868 views字数 1834阅读模式

一、交互效果说明

1.在账户密码输入界面点击登录,进行拼图验证,拖动滑块,上方拼图块随滑块同步移动,拼图失败显示文字提示,滑块及拼图返回初始位置;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.拼图验证成功后返回账户密码输入界面,并通过上方文字提示账户密码输入的验证结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

预览效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

原型预览地址:https://93yr89.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

二、制作交互效果

整个交互分成两个部分,分别是拖动拼图以及账户密码输入,我们需要拖入一个动态面板,命名为「content」,调整动态面板大小,创建以上两个状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1. 制作拖动拼图效果

1)交互效果分析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1.拖动滑块时,上方的拼图块随着滑块滑动而同步滑动,且滑动范围不超过灰色背景条的两端。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.拖动结束时,若拼图块对齐缺口,弹出成功提示的弹层并且返回到登录面板中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

3.拖动结束时,若拼图块未对齐缺口,滑块和拼图块返回原来的位置,显示文字提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

元件准备文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

双击拖入的动态面板「content」,选择【滑动验证】状态,按照图示准备好以下元件并进行命名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

元件说明文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1.「success notice」是拼图成功的提示弹层,底部的矩形可以设置为透明度为70%白色填充,将整个组合置于图片上方,点击右键【设为不可见】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.「contact line」为宽度为4px的热区,热区是透明的元件,作为辅助用途,放到缺口的右侧作为拼图块移动时接触的条件;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

3.选中文字「notice」,点击右键,选择【交互样式】,添加【选中】效果时,设置字体颜色为红色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

添加交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1.给滑块「slider」添加【拖动时】的交互,分别设置滑块「slider」和拼图块「block」【跟随水平拖动】,点击【更多选项】,添加边界值【左侧≥30】【右侧≤330】;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.给滑块「slider」添加【拖动结束时】的交互,点击【添加情形】,【元件范围】-「block」-接触-【元件范围】-「contact line」时,添加以下动作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

【显示】弹层组合「success notice」;【等待1000ms】;【设置面板】「content」为【输入账号密码】状态;隐藏「success notice」;移动「slider」及「block」【回拖动前位置】,动画为【线性500ms】;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

3.继续给滑块「slider」添加【拖动结束时】的交互,设置和2中条件相反即【Else If为真】,添加以下动作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

移动「slider」及「block」【回拖动前位置】,动画为【线性500ms】;【选中】提示文本「notice」;【设置文本】「notice」为:“请控制拼图对齐缺口”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

做完以上步骤,拖动拼图的效果就完成了,滑块「slider」全部交互如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2)账号密码输入验证文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

交互效果分析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

对输入内容为空/错误进行判断并提示用户,主要有以下几种情形文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1.用户名输入为空时,提示:请输入用户名文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.密码输入为空时,提示:请输入密码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

3.用户输入错误时,提示:用户名不存在文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

4.密码输入错误时,提示:密码输入错误文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

5.用户名密码均输入正确时,提示:登录成功文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

元件准备文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

双击拖入的动态面板「content」,选择【账号密码输入】状态:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1.拖入一个矩形框,调整大小,设置边框颜色为:#666EE8,透明度:20%,命名为「username-line」,在右侧交互样式面板中设置【元件选中时】的样式为边框颜色:#666EE8,透明度:100%,设置选项组名称为「option」;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.拖入一个文本框元件,置于「username-line」上方,隐藏边框,命名为:「username-input」,在右侧交互样式面板中设置提示文字为:“请输入账号”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

3.同理制作出密码的输入组件并进行命名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

4.拖入一个矩形元件,调整样式,命名为:「login」;拖入一个文本标签,置于用户名输入上方,命名为「notice」,点击右键【设为不可见】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

所有元件及命名如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

添加交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

1.给「username-input」添加【获取焦点时】的交互,【选中「username-line」为真】;【失去焦点时】【选中「username-line」为假】;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

2.同样给「password-input」添加【获取焦点时】的交互,【选中「password-line」为真】;【失去焦点时】【选中「password-line」为假】;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

3.接下来给登录按钮「login」添加【单击时】的交互,分别添加我们在交互分析中的上5个情形,并设置对应的动作,这里就不一一赘述了,所有的交互效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

Axure9 菜鸟教程:滑动拼图验证登录效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

本文由 @Daisy 原创发布于人人都是产品经理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/22810.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定