大家好，我是大明同学。
这期内容，我们来用Axure来制作一个短信验证登录页面的小案例。
验证码登录小案例
创建手机号输入框所需的元件
1.打开一个新的 RP 文件并在画布上打开 Page 1。
2.在元件库中拖出一个矩形元件，选中矩形元件，在样式窗格中，命名为边框，将宽值设置为350 ，高值设置为50，线宽值为1 填充颜色灰色（#CCCCCC）。
2.在元件库中拖出一个文本框元件，选中文本框元件，在样式窗格中，命名为输入框，将宽值设置为260，高值设置为50，线宽值为0 ，附着于矩形元件上层，左侧缩进 40。
3.在 iconfont素材库里找一个手机icon，选中手机icon 在样式窗格将宽设为40 高设为50，填充或字体颜色调整为灰色（#CCCCCC）。
4.在找一个清除按钮icon，选中清除按钮icon 在样式窗格命名为清除，将宽高设置为50，填充或字体颜色调整为灰色（#CCCCCC）。
5.在元件库里找一个动态面板元件，选中动态面板在样式窗格中命名为验证手机号，将宽高设置为50，在动态面板内拖入一个矩形元件输入文本fx，并添加State2 用于辅助校验手机号位数。
* 辅助校验元件大小填充没有必要的设计规则，可以根据自己的习惯设计，只要知道这个元件是用来干啥的就行，动态面板内必须添加State2，否则无法校验。
好的，来看一下手机号输入框所需的所有元件。
创建验证码输入框所需的元件
1复制前面做好的矩形元件和文本框（输入框），粘贴到画布，选中文本框元件，将宽值改为120。
2.在 iconfont素材库里找一个信件icon，选中信件icon 在样式窗格将宽设为 40高设置为 50，填充或字体颜色调整为灰色（#CCCCCC）。
2.在元件库中拖出一个热区元件，选中热区元件，在样式窗格中，将热区元件命名为 短信验证码热区 宽值设置为120，高值设置为50。
好的，来看下验证码输入框所需的全部元件。
创建获取验证码按钮所需的元件
1.在元件库中拖出一个矩形元件，选中矩形元件，在样式窗格中，命名为 短信验证码按钮 字体颜色为蓝色（#0052D9），将宽值设置为100 高值设置为50，线宽值为0 ，输入文本 发送验证码。
2.在元件库中拖出动态面板元件，选中动态面板元件，在样式窗格中，命名为 按钮状态，将宽值设置为80 高值设置为30 ，在动态面板内添加State2，用于改变短信验证码倒计时交互。
好的，来看一下获取验证码按钮所需的全部元件。
创建登入按钮所需的元件
1.在元件库中拖出一个矩形元件，选中矩形元件，在样式窗格中，将宽值设置为350 高值设置为50，线宽值为0 填充颜色为蓝色（#0052D9），输入文本 登录 字体颜色为白色，并与手机号输入框 左侧对齐。
2.在 iconfont素材库里找一个等待icon，选中等待icon 在样式窗格中命名为加载图标，将宽高设置为 20，填充或字体颜色调整为灰色（#CCCCCC）。
3.制作一个勾选复选框，在元件库中拖出一个矩形元件，选中矩形元件，在样式窗格中，命名为 TXT，将宽值设置为100 高值设置为34 ，线宽值为0 ，输入文 自动登入，字体颜色为灰色 （#999999），边距 左侧 20。
4.复制上面做好的矩形元件，粘贴到画布，在iconfont素材库 找一个正方形和勾选 icon，正方形icon和矩形元件左侧对齐，选中 自动登入，正方形、矩形 右键 组合。
好的，到这里大概需要的元件其实已经做得差不多，为了让这个小案例更完美一些，还可以加入第三登录能力。
创建第三方登录icon所需的元件
1.在iconfont素材库 找所需要一键登录的icon，右键 组合 并与登入元件对齐。
这就是制作登录案例需要用的所有元件了。
创建交互
创建手机号输入框的交互状态
边框
1.选中矩形框，在交互窗格中点击新建交互，鼠标移入时 设置选中 当前为 真 ；鼠标移出时 设置选中 当前为 假。
2.添加形状属性 交互样式 元件选中时的样式 线段颜色 蓝色（#0052D9） 边框宽度 1；元件禁用的样式 线段颜色 蓝色（#0052D9）外部阴影 淡蓝色 （#0079FE） 80% 阴影 x y轴 0 模糊 3 。
fx 手机号校验
1.在设计验证手机号元件之前，需要先创建一个全局变量，在项目下拉选项中找到全局，点击添加全局变量 phonenumber 默认值为 0。
2.选中 fx 元件，在交互窗格中点击新建交互，单击时，启用情形判断
情形1： 添加条件 元件文字长度 输入框 等于 值 11 并且 元件文字 手机号输入框 是 数字 ；
* 一般手机号都是11位数字组成，当然还有更复杂的需要判断开头前几位。
添加动作 设置变量值 phonenumber 为 1；启用 短信验证码按钮；隐藏短信验证码热区 。
情形2：否则 如果 真
复制情形 1 设置变量值 启用/禁用 交互粘贴到情形 2 将phonenumber 为 1 改为 phonenumber 为 0，启用短信验证码按钮 改为禁用。
3.选中fx 元件设为隐藏，我们来看看 fx 手机号校验元件的完整交互。
手机号文本输入框
1.选中手机号文本输入框，在交互窗格中点击新建交互，文本改变时 启用情形判断。
情形1：元件文字长度 当前 不等于 值
添加动作 显示/隐藏 显示 清除 按钮；触发事件 验证手机号 单击时 。
情形 2 否则 如果 真；复制 情形 1 显示/隐藏 触发事件 粘贴到情形 2 将显示清除 按钮 改为 隐藏 。
2.复制边框 鼠标移入时、鼠标移出时 交互 粘贴到手机文本框。
3.新建交互 获取焦点时 启用情形判断
情形1：添加条件 元件文字 当前 不等于 文本 ；添加动作 显示/隐藏 显示清除 按钮 ；启用/禁用 禁用 边框 。
情形 2 否则 如果 添加条件 元件文字 当前 等于 文本 ；添加动作 启用/禁用 禁用 边框 。
4.新建交互 失去焦点时 启用/禁用 启用 边框 ；设置选中 边框 值 为 假 ；等待 200 毫秒 ；显示/隐藏 隐藏 清除 按钮 。
5.设置文本框属性 交互样式 提示文字样式的样式 字色 灰色（#CCCCCC）提示文本 请输入手机号 隐藏提示 选择 获取焦点 最大长度 11 。
清除按钮
1.选中清除按钮 在样式窗格中设置为 隐藏 ；在交互窗格中点击新建交互 单击时 设置文本 手机号输入框 值 为 。
组合手机号输入框
1.选中 边框 手机icon 手机号输入框 清除按钮 右键 组合。
预览交互
点击预览，在预览页面 鼠标移入 移出手机号输入框 会显示设计交互效果 在手机号输入框 输入文本时 会显示清除 按钮 点击清除 按钮 清除输入文本。
获取验证码按钮
1.选中获取验证码按钮在交互窗格中点击新建交互，单击时，启用/禁用 禁用 当前 ；添加动作 设置动态面板状态 循环 到下一项 勾选循环 勾选循环间隔 1000毫秒。
2.设置形状属性 交互样式 元件禁用的样式 勾选字色 灰色（#CCCCCC），并勾选禁用，如果没有找到禁用勾选框，点击显示全部按钮。
循环
1.在设置按钮状态元件之前，需要先添加一个全局变量 在项目下拉列表中找到全局变量 添加 RegisterTime 默认值 60。
2.选中按钮状态元件在样式窗格中点击新建交互 状态改变时 启用情形判断
情形 1：添加条件 变量值 RegisterTime 大于 值 1。
添加动作 设置变量值 RegisterTime 值 [[RegisterTime-1]] ；设置文本 短信验证码按钮 富文本 为 [[RegisterTime]]s 后重新获取 字色灰色 （#CCCCCC）。
情形 2：否则 如果 真 ；将情形1设置文本交互复制粘贴到情形2 把 [[RegisterTime]]s 后重新获取 改为 重新获取 字色蓝色 （#0153D9） ；添加动作 设置变量值 RegisterTime 为 60 ；启用/禁用 启用 短信验证码按钮 ；设置面板状态 按钮状态 停止循环。
*按钮转态 动态面板，添加 State2状态，这一步别忘了，不然没办法循环。
3.选中按钮转态元件置于获取验证码底层，在看看 按键状态 的完整交互。
预览交互
点击预览，在预览页面手机号输入框输入 11位数会点亮获取验证码按钮，点击按钮进入60秒倒计时，倒计时结束按钮切换为重新获取，点击重新获取，再次进入倒计时 循环。
*素材时长有限，做了剪切处理。
验证码输入框
1.在设计验证码输入框之前，需要先新建一个fx 校验验证码，当然复制验证手机号的fx 元件也行，选中复制的fx 校验元件，在样式窗格将验证手机号改为校验验证码。
2.在项目下拉列表中找到全局变量，添加Code 变量 ，默认值 为0 。
3.选中fx 校验验证码元件，在交互窗格中点击新建交互，单击时，启用情形判断
情形 1：如果 元件文字长度 于 输入框 ≤ 值 6 并且 元件文字长度 于 输入框 ≥ 4。
添加动作 设置变量值 Code 为 1。
情形 2：否则 如果 真 添加动作 设置变量值 Code 为 0。
好的，我们来看看 校验验证码的完整交互 。
4.复制清除按钮，粘贴到验证码输入框 右侧，在交互窗格中将单击时，设置文本，输入框改为验证码输入框。
5.选中验证码输入框，在交互窗格中新建交互，文本改变时，启用情形判断
情形 1：如果元件文字 于 当前 不等于 文本
添加动作 显示/隐藏 显示 清除 按钮 ；触发事件 校验验证码 单击时 。
6.复制情形1 将元件文字 于 当前 不等于 文本，改为等于 ；显示/隐藏 改为隐藏 清除按钮，其他交互不变。
7.新建交互，鼠标移入时，设置选中 边框 为 真。
8.复制鼠标移入时交互，粘贴到鼠标移出时，设置选中 边框 改为 假 。
9.新建交互，获取焦点时，启用情形判断
情形 1：元件文字 当前 不等于 文本，显示/隐藏 显示清除 按钮 ；启用/禁用 禁用 边框。
情形 2：元件文字 当前 等于 文本，启用/禁用 禁用 边框。
10.新建交互 失去焦点时 启用/禁用 启用 边框；设置选中 边框 为 假；等待 200毫秒 ；显示/隐藏 隐藏 清除 按钮。
11.设置文本框属性 交互样式 提示文字的样式 字色 灰色 （#CCCCCC）；输入类型 Text ，提示文本 请输入短信验证码 ，隐藏提示 获取焦点 ， 最大长度 6。
好的，我们来看看 短信输入框的完整交互 。
边框
1.选中短信验证码边框 ，在交互窗格中新建交互 鼠标移入时 设置选中 当前 为 真。
2.在交互窗格中新建交互 鼠标移出时 设置选中 当前 为 假。
3.将短信icon移动到边框 左侧对齐 。
4.将短信验证码热区元件 附于短信验证输入框上层。
5.选中短信icon 、输入框 、边框、清除按钮 发送验证码 循环 元件 右键 组合。
预览交互
点击预览，在预览页面手机号输入框输入 11位数手机号，验证码输入框支持输入，点击清除按钮，清除验证码输入框输入文本 。
登录按钮
1.在创建登录按钮的交互之前，同样也需要创建一个校验元件fx，fx元件可以直接复制一面任意一个，用于校验手机号和验证码。
1.选中复制fx 元件，在交互窗格中将命名改为 校验手机号和验证码，新建交互，单击时，启用情形判断
情形 1 ：添加条件 变量值 phonenumber 等于 值 1并且 变量值 Code 等于 值 1
添加动作 启用/禁用 启用 登录 按钮
情形 2 否则 如果 真 添加动作 启用/禁用 禁用 登录 按钮
好的，我们来看一下 fx 的完整交互事件
选中验证手机号 fx 给情形1、情形2分别 添加交互 触发事件 校验手机号和验证码 单击时 。
选中校验验证码 fx 给情形1、情形2分别 添加交互 触发事件 校验手机号和验证码 单击时 。
1.选中登录按钮，在交互窗格中新建交互，单击时 启用情形判断
情形 1: 显示隐藏 显示 加载 按钮 逐渐 300毫秒 ；等待 1500毫秒。
*启用情形判断主要用于登录成功，失败，或其他情况，这里只做了登录成功的情形判断；加载icon如果不是SVG图标，则需要设置旋转交互。
1.设置 形状属性 交互样式，鼠标悬停的样式 勾选不透明 80；鼠标按下的样式 勾选不透明 100；元件禁用的样式 勾选填充颜色 灰色 （#CCCCCC）；按钮默认为禁用状态。
5.选中加载icon 设置为隐藏 附于登录文本左侧居中对齐。
6.选中登录、加载按钮右键 组合。
预览交互
点击预览，在预览页面手机号输入框输入 11位数手机号，验证码输入文字4位点亮登录按，点击登录 旋转加载交互。
自动登录复选框
1.选中自动登入复选框在交互窗格中创建交互，单击时 设置选中 当前 为 切换。
2.新建交互 选中改变时 当前 为 空白符号。
3.新建交互 选中 当前 为 勾选符号。
4.设置 形状属性 交互样式 鼠标悬停的样式 字色 蓝色 （#0052D9）；元件选中的样式 字色 蓝色（#0052D9）。
预览交互
点击预览，在预览页面点击自动登录勾选框会出现蓝色勾选效果。
第三方登录icon
1.选中第三登录icon，在交互窗格中 设置 形状属性 交互样式 元件选中的样式 字色 白色，填充颜色蓝色（#0052D9），同步配置其他icon。
预览交互
点击预览，在预览页面鼠标悬停在icon上会出现蓝色填充交互。
因为fx校验元件的交互事件是单击时，虽然看不见，但为了防止误触，可以添加一个动态面板，把做好的元件和交互粘贴到动态面板内，将fx元件移到动态面板右侧 。
预览交互
点击预览。
预览地址：https://bqeiac.axshare.com
那在实际工作中呢，登录页的交互其实要复杂的多，而且需要考虑很多条件，比如手机号开头，验证码时效，登录失败等等。
好的，这期内容到这里就结束。
我是大明同学。
下期见。
试题总结)
)
