1. 主页 > 行业资讯 > 设计文章 >

Axure微信高保真原型图:验证码登录

编者按:验证码登录是一个熟悉的操作。作者将整个过程分为三页,用原型图详细介绍。

一.流程图

微信高保真原型图--验证码登录

第二,分页演示

整个过程分为三页:第一个验证码页,第二个拼图页,第三个验证码页2。

以下三页将分别演示:

微信高保真原型图--验证码登录

第三,第一页

1.页面概述

第一个功能是在获取验证码之前确认手机号码。当您点击获取验证码时,会弹出一个确认手机号码的窗口。页面需要有键盘输入功能。点击文本框,将显示键盘。点击页面上的其他地方,键盘将被隐藏。

2.交互概述

在第一页,点击要操作的交互文本框,键盘会向上滑动显示;点击键盘按钮,输入框显示字符,登录按钮样式改变,关闭图标出现;单击关闭图标可更改文本框的文本。点击页面键盘向下滑动并隐藏。

3.要绘制的页面

4.互动讲解操作

第一步描述:点击输入框,在键盘上显示;点击页面隐藏键盘;

第一步:选择输入框,创建一个新的交互。单击时,将显示键盘面板,效果将向上滑动。

微信高保真原型图--验证码登录

选择页面,创建新的交互,单击时隐藏键盘面板,然后向下滑动:

微信高保真原型图--验证码登录

第二步描述:当文本框中有文字时,需要更改登录按钮样式,并显示关闭图标;当文本框中没有单词时,按钮样式将被恢复,关闭图标将被隐藏。点击关闭图标,输入框中的文字变为首字母“请输入验证码”;

第二步:选择登录按钮,设置交互风格,设置填充颜色为绿色,字符颜色为白色。

微信高保真原型图--验证码登录

选择输入框,在文字变化交互下添加动作(见前面文章:键盘输入);当输入文本框的文本长度不为0时,添加所选登录按钮的值为真的动作,添加新的动作,并显示关闭图标。

微信高保真原型图--验证码登录

当输入文本框的文本长度等于0时,添加将所选登录按钮的值设置为false的动作,并添加隐藏关闭图标的动作。

微信高保真原型图--验证码登录

描述:当图标显示关闭时,点击关闭图标,输入框的文本将成为默认文本。同时图标隐藏会关闭,登录按钮样式会变为未选中状态。

操作:选择关闭图标,点击新的交互时,将输入框文本的值设置为“请输入验证码”;隐藏关闭图标,并将登录按钮的选定值设置为false。

微信高保真原型图--验证码登录

第三步描述:点击获取验证码按钮,会出现确认手机号码的弹出窗口,点击弹出窗口取消隐藏弹出窗口,点击确定跳转到拼图页面;

第三步:取消手机号弹出窗口的确认,新建一个交互,点击时隐藏手机号弹出窗口的确认。

微信高保真原型图--验证码登录

选择确定确认弹出手机号,新建交互,点击打开链接拼图的页面。

微信高保真原型图--验证码登录

第四,第二页拼图页面

1.页面概述

在这一页上做拼图,拖动按钮时水平移动。

2.交互概述

拖动蓝色按钮,按钮和小拼图一起水平移动。如果成功移动到阴影处,可以有十个坐标误差。

3.要绘制的页面

微信高保真原型图--验证码登录

4.交互式解释

第一步是描述:把按钮和小拼图转换成动态面板,因为动态面板有拖拽和拖动的交互作用;

第一个操作:选中小拼图,右键点击,底部有一个动态面板;选择按钮,右键单击,下面有一个动态面板。

第二步描述:拖动按钮时,设置按钮和拼图随拖动水平移动,移动必须在一定的区域范围内,其中整个按钮在大图像的水平坐标内。

面积范围的计算:从图中可以看出,面积范围的起始位置是默认位置,是按钮左侧的X坐标值,面积范围的结束位置是与按钮右侧和大图右侧的X坐标相同的位置。

已知按钮左侧坐标值为X,大图左侧坐标值为Y,大图宽度为S,所以面积范围起始位置为X,面积范围结束位置为大图左侧X坐标值加图片宽度,为Y+S,面积范围为X ~ Y+S..

微信高保真原型图--验证码登录

微信高保真原型图--验证码登录

原型中,按钮左侧坐标为X=89,大图坐标为Y=67,大图宽度为S=276。

第二步:选择按钮,设置移动当前原稿(按钮),跟随水平移动,边界范围设置为89~343。

微信高保真原型图--验证码登录

