Text fields（输入框/文本框）是一个历史悠久而经典的控件，当光标位于输入框时，用户可以在其中输入或复制粘贴文本、数字等内容。文本框是设计工作中常见的组件之一，无论是PC还是Mobile端，大多仅是样式上的不同，它们的交互行为上是可以相互参照的。输入框虽然看上去简单，但需要考虑的细节确不少，本文将详细介绍输入框的相关组成部分和注意事项。

之前有看过别人写关于输入框的文章，搞得我也想写写关于文本框这个控件使用场景的理解啦，因为看别人写的都是别人的理解，一定要自己深思熟虑总结后才是自己的，所以废话不多说，直接上干货。

先说说文本框都有哪些类型吧，从Text fields的不同样式分为以下几种：

内嵌式；

水平左对齐式；

水平右对齐式；

顶端对齐式；

1.内嵌式-文本框：

在这里不得不提到Label组件，他应该是控件或一组相关控件的名称或标题，与文本输入框成对出现时，则表示输入框的标题或内容，当然，也会有
特殊处理，对于常见的内容也可以用图标来代替Label,如果还需要标识出必填项这个属性，常规做法是在傍边增加一个「*」，甚至直接写”必填“汉字的。
Text field内嵌Label是最节省空间的做法，为了让Label和真正输入的内容做区分通常会把Label颜色调淡；实际上是把Placeholder text当码输入框等用户非常熟知的情况。

当然，还有更合适的方案来解决这个问题：

浮动标签(Float Labe)：
设计师Matt D Smith在内嵌Label的基础上发明了一种新颖的交互模式Float Label（dribbble ）：当用户在Text field中输入内容以后，内嵌Label会浮动到Text field
上方，成为顶端对齐。这种方式兼具内嵌Label和顶端对齐的优点，现在已经成为Material Design里Text field默认风格啦。

另外提一句，有时候在一个文本域控件内需输入较多文字

时则在最后还会加「…」。

2.水平左对齐式文本框：

这种对齐方式优点在于符合大部分用户的浏览习惯，便于用户快速浏览Label，但是在某些有短Label时与Text field的距离就较远，
用户从左往右浏览的时间会变得更长。当然，时间长也不是全是坏事，对于有陌生数据和需要谨慎填写内容的场景时反倒是能让用户减少出错的可能。

3.水平右对齐式文本框：

Label和Text field水平显示，Label右对齐。占用的屏幕高度减小，与左对齐一样节省了垂直空间，但Label长短不一时会显得参差不齐，
因此用户浏览效率会比垂直顶端对齐低很多。

凡事没有绝对，例如：这种对齐方式在pc端会更适合一些，pc显示面积要大很多，如果两侧的距离很充裕，
则参差不齐的视觉感受会被减弱很多，也会让Labe与Field的距离很理想，阅读起来会更加连贯自然。

4.顶端对齐式文本框：

Label和Text field垂直左对齐排列，从而形成顶端对齐的效果。用户只需从上往下依次浏览，因此浏览和填写的效率是4个对齐方式中最好的，而且占用屏幕横向空间少，
即使Label特别长也能很好的显示（这对支持多国语言的软件特别有用，因为有些语言比英文还要长很多）。但这种对齐方式会占用过多的屏幕高度，此外应当注意每组Label和Text field与其他组的间距，以免密密麻麻降低可读性。

接下来得说说一些细节的处理和具体场景的应用方式：


占位符文本/提示语（Placeholder text / Hint text）

Placeholder text是Text field没有内容时出现的灰色文字，当用户输入内容后将会消失，因此只能展示一些比较简短的信息。通常使用Placeholder text作为输入指引
（例如：“请点击输入评论”）或者表明输入的限制和示例（例如：“年/月/日”）。很多电商产品搜索框会把Placeholder text用于热门商品促销。

辅助说明/额外说明/帮助文字（ Helper text）

