今天和大家分享的是最常见的用户登录的原型设计,适用对象:想加入产品坑的新手小白。
1. 元件准备
用户名、密码的输入框由矩形、icon、文本框三个元件组成。
为方便区分,将用户名输入框元件中,矩形命名为“矩形1”,文本框命名为“用户名”,文本框元件属性设置为:text、隐藏边框,增加提示文件“用户名、邮箱、手机号”,三个元件排列好组合,命名为“用户名输入框”。
将密码输入框元件中,矩形命名为“矩形2”,文本框命名为“密码”,文本框元件属性设置为:密码、隐藏边框,增加提示文件“登录密码”,三个元件排列好组合,命名为“密码输入框”。
参考网页登录样式,将各元件在界面中排列好。(可参考下图,本次教程只实现登录验证,不做注册和网络应用登录的交互)
2. 登录交互
登录的交互包括以下几个方面:
- 输入框鼠标选中时,高亮;
- 点击登录按钮时,用户名和密码校验;
2.1 选中时高亮交互
这里的交互逻辑为:鼠标选中输入文本框时,输入框边框和icon颜色高亮显示,取消选中时,恢复原来样式。(以用户名输入框为例)具体设置为:
第一步:设置用户名输入框中的矩形和icon的选中状态;
以同样的方式设置icon的选中状态。
选中用户名文本款,设置获取焦点和失去焦点时,矩形和icon选中状态的值。
以同样的方式设置密码输入框的交互效果即可,设置成功后,预览效果如下:
2.2 登录时校验交互
登录验证主要包括以下几个部分:
- 用户名、密码为空;
- 用户名不存在,登录失败;
- 用户或密码输入错误,登录失败。
首先添加一个动态面板,命名为提示,设置为隐藏;添加四个状态:
- 用户名、密码为空;
- 用户名不存在;
- 用户名、密码错误;
- 登录成功(实际可不用,成功后直接跳转,这里只做展示)。
每个面板增加各个状态对应的提示内容,
然后,开始设置登录按钮的校验交互,添加鼠标点击时用例,通过的输入值判断显示提示面板的状态。提示面板显示时,增加下推元件效果。
本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/215362.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除