• 文本框是什么 •

文本框，英文原名Text fields，是图形用户界面的计算机软件中能够显示用户输入/修改或从列表选择的信息文本的框格区域。文本框包含有通常在用户界面中可视的标签（Labels）。标签是文本字段，用于描述框中显示的信息的类型。在文本框中还有提示文本（Hint text），它是对输入信息起到建议作用的占位符，同时也是对输入格式的说明。在输入框上/下方可能会出现帮助文本（Helper text），它是展示额外补充的信息，当光标位于输入框时，用户可以在其中输入或复制粘贴文本、数字等内容。文本类型多种多样、长短不一，但是计算机能接受的文本是有限的，业务方通常对文本类型也有要求。输入限制考虑到一旦用户的输入超出限制或出错，就会给予用户合适的反馈，帮助用户将内容修改正确。

• 文本框的结构 •

标签

用户需要一个清晰的文本标签来告诉他们，在文本框中将要输入的字段到底是什么样的数据。而有时用户也需要借助字段相关的图标（icon）来理解输入框对应的含义，就比如看到放大镜立刻会联想到搜索。但是整体上来说，文本类型的标签是必不可少的，因为清晰的标签会让用户在操作的时候更加理解和配合，所以不推荐标签的文本过长，应该简洁易懂。部分APP会利用标签的颜色，在确保对比度的前提下配合整体的配色方案来增加识别度。

浮动标签（Float Label）是Material Design里文本框的默认风格，是由设计师Matt D Smith发明的一种新颖的交互模式：当用户在文本框中输入内容以后，内嵌的标签会浮动到文本框的上方，并成为顶端对齐。

占位符文本

在填写文本时涉及的数据呈现方式各式各样，所以在输入信息的时候需要占位符文本/输入来提示用户。

占位符文本/输入提示（Placeholder text）是文本框中没有内容时出现的灰色文字，当用户输入内容后将会消失，因此多数情况展示一些比较简短的信息。占位符文本/输入提示一般作为输入指引（例如：“请点击输入”）或者表明输入的限制和示例（例如：“电话号、座机号”）。现今很多电商产品搜索框会把占位符文本/输入提示用于大数据抓取的商品或者热门商品促销。

辅助说明

如果文本框的输入规则或者注意事项比较复杂，建议在文本框附近（一般是下面）添加辅助说明（Helper text）进行额外说明，多数情况下这类信息不超过100字。说明可以用提示框（Tooltips）或者可操作的提示框（Popover）的形式出现。生活中常出现的场景有：需要填写信用卡号或者服务条款链接之类的存在。它们的出现，向用户解释了一些令人困惑的问题。

初始默认值

初始默认值（Default value）是输入框内默认预留的字符，在获取焦点后不失，但用户可以进行编辑或者删除。优秀的初始默认值会减少用户的输入负担，比如地图App路线导航功能的起点输入框初始默认值是用户的当前位置，用户输入目的地后即可开始导航，提高了效率。

快速清除按钮

对于手机软键盘来说，连续多次点击delete键删除多个字符比物理键盘体验要差得多，因此对于有修改内容需求的文本框可在右侧放一个快速清除按钮（Clear button），点击就清空文本框的所有内容。

快速清除按钮出现场景大概有以下三种：1）没有明显的快速清除按钮，但是按一下软键盘的删除键就会直接清空内容。通常发生在密码输入时。2）获取焦点时。3）有内容时，即使没有获取焦点。比如搜索时，点击快速清除按钮后清空内容再自动获取焦点，直接进行下次搜索。

可见性切换图标

输入密码时紧挨着快速清除按钮的就是可见性切换图标（Visibility icon）。它的作用是通过切换明文/密文来防止被旁观者窃取，pc时代的密码防止被泄漏基本是密文，但移动端屏幕小，灵活性高，密文的显示给用户输入和检查带来很大麻烦，有时需要重新输入。所以切换图标在移动端伴随着密码输入出现，给人们带来了很大便捷。

字数限制

文本框的字符需要限制时就需要进行明确的字数限制，现阶段有两种风格：1）当前已经输入的字数/字的最大长度 2）显示当前输入字数，但达到最大字数限制后会提示超出的长度。

