App表单交互设计

在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、考虑当前页面异常状态

①杀掉进程，不保存当前编辑的信息，此前保存过的信息不更改。

②退出重新登录，登录同一个账号，显示已保存信息可继续编辑。登录其他账号，不显示

③在本机保存后切换其他设备，不显示

④点击保留不需要校验合法性，提交时才校验