说明:拼图和按钮的边界范围有一些小的区别。由于两个动态面板大小不同,排列在中间对齐,即拼图的起始位置比按钮的位置向右十个坐标,所以拼图的起始坐标需要+10,结束坐标需要-10;

操作:选择按钮,设置移动拼图,跟随水平移动。边界范围99~333。

微信高保真原型图--验证码登录

说明:按钮拖动完成后,需要判断拼图的坐标是否与阴影部分的坐标重合。拖动一条辅助线与阴影坐标重合,发现阴影坐标x为258。当拼图移动到坐标x=258时,拼图成功。

但是我们允许十个坐标误差,也就是说,我们可以在阴影的前十个坐标和阴影的后十个坐标之间判断成功。那么拼图的坐标在248到268之间,说明拼图是成功的。

因为我们在拖动一个按钮,拖动结束的时候也是针对按钮的,所以要判断按钮的X坐标和阴影的X坐标。

按钮x坐标比马赛克x坐标左方十个坐标,按钮x坐标等于马赛克x坐标-10。判断按钮x坐标的正确范围就足够了,所以如果按钮坐标在238到258之间,则认为镶嵌成功。

按钮拖动完成后,判断按钮的坐标范围。如果坐标范围在238到258之间,说明拼图成功,显示成功的弹出窗口。如果不在238和258之间,则拼图失败,并显示失败提示。

当拼图成功时,会显示成功提示,等待几秒后会跳转到第三页,得到验证码页;拼图失败时会显示失败提示,再次拖动按钮时会隐藏失败提示。

操作:选择按钮,创建新的交互。拖动完成后,将显示成功显示和添加情况。按钮的this.x值介于238和258之间。

显示成功提示:

微信高保真原型图--验证码登录

微信高保真原型图--验证码登录

等待2s,跳转到验证码登录页面:

微信高保真原型图--验证码登录

在拖动端交互中增加一个新的情况2,当按钮x坐标小于238或大于258时,会显示失败显示。

微信高保真原型图--验证码登录

微信高保真原型图--验证码登录

失败后,拼图会再次移动。移动拼图时,需要隐藏失败提示。选择按钮,拖动时在交互下添加新动作,隐藏失败显示。

微信高保真原型图--验证码登录

动词 (verb的缩写)第三页

1.页面概述

这是拼图成功后跳转的页面。它的主要功能是获取验证码,登录聊天界面。

2.交互概述

点击输入框,键盘显示,点击获取按钮倒计时60秒。填写验证码,验证是否正确,正确显示正确提示,跳转到聊天界面,错误显示错误提示。

3.要绘制的页面

4.互动讲解操作

键盘参照第一页显示隐藏的细节,忽略。

第一步描述:点击获取验证码按钮,出现确认手机号码的弹出窗口,点击弹出窗口取消隐藏弹出窗口,点击确定,隐藏确认手机号码的弹出窗口,显示发送成功弹出窗口,等待1s,隐藏发送成功弹出窗口,开始60s倒计时;

第一步:选择获取按钮并创建一个新的交互。点击后会弹出一个确认手机号码的窗口。

微信高保真原型图--验证码登录

选择“确认手机号码”弹出窗口中的“取消”,创建新的交互,并在单击时隐藏“确认手机号码”弹出窗口。

微信高保真原型图--验证码登录

在确认手机号弹出窗口选择确定,点击新增交互时隐藏确认手机号弹出窗口。显示成功发送弹出窗口;等待1s;隐藏发送成功弹出窗口。查看60s倒计时最后一篇文章,此处忽略。

微信高保真原型图--验证码登录

第二步描述:输入验证码,登录时点击判断验证码,验证码正确则跳转到聊天界面;如果验证码错误,则显示错误提示弹出窗口;

第二步:假设验证为123456,点击新建交互时,选择登录按钮,打开新页面链接。添加大小写,输入文本框的文件文本==123456。

微信高保真原型图--验证码登录

微信高保真原型图--验证码登录

添加案例2,输入文本框的文件文本!=123456。添加操作显示验证码错误弹出窗口:

微信高保真原型图--验证码登录

微信高保真原型图--验证码登录

第三步描述:验证码错误中出现错误弹出窗口后,点击【取消】隐藏错误弹出,输入框文本变为默认“请输入验证码”;

第三步:选择错误弹出的取消,新建交互,点击时隐藏错误弹出;将输入框的文本值设置为“请输入验证码”。

微信高保真原型图--验证码登录

此操作完成后,微信验证码登录的所有步骤都完成了。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/508.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息