从个角度讲解该如何画出输入框

　　输入框是PM设计原型常用的控件，那么在画相应原型的时候需要考虑哪些点呢？本文从视觉、交互、逻辑等3个角度来讲解如何画出输入框，如何画原型和写文档。
　　输入框的状态
　　输入框的常见状态，相信大家都有一定的了解。
　　默认状态：即首次看到该输入框的样式效果。
　　悬停状态：即鼠标悬停在输入框的区域，此时光标会变化。
　　激活状态：即鼠标点击了输入框，此时焦点在输入框。
　　输入状态：即正在输入文字。
　　输入完成状态：即输入文字完成，且鼠标焦点不在输入框。
　　禁用状态：即该输入框无法输入。可用于查看或者代表当前用户没有权限。
　　输入框是否必填
　　通常表单页面有很多输入框，不是所有的都必填，所以需要区分显示。
　　非必填：不做处理。
　　必填：标题前面加个红色星号键。
　　输入框的样式
　　每个输入框必然伴随着标题描述该输入框的用途，常见的有以下三种样式：
　　左右结构：用得最多的样式。
　　上下结构：用得较多，缺点是需要多个输入框的时候回占据非常多的区域。
　　内嵌结构：利用提示文字充当标题，缺点是输入的时候无法看到标题。
　　是否设置提示文字
　　为了让用户知晓输入框的约束条件或者该输入什么，可以在输入框内部设置提示文字。
　　无提示文字：即该输入框无需提示约束条件。
　　带提示文字：设置之后，如果输入内容则自动隐藏。
　　验证输入结果
　　当用户进行表单输入后（判断依据为当前输入框丢失鼠标焦点），立即对输入结果进行验证并显示结果。
　　验证通过：输入框后面显示成功的图标。
　　验证未通过：输入框后面显示失败的图标，同时输入框高亮提醒。
　　显示约束条件文案
　　当用户输入内容的时候，系统自动判断是否符合约束条件，如果不符合则立即显示约束条件且输入框高亮提醒。
　　左右结构：比较常见。
　　上下结构：需要提前预留空间，处理较麻烦。
　　（1）输入框最多输入XX字
　　当输入类型为字符串的时候，可能需要加这种约束条件。
　　超过最大字数，无法显示到输入框；
　　同时输入框下方显示约束文案，且为红色；
　　约束文案通常为＂最多输入x字＂。
　　（2）输入框最大值x
　　当输入类型为数字(含金额)的时候，可能需要加这种约束条件。
　　失去焦点的时候，判断是否超过最大值，如果超过，则自动修正为最大值；
　　同时输入框下方显示约束文案，且为红色；
　　约束文案通常为＂最大输入x＂。
　　（3）输入框最多x位小数
　　当输入类型为金额的时候，可能需要加这种约束条件。
　　失去焦点的时候，判断是否超过x位小数，如果超过，则自动略去后面的小数。
　　约束文案通常为＂最多允许x位小数＂。
　　（4）输入框内容不能重复
　　有时候我们还需要判断输入框内容，是否和数据库里该字段的值重复？
　　输入类型通常为字符串；
　　失去焦点的时候，判断输入值是否已存在，如果已存在，请高亮输入框；
　　同时输入框下方显示约束文案，且为红色；
　　约束文案通常为＂该名称已存在，请换一个＂。
　　总结
　　以上就是设计输入框原型的时候，通常需要考虑的细节点，希望通过本文的梳理，PM能够了解到输入框的学问还是很深的。
　　提供原型下载学习：https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g
　　相关阅读
　　善用Axure写PRD，APP文本框通用的输入规则
　　善用Axure写PRD，全局规范一个都不能少
　　善用Axure写PRD，彻底丢弃Word和PPT