如果Text field的输入规则或者注意事项比较复杂，建议在Text field附近（一般是下面）添加Helper text进行额外说明。Helper text也可以用Tooltips或者Popover的形式来呈现。

MailChimp给密码输入框的Helper text加入了互动：输入框的复杂规则拆分成多个简单的条件，每当用户输入的内容满足一个条件，会给予相应的反馈，告知用户已满足这个条件，这样就把复杂的任务拆分得简单，用户输入不易出错。

初始默认值（Default value）

输入框内默认预留的字符，获取焦点后也不会消失，只有用户输入信息时才会消失，用户可以删除或者修改输入的字符。好的初始默认值能减少和降低用户的输入和认知负担。例如地图App路线导航功能的起点

输入框Default value是用户的当前位置，用户只需根据默认说明输入目的地即可开始导航，非常恰到好处的提高了效率。

自动获取焦点（Autofocus）

当用户点击Text field，光标出现弹出软键盘，表示该Text field已获取焦点，此时用户就能输入或者修改内容了。对于主要任务就是填写表单的页面，可以在用户进入该页面后，自动获取焦点。如果页面有多

个Text field，当用户填写完一个后，自动获取下一个的焦点，这样操作会更流畅。

输入方式

Text field的主要输入方式pc端是实体键盘，Mobile端主要输入方式是虚拟键盘，各端的方式都有助于用户提高输入效率，降低出错的可能性。

其实除了键盘外，合理运用其他输入方式也能提升输入效率。例如语音输入、常用标签输入、拍照识别文字、文字自动联想、历史记录、与其他输入类控件配合等。

输入限制展示

通常不同的产品对文本类型也有不同的要求，同时，文本类型多种多样、长短不一，但计算机能接收的文本是有限的。例如：手机号码肯定是数字，如果输入其他内容会报错。为了减少用户出错的可能性，

维护计算机系统安全稳定，必须对Text field进行一些输入限制，

例如：
    最短最长能输入多少个字符；
    是否能输入emoj表情符号等特殊字符；
    前后的空格是否过滤；
    能否支持从剪贴板粘贴等等。
    此外要考虑如果用户的输入超出限制或出错，应当如何给予用户合适的反馈，帮助    用户将内容修改正确。

对于需要字数限制的Text field，目前有3种字数限制展示风格：
       

     1. 当前已经输入的字数/字的最大长度。
     2. 一直显示「当前已经输入的字数」，达到最大字数限制后会提示超出长度。
     3. 当输入字数超过最大长度时，显示负数值且标红。

这三种方式给用户带来的感受是不一样的，这里举一个做的较好的例子，例如发微博和回复微博的Text area（文本区域/多行文本输入区）字数限制提示由原来「当前已经输入的字数/140字」，改为「只显示当前输入的字数，当字数最大值时会有提示标记元素。如果继续输入则会有更醒目的提示标记(红色气泡会有负数出现)且发送按钮置灰」，这样做的好处是用户不会在刚开始输入时，因为看到字数限制而刻意控制输入字数，打断心流造成情绪不畅或者降低输入动机，或许可以提高发微博和评论的活跃 。

快速清除按钮（Clear button）

对于手机软键盘来说，连续多次点击delete键删除多个字符比物理键盘体验要差得多，因此对于有修改内容需求的Text field可在右侧放一个Clear button，点击即可一键清空Text field中的所有内容。

Clear button出现时机有4种：

    1.获取焦点时才出现。
    2.有内容时就出现，即使没有获取焦点。这种适合搜索框，点击Clear button后清空     3.内容再自动获取焦点，一气呵成，直接进行下次搜索。
       一直出现。
    4.没有明显的Clear button，但是按一次软键盘的delete键直接清空所有内容。通常        密码输入框出错后会用这种。

密码输入框和可见性切换图标

