登录注册页面的交互设计说明

说明对象
注册

普通登录

快捷登录

忘记密码

页面元素
文本框（用户名、密码、验证码）

button（登录、注册、更换密码）

页面切换（注册、登录、忘记密码）

toast/dialog

文本（注释文字）

说明类型

用户名-输入框

权限
●所有用户

状态
状态包括：未输入状态、输入状态、错误状态、异常状态；
1.未输入状态
●默认文本框内显示“请输入手机号码”
●色彩值偏灰；

2.输入状态
●默认显示内容消失；
●光标停留在文本框最左侧；
●文本输入色彩值为高亮色彩；
●输入框色彩表为高亮色彩；

3.错误状态
异常状态和操作反馈结果一致
●文本框内容输入内容有误；
●空文本提交；
●输入内容超出限制；

4.异常状态
●页面崩溃
●无网络
●页面加载失败
●系统错误

操作
pc设备
●指针移动到文本框中显示输入型指针；
●鼠标点击触发；
●允许文本框右键弹出操作菜单；
●允许使用键盘中复制、剪切、撤销等快捷方式指令；
●在文本框内拖动鼠标拖选内容；

移动端设备
●Tap（单击），触发；
●Press（长按），全选输入内容并弹出操作菜单；
●Press and Drag（长按拖动），在文本框内标拖选内容；

限制
1.输入限制
●仅限数字输入；

●内容边界，极限长度11位
●实践问题
○数字位数不满11时，button disabled状态，验证码无法发送；
○输入内容超出11位；

2.显示限制
●数字显示；

反馈
1.反馈纬度
●听觉、视觉；
2.类型
●正常操作；
●错误操作反馈；
3.反馈方式
●模块状态变化
●结果提示
○toast提示；（用户名输入有误）
○声音提示；
4.场景控制
●出现-触发反馈条件
●消失时间
○toast，点击界面中任意位置；不点击，5秒钟后消失；
○修改正确后模块状态恢复normal状态
●出现位置
○toast位于界面正中间；
○模块变化发生在模块当中；

密码-输入框
权限
●所有用户

状态
状态包括：未输入状态、输入状态、错误状态、异常状态；大小写区分（不作区分，不提示）；符号输入区分
1.未输入状态
●默认文本框内显示“请输入密码”
●色彩值偏灰；

2.输入状态
●默认显示内容消失；
●光标停留在文本框最左侧；
●文本输入色彩值为高亮色彩；
●输入框色彩表为高亮色彩；

3.错误状态
异常状态和操作反馈结果一致
●文本框内容输入内容有误；
●空文本提交；

●输入内容超出限制；

4.异常状态
●页面崩溃
●无网络
●页面加载失败
●系统错误

操作
pc设备
●指针移动到文本框中显示输入型指针；
●鼠标点击触发；
●不允许文本框右键弹出操作菜单；
●不允许使用键盘中复制、剪切、撤销等快捷方式指令；
●在文本框内拖动鼠标拖选内容；

移动端设备
●Tap（单击），触发；
●Press（长按），全选输入内容，不弹出操作菜单；
●Press and Drag（长按拖动），在文本框内标拖选内容；

限制
1.输入限制
●不允许空格；
●只支持密码由6-16个字符组成，区分大小写（不能是9位以下纯数字，不能包含空格）；
●超出输入框部分拖拉显示；
●实践问题
○数字位数不满11时，button disabled状态，验证码无法发送；
○输入内容超出11位；

2.显示限制
●“*”号显示；

反馈
1.反馈纬度
●视觉；
2.类型
●正常操作；
●错误操作反馈；
3.反馈方式
●模块状态变化；只支持密码由6-16个字符组成，区分大小写（不能是9位以下纯数字，不能包含空格）
●toast提示；（密码输入不正确，请重新输入）
4.场景控制
●出现-触发反馈条件
●消失时间
○toast，点击界面中任意位置；不点击，5秒钟后消失；
○修改正确后模块状态恢复normal状态
●出现位置
○toast位于界面正中间；
○模块变化发生在模块当中；

文本框如果以中文输入法输入英文时，enter建会默认输入当前英文字符，但也有可能和提交按钮重合，在交互设计中需要提醒前端分离Enter和输入法的问题。