今天和大家分享的是最常见的用户登录的原型设计，适用对象：想加入产品坑的新手小白。

1. 元件准备

用户名、密码的输入框由矩形、icon、文本框三个元件组成。

为方便区分，将用户名输入框元件中，矩形命名为“矩形1”，文本框命名为“用户名”，文本框元件属性设置为：text、隐藏边框，增加提示文件“用户名、邮箱、手机号”，三个元件排列好组合，命名为“用户名输入框”。

将密码输入框元件中，矩形命名为“矩形2”，文本框命名为“密码”，文本框元件属性设置为：密码、隐藏边框，增加提示文件“登录密码”，三个元件排列好组合，命名为“密码输入框”。

参考网页登录样式，将各元件在界面中排列好。（可参考下图，本次教程只实现登录验证，不做注册和网络应用登录的交互）

2. 登录交互

登录的交互包括以下几个方面：

• 输入框鼠标选中时，高亮；
• 点击登录按钮时，用户名和密码校验；