在PC端后台设计中，我们会经常见到各种表单设计，包括输入框、单选、多选等各种不同类别的表单。而对于App而言，除特定的App外，注册会员、身份认证的功能是比较常见的表单设计。虽然不同于PC端表单设计的复杂性，在App中，仍需要考虑常见的交互问题，包括表单输入操作、输入内容的限制、表单提交以及修改保存等。
目录：
1、表单输入通用规则
2、输入框提示
3、表单样式
4、输入框限制
5、异常情况处理
1】输入通用规则：
1、显示标题、输入框、输入框提示语、是否为必填项
2、用户获取焦点，输入内容后隐藏默认文案，显示清除图标
3、用户已输入内容，重新获取焦点，修改，显示清除图标，不自动清除已输入内容
4、用户已输入内容，失去焦点，校验输入框内容，校验失败，显示对应的提示语，提示语显示在文本框下方，自动调整文本框上下间距。
5、清空文本框，显示默认文案，隐藏清除图标
6、已校验失败情况，文本框再次获取焦点输入任意内容，隐藏提示语，失去焦点再次校验（同4）
7、获取焦点，弹出输入键盘遮挡了输入框内容，页面自动上移
输入框输入交互
2】输入框提示方式：
1、提示语在输入框下方显示
2、toast提示
输入框校验错误提示
3】输入框样式选择：使用输入框或长下划线
①：输入框+输入提示语：默认显示输入框提示语，输入完成后直接显示输入的内容
（图左✓）适应于表单项内容差别明显，表单项内容意义相近
（图右✗）用户输入内容后查看时，会对输入的内容产生歧义
输入框样式1
②：标题+输入框+输入提示语：
默认输入标题、输入框、输入提示语；输入框和输入标题一行显示：
（图左✓）适应输入框标题字数相近（1-2字以内）且输入框内容限制字数能一行显示完整
（图右✗）输入框标题文字差别会影响页面布局的整齐性
输入框样式2
③：标题+输入框+输入提示语：
默认输入标题、输入框、输入提示语；
（图左✓）标题和输入框一行显示：手机一屏高度可容纳的表单项少，易读性不强
（图右✗）标题和输入框分行显示：手机一屏高度可容纳的表单项少，易读性较强
输入框样式3
4】输入框输入限制：
1、 字符限制：中英文、特殊字符、数字、emoji等
2、字数限制：单行输入15-20字
4、输入异常提示语显示文案
5、是否是必填项
6、多行文本注明是否支持用户换行
5】异常状态：
1、表单页返回确认弹窗
2、提交按钮校验
3、考虑当前页面异常状态
①杀掉进程，不保存当前编辑的信息，此前保存过的信息不更改。
②退出重新登录，登录同一个账号，显示已保存信息可继续编辑。登录其他账号，不显示
③在本机保存后切换其他设备，不显示
④点击保留不需要校验合法性，提交时才校验
网友评论