区别在于用户不会在刚开始输入时因为看到字数限制，而有意控制输入字数造成降低用户输入的欲望。

• 文本框的对齐方式 •

对齐方式

文本框和标签的排版对用户浏览和使用有很大影响，一般来说可以把文本框和标签对齐方式划分为四种。

1）顶端对齐： 两者垂直左对齐排版，用户依次向下浏览。此对齐方式优点是占用屏幕横向空间少，标签长度也可以兼容，缺点是会占用屏幕高度，还要注意可读性，在和其他组的间距把握上要避免太密集。

2）水平左对齐：这种方式优点是浏览标签比较顺畅，节约了垂直的空间。缺点是文本框和标签距离参差不齐，阅读时间长，但也能让用户减少出错。

3）水平右对齐：优点同样是节约垂直空间，同时标签和文本框距离近的话会更好对照。但标签的右对齐影响了阅读速度，浏览效率仍低于顶端对齐。

4）内嵌：这种方式一般将标签颜色降低明度并加入，实际上是把占位符文本当作标签。优点是节省大量空间，浏览效率和顶端对齐不相上下。但是一旦用户输入内容之后就看不到标签了。所以只适合标签特别短的情况，或者搜索框、密码输入框等用户非常熟知的情况。

点击区域

在用户使用移动端屏幕输入的时候要考虑用户的体验，确保用户点击输入框时的触发区足够宽松舒适，而不是很难点击。所以就需要考虑拇指和食指的触发区域，让用户能够流畅输入，减少误操作。

• 文本框的形式 •

单行、多行文本框

由于手机屏幕小，文本框需要限制一个最大行高。根据文本框的可输入的行数，可以分为单行文本框（Single-linetext field当文本输入光标到达输入区域的最右边，单行文本框中的内容会自动滚动到左边。）和多行文本框（Multi-linetext field当光标到达最下缘，多行文本框会自动让溢出的文字断开并形成新的行，使文本可以换行和垂直滚动）。如果达到最大的行高就可以根据滚动条滑动来查看。

全宽文本框

全宽文本框对于更深入的任务或输入复杂信息会很有用。比如邮箱的输入框为全宽文本框，是单行文本框又是多行文本框。

自动完成输入框

生活中填写表格对人们来说是一件头大的事情，因此一些需要填的表格有预设的初始值或内容在其中的话，可以让用户用起来更方便和愉悦。这里就不得不提到生活中大数据的“神奇”，我在玩游戏创建一个新角色起名字的时候，默认填写的是我玩过这家公司其他游戏内的名字。公司通过计算或者抓取了我的数据来输入，自动完成输入的便捷让用户在填写的时候不再苦恼。

另一种自动完成的方式是以下拉框的形式出现，根据你输入的内容进行实时补完的功能。（让我想起来常被人吐槽的输入法）这样可以帮助用户更准确、高效地填写信息。对于输入困难、拼写困难的用户尤其有帮助。

键盘

最后的重点就是键盘输入了，为了填写信息就离不开输入。目前文本框的主流输入方式就是键盘，另一种语音输入正在不断进步。当用户选中准备输入的时候，应当提供清晰的视觉提示，比如发光、颜色变化的输入框或者光标的变化等。使用适当的软键盘布局有助于用户提高输入效率，降低出错的可能性。根据使用场景合理运用其他输入方式能提升输入效率，例如不方便用手输入的时候选择语音输入、输入地址不如点击按钮进行GPS定位、遇到陌生语言会拍照识别文字等等。

正如开头所说，文本框要应对不同类型的文本，此时就需要键盘输入的优化，比如需要填写电话时打开键盘显示的是全键盘就不太合适了。需要优化的常用类型包括：1）数字:电话号码、信用卡号。2）文本:专有名词、用户名等。3）混合的格式：邮件地址、街道地址、搜索查询。这三个方面可以根据内容来优化，会促使输入的更加快捷高效。

•总结•

本文从文本框是什么，文本框的具体样式有哪些，文本框的摆放要注意什么，以及文本框的内容四个方面进行了整理并提出了使用建议。以上就是我对文本框的总结分析，如果大家有什么不同的意见或看法，欢迎留言交流。