最近整理了一些输入框的有关内容，越是研究的深入越发现输入框不是之前认为的那么简单。

       作为交互设计师和产品经理如果不定义好输入框的一些行为，开发同学们就会按照自己的理解来写输入框，等到测试或者验收的时候就会出现各种问题。

       输入框最基本的作用就是输入，为了输入我们要做什么？我们要告诉用户是否需要输入，在哪里输入，应该输入什么，有什么要求（格式，个数，字符），更高级别的要求就是我们还要给用户好的体验。那我们怎么做到这些呢？

1.告诉用户是否需要输入

我们现在比较常用的时候在输入框附近出现红色的* ， 提示用户这个是必填项。

2.在哪里输入

一种是用光标的位置来告知用户在这里可以输入

另一种是把输入框整个高亮。当然也有两种结合的办法。

3.应该输入什么

一种是显示标签， 不过使用标签有时候会让页面显得不是那么简洁。

另一种是使用占位符，好处是页面简洁，不好的地方在于一旦用户开始输入，占位符就会消失，如果有时候用户忘记了应该输入什么就要把内容删除才能重新看占位符。

对于一些专业性强，用户不清楚的，或者涉及安全隐私，金钱有关的信息会用文案的方式提醒用户。

4.有什么要求

---  格式的要求，我们有以下三种处理方法：占位符提示 ； 有固定格式的（比如手机号）就可以把区号和手机号区分开来编辑 ； 直接在输入框附近出现格式要求的提示信息。

--- 个数的要求:一种处理方法是实时检查，提示用户还能输入多少字符。 这里说的实时其实不准确，准确的说就是一旦发现输入框的内容发生变化就进行检测。输入框的内容变化的来源有，用户正常输入，拖拽内容到输入框，复制黏贴等。另一种办法是到达字数限制的时候不可以再输入。（如果是app的话，键盘自动缩回。）当然还可以直接显示提示信息告知用户最多只能输入多少个字。对于个数的要求这一点要特别注意中文字符和英文字符，还有就是不同的键盘。就拿app举例，对于ios的自带键盘，在输入中文的时候，字母就已经显示在输入框里，如果是即时提示的，这时候很可能字数还没到就提示超过个数限制。

--- 字体的要求，对于一些复杂的输入框会有字体的设置。

--- 字符的要求，对于只能填写数字还是数字加字符，对于特殊字符如何限制等等。

5.如何提升用户体验

--- 提高舒适的点击区域，一般说来，拇指的触发区域应当控制在 45~57px之间，但是在移动端上，控件看起来太大会让人觉得不舒服，所以你的文本框高度应该设计在32~40px之间，这样看起来足够友好，又不会太大。

--- 自动提示减少用户输入，比如提示历史记录，推荐的搜索，或者输入@就自动提示常用邮箱的后缀，不过要注意的时这种提醒是由隐藏的时间要求的，比如提示信息出现大于2s，这样就失去了原本的意义。

--- 信息更清晰，对于一些特殊账号，提供固定的输入格式比如电话号码 344 ， 433；银行卡通常的的划分是4444X，X就是最后一位数为少于4的位数，身份证684。当时要注意的时如果用户要删除的时候要自动帮组用户删除空格。

--- 删除，可以提供一键删除，就免去用户一个一个删除的苦恼。

--- 键盘自动回缩，当用户输入规定的字符后，自动回缩键盘。

--- 即时校验，一种是边输入边校验，这种情况适用于不需要从后端数据库返回数据的场景，只需要前端通过格式就可以进行校验的。另一种是输入结束后立刻对本输入框进行校验。

--- 对于app，根据输入框的需要填写的内容自动弹出不同的键盘，比如手机号/身份证等弹出数字键盘，英文字符弹出英文键盘，中文字符弹出中文键盘

6.需要注意的地方

--- 对于app，点击输入框键盘回弹出，此时键盘可能会盖住之前页面的一些内容甚至时按钮。我们一般可以通过以下两种方式来处理，一种是一开始就预留出键盘的位置，这样键盘弹出，页面样式不需要要任何改变。另一种是键盘弹出时，其他内容自动上移。根据需要选择自己合适的方式。

--- 考虑换行的问题，如果文本输入内容原来大小的输入框已经显示不全了，这时候我们可以采取以下两种措施。一种是文本框随着输入文字增加而变大，当大到一定大小输入框大小固定，文字内容上移。另一种方法是输入框大小一开始就固定，超过输入框大小，内容自动上移。不管采用哪一种都要注意，裸露出部分遮挡住的文字，提醒用户这前面还有内容。

--- 对于敏感信息，比如密码，身份证号等。密码全部掩藏，身份证号可以掩藏中间一部分。

--- 对于内容预览，也有两种处理的方法，当输入完成键盘自动缩回，文本框自动最大化可以进行内容预览。另一种是通过上下滑动进行内容的预览。

有多个提示信息的时候，提示信息如何展示。一种是定义提示信息的优先级，先展示优先级高的，另一种处理方法是全部显示，此时就要考虑页面布局，尽量简洁。

7.输入框组合

我们在现实中更多见的是多个输入框的组合，这时候我们要考虑的就是各种组合情况。比如校验是一旦完成一个输入框就进行校验还是填写好全部输入框内容后点击提交然后进行校验，这种情况取决于我们的需求，如果我们有很多个输入框，那此时最好是填写好一个输入框就进行校验，否则等用户提交了显示你有10几个输入框填写错误，这种用户体验是很糟糕的。

8.复杂的输入框

有些输入框里可以插入图片，可以改变样式，此时它不仅仅是一个输入框，有时候更像是一个文本编辑器。这时候你要考虑的情况就更多了。比如选定格式后换行格式是否保存，用户复制黏贴的内容是否保存原来的样式等等。

9.输入框的变形

如下图是一个输入四位验证码的四个框。开发同学把这个做成了四个输入框，这就导致了一个问题，用户要删除的内容的时候，不能通过点击删除键直接从右到左删除。每删除一个，需要鼠标点击到对应的输入框然后才能删除。这样的用户体验是非常糟糕的。其实我们要的功能就是一个简单的输入框的功能，那我们要么把这个做成一个输入框，要么就是底层就是输入框，只是在样式上展现成四个输入框，每个只能输入一个字符。

       虽然我们说了输入框的这么多种情况，在我们平时的工作中不一定要面面俱到。要避免过度设计，有一些平时不容易出现的场景，开发难度比较大的，对于提升产品没有太大帮助的就可以适当删减，把我们的精力放在真正重要的地方。

       我这里整理了一份表格，大家可以作为参考，平时也可以使用它来检查自己是否有某一方面缺失。