首先直接上图最终效果图，如下：
账号密码登录界面
- 输入账号，输入密码
- 点击登录（登录成功，直接跳转已注册首页）
- 点击短信快捷登录，切换为短信快捷登录窗口
- 点击免费注册，跳转到注册界面
短信快捷登录界面
- 输入手机号
- 发送验证码（60秒后重新获取，当短信码下发时间超过1分钟时（假设1分钟超时过期），则提示“验证码已过期，请重新获取”，显示验证码提示信息）
- 输入验证码
- 点击登录（登录成功，直接跳转已注册首页）
注册界面
- 手机号注册
- 获取验证码
- 输入密码
- 再次确认密码（假如2次密码不一致，提示"您的账号或密码错误！"，2次密码一致，则弹出注册成功！）
是不是看起来很简单，下面我们来开始制作原型…
一、准备元件
首先利用元件文本标签、文本框、按钮等基础元件快速搭建好注册页面的线框图，将账号界面的输入框属性设置为输入框；密码文本框的属性设置为密码，对密码的显示进行加密，视觉上看到的都是星号。将校验提示、弹窗提示信息放置在各输入项的下方，默认隐藏。
二、设置交互
1、账号密码登录
为登录按钮”设置1个鼠标单击事件用例，设置如下：
- 用例一：给登录按钮，添加用例条件，如果账号框 == sthj123456，密码框 == 123456，那么就直接在当前窗口打开已注册首页（交互如下图）；
2、手机短信快捷登录
为发送验证码按钮设置2个鼠标单击事件用例，设置如下： - 用例一：
首先双击【验证码矩形】，将文本设置为：发送验证码；
其次，点击【顶部菜单栏】-》【项目】-》【全局变量】，点击弹窗中的“+”号，添加验证码的【全局变量】，这里命名为：captcha；想从哪个数字开始倒计时，即将此变量的默认值设置为哪个数字（此案例设为60）；
选择左侧导航中【设置文本】-》勾选【当前元件】-》设置文本的值为“[[captcha]]秒后重新获取”；
因为之前已经将全局变量captcha的默认值设为60，所以预览时文本为 “60秒后重新获取”；
即选择左侧导航中【其他】-》【等待】-》等待时间设为“1000”毫秒；
然后让全部变量 “captcha” 减1，变为59、58、57………，即再次选择左侧导航中【全局变量】-》【设置变量值】-》勾选【captcha】，值设置为：[[captcha-1]]。此时，“captcha” 的值已经变为“59”； - 用例二：
重新触发最先的点击按钮交互事件，让验证码的文本发生变化，即变为：“59秒后重新获取”；并且重复执行该交互，因此，再次选择左侧导航中【其他】-》【触发事件】-》勾选【当前元件】-》勾选【鼠标单击时】。
3、注册界面
为注册按钮按钮设置2个鼠标单击事件用例，设置如下： - 用例一：给”注册按钮“添加用例条件，如果手机号框 == 17612345678,密码框 == 123456，再次确认密码框2==123456，则显示“弹窗注册成功”（交互如下图）
- 用例二：给”注册按钮“添加用例条件，如果手机号框!=17612345678,密码框!=123456，再次确认密码框2!=123456，则显示“您的账号与密码错误！”（交互如下图）
结语
以上便于关于注册和登录页面中的各种交互提示及输入限制的实现思路与方法~