输入框中的反馈

表单中输入框的反馈机制小结

输入框的组成

输入框的反馈按时间分

1，输入前：提示。

2，输入过程：校验。提交结果前：针对部分验证项给予信息提示，及时建议，表单字段内容验证。（适用规则12346）

3，输入完成：反馈

1）提交过程中：对结果实时校验并给予反馈，表单字段内容验证。（适用规则578）

2）提交后：点击提交按钮后，成功失败提示、信息预览。

八种校验规则

1，验证内容的存在，必填项已输入

2，验证内容的合理性，是否有不可使用的内容

3，验证内容的可行性，数据的特定范围（隐性字符限制，如手机号限11位）

4，验证必选项是否已操作

5，验证内容的二次确认

6，验证内容的格式

7，验证内容的长度

8，验证内容的唯一性

---

实时校验（real-time validation）

正确、错误、警告、正在校验4种反馈结果

提交结果前的及时建议，表单中下拉选择器带搜索的组件就是其中的一种，如关键词联想

关键词联想

---

关于提示文本/占位符

占位符既可以作为标题，又可以作为提示，还可以提供默认值。比如微博或淘宝中的占位符，可以作为输入内容直接点击搜索，游戏中注册时姓名的占位符，会自动填充姓名。

可作为默认值的占位符

占位符作为提示不宜过长，过长则应该再输入框外展示，如下图QQ注册时的提示在输入框下。

关于帮助/提示

QQ注册页面的输入前，输入中展开提示，输入后反馈

QQ注册

关于清除与回删

删除图标代表清除全部输入，软键盘上的删除或者键盘上的delete，有时候代表回删，有时候代表清除。具体在于，输入密文（如密码）在信息校验前，键盘上的delete代表回删，在校验后，键盘上的delete代表清除；而对于铭文（如手机号），键盘上的delete只代表回删。

脉脉在密码验证前，删除图标和delete代表不一样，验证密码错误，图标和delete一样的意思。

脉脉的登录

mac系统，登录输入密码的时候，在校验前（回车），delete键表示回删；再校验后，密码错误，输入框震动，并且自动清除。

---

不同类型的反馈

1，视觉反馈：如形状颜色、模态视图等

视觉反馈色彩的使用，设计心理学色彩对视觉的影响我们可以知：通知为蓝色，警告为黄色，错误为红色，成功确认为绿色。

视觉反馈中的色彩应用

2，触觉反馈：如震动、压感等

3，听觉反馈：声音

---

文章参考，

微信公众号：呆呆U理，https://mp.weixin.qq.com/s/erDyj5A-HAwGZXBQrJdyoA（拆解「输入框」，理解输入反馈的规则逻辑）

简书文章：https://www.jianshu.com/p/4fd25cc69034（优秀交互案例分享——提示反馈类）

人人都是产品经理：http://www.woshipm.com/pd/2306196.html（交互设计 | 如何做好操作反馈规范的设计？）