在PC时代，电脑屏幕比较大，如果密码直接明文显示，容易被旁观者偷窥窃取，因此用星号「*」或「•」隐藏真实的密码。移动时代密码输入框密文显示也是很好的保护隐私的方式之一，但是，不法分子可观察软键盘按键顺序就可以窃取密码，不需要去看密码输入框，这点在涉及用户重要隐私和财产的产品中需要重点考虑。有数据显示，采用密码默认密文显示，通过可见性图标（Invisibility icon/Visibility icon）切换明文/密文，能明显提高转化率，而且不会降低安全性。

多行输入框的最大行高

根据Text field可以输入的行数，可分为单行文本框（Single-line text field）和多行文本框（Multi-line text field），由于手机现在的屏幕大小皆有，建议给多行文本框限制一个最大行高，如果达到最大行高，输入框内的文本可通过滚动条滑动。为了方便拇指滚动，建议最大行高大于3行。

特殊场景的实时校验

输入框校验意味着给用户反馈并引导他们改正错误，消除用户的疑惑。这个校验的结果应该是人性化的而非像机器般冷冰。数据处理过程中最重要也是最容易让人累觉不爱的地方是错误处理。犯错是人类天性，我们在填写输入框时也不可避免。如果设计得当，校验可以使原本表意不清的交互行为变得清晰易懂。

当用户在输入数据的过程中，他们不喜欢在最后提交时才发现自己犯了错误。正确的做法是，我们应该在用户刚刚刚填写完某条信息后就立刻告知他是否正确。
实时的页内校验可以立刻告知用户他们输入的信息是否正确。用户可以更快地修改错误，而不必等到按下提交按钮后才知道哪里错了。设计师可以给错误文案定义鲜明的颜色，比如红色或者橙色这种暖色调。

左图，表单输入内容直到点击提交后才报错，并且错误信息在输入框之外
右图，输入框下方实时显示了错误信息

校验不仅应该告知用户错误，还应告诉他们怎么做才是正确的，用户才会更有信心完成输入过程，也才校验的真正价值所在。

清晰的信息

用户时常有这样的困惑“刚才发生了什么？为什么会这样？”。此时应该提供一个直接了当的答案。因此校验信息应该清晰地说明：

    •  错误是什么以及可能产生错误的原因
    •  用户下一步应该做什么来改正错误

再次提醒，一定要避免使用机械性的术语。这条规则看起来很简单，但是有时却很容易被忽略。

适当的颜色

当设计校验信息时，颜色是一个可利用的好工具。根据惯例，红色表示错误信息，黄色表示警告信息，绿色表示成

功，这些都算是行业规范吧，但是也不是一定要去一味的遵守，具体要看项目的性质和对应人群。下图是一个校验密码输入框的好案例：

补充一点，再输入密码或者设置密码时现在好多产品都会允许或引导用户去设置首字母大写的情况，这样可以提升

密码的安全性，那么，就需要考虑用户在输入大写时的反馈以及输入错误时需要给出有效的提示和纠错机制。
另一个运用颜色来对文本输入框做出字数限制的反应。红色的字符计数器及红色下划线说明该输入框字数已超限。

界面中颜色的应用应该符合用户认知，这是衡量优秀视觉设计的重要标准之一。
到这你以为就完了吗？哈哈，当然没有，我们最后还是回顾下输入框需注意的常见情况。

预先提示：
    告诉用户输入内容是否有特殊要求（如规定不能使用标点符号）。
    告诉用户输入的字数是否有要求（如规定只能输入20个字）。
    告诉用户输入的内容是否要具有唯一性（如用户名）。

特殊限制提示：
    输入内容出现不合规的字符提示用户。
    输入的字数超出限定的范围提示用户。
    输入的内容在系统中已存在时提示用户。

再深入挖掘的话，还有很多细节，如：当用户在输入的最后多敲击了一下空格键，得在输入框中增加了一个字符，是否要将其自动去除，以帮助用户完成操作。

最后我找了一个例子，更加直观的来展示输入框的常见具体情况：

综上所述，希望给大家带来一些不一样的思考。