首先直接上图最终效果图,如下:
账号密码登录界面
- 输入账号,输入密码
- 点击登录(登录成功,直接跳转已注册首页)
- 点击短信快捷登录,切换为短信快捷登录窗口
- 点击免费注册,跳转到注册界面
短信快捷登录界面
- 输入手机号
- 发送验证码(60秒后重新获取,当短信码下发时间超过1分钟时(假设1分钟超时过期),则提示“验证码已过期,请重新获取”,显示验证码提示信息)
- 输入验证码
- 点击登录(登录成功,直接跳转已注册首页)
注册界面
- 手机号注册
- 获取验证码
- 输入密码
- 再次确认密码(假如2次密码不一致,提示"您的账号或密码错误!",2次密码一致,则弹出注册成功!)
是不是看起来很简单,下面我们来开始制作原型…
一、准备元件
首先利用元件文本标签、文本框、按钮等基础元件快速搭建好注册页面的线框图,将账号界面的输入框属性设置为输入框;密码文本框的属性设置为密码,对密码的显示进行加密,视觉上看到的都是星号。将校验提示、弹窗提示