1. 界面整体展示
2. 原型视频演示
3. 原型文件
4. 原型制作
4.1 原件和样式
4.1.1 设置背景颜色
4.1.2 logo和输入背景框
logo的添加和输入背景框的添加主要看个人喜欢，可以自行选择颜色和图片，以及样式
插入图片：
图片样式：
输入背景框样式：
4.1.3 输入框和登录按钮等...
同样的，这些地方也主要看个人喜好选择样式，我的仅作参考
需要注意的是，文本提示对应的元件是文本标签，而输入框对应的原件是文本框，记住登录信息对应的是复选框
样式数据参考：
4.2 交互
4.2.1 密码可见和隐藏
效果展示：
原始输入时，密码加密，不显示：
点击小眼睛，密码可见：
步骤：
右键密码输入框，选择转换为动态面板
转换为动态面板后，双击输入框，进入编辑
通过顶部添加状态，可为动态面板添加多个状态并改名
选中hide状态，既是密码隐藏状态进行编辑(注意：因为防止在最上面的状态是动态面板默认状态，因此需要将hide状态放在最上面，既是默认密码隐藏)
在hide状态中添加闭眼小眼睛,并设置样式，右键hide状态中的密码输入框，选择输入类型为密码，这样子hide面板中输入密码时会自动变为“···”小圆点的形式
在display状态中添加睁眼小眼睛(既是密码可见)，并设置样式
接下来根据显示密码和隐藏密码的逻辑为小眼睛添加交互动作：
点击hide面板中的闭眼小眼睛时,需要跳转到display面板展示密码 --- 为闭眼小眼睛添加交互事件，单击时设置密码输入框状态为display
点击diasplay面板中的睁眼小眼睛时，需要跳转到hide面板隐藏密码 --- 为睁眼小眼睛添加交互事件，单击时设置密码输入框状态为hide
同时，hide面板和display面板中的密码要时刻相同 --- 为输入框添加事件，displayz获取焦点时将文本内容设置为hide密码框的中的内容
4.2.2 登录校验
账号：Zhnx
密码：Zhnx
效果展示：
用户名和密码不可以为空：
账号密码错误提示、登录成功提示和跳转主页：
步骤：
添加2个文本标签分别为“用户名不可为空”和“密码不可为空”，并分别设置hide和display两个状态
为登录按钮添加交互事件判断账号密码是否为空
添加两个到动态面板分别做错误提示面板和成功提示面板，同样的设置hide和display两个状态,并为登录按钮添加交互事件
