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

一.流程图

第二，分页演示

整个过程分为三页:第一个验证码页，第二个拼图页，第三个验证码页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。添加操作显示验证码错误弹出窗口:

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

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

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