发布时间：2021-12-30 分类： 电商动态
文本字段（输入框/文本框）是一个长期和经典的控件。当光标在输入框中时，用户可以输入或复制并粘贴文本，数字等。虽然输入框看起来很简单，但需要考虑很多细节。本文将向您介绍输入框的相关组件和注意事项。
△文本字段的相关组件
标题/输入框标签（标签）
标签是控件或一组相关控件的名称或标题。当它与文本字段成对出现时，它表示输入框的标题或内容。对于常见主题，有时会使用图标而不是Label。为了表明表单中需要输入框，通常在Label旁边添加一个星号“*”。
△文本标签，图标标签，带星号的标签
标签和文本字段对齐
标签和文本字段的布局对用户的浏览和使用有很大影响。通常，标签和文本字段对齐可以分为四种类型。
顶部对齐
标签和文本字段垂直对齐在左侧，因此用户只需要依次向下浏览，因此浏览和填充的效率在4个对齐中最佳，并且它占用屏幕上较少的水平空间，即使标签特别长。 （这对于支持多种语言的软件特别有用，因为某些语言比英语长得多）。但是，这种对齐将占用太多的屏幕高度。另外，您应该注意每组Label和Text字段与其他组之间的间距，以免使其密集且易于阅读。
△顶部对齐
水平对齐
标签和文本字段水平显示，标签右对齐。占用的屏幕高度减小，但由于标签的长度不均匀，因此用户浏览效率低于垂直顶部对齐。
△水平右对齐
水平左对齐
此对齐方便用户在Label中导航，但Label和Text字段之间的距离很远，用户从左向右导航所需的时间将变得更长。通过增加字符间距，可以使一些短标签更具可读性。当然，长时间不是坏事。对于奇怪的数据和需要仔细填写内容，可以减少出错的可能性。
△水平对齐左
嵌入式标签
嵌入在标签中的文本字段是最节省空间的方式。为了区分Label和实际输入的内容，标签颜色通常会变亮并且“…”在最后添加。实际上，占位符文本被视为标签。嵌入式标签浏览效率可与顶部对齐相媲美，但一旦用户在文本字段中输入内容，标签将不可见，因此它仅适用于标签很短或搜索框，帐户密码输入盒子和其他用户对这种情况非常熟悉。
△嵌入式标签
浮动标签
设计师Matt D Smith基于嵌入式标签发明了一种新颖的交互模式Float Label（dribbble）：当用户在Text字段中输入内容时，嵌入的Label浮动在Text字段上方并成为顶部对齐。此方法结合了内联标签和顶部对齐的优点。它已成为Material Design中文本字段的默认样式。
△浮标签
这种模式也有缺点。标签显示太小，对于小屏幕和视力不佳的用户来说不是一个好的解决方案。此外，Label会侵占原始占位符文本的空间。对于某些用户不熟悉的文本字段，提示和说明需要额外的空间。
占位符文本/提示文本
占位符文本是文本字段没有内容时显示的灰色文本。当用户输入内容时它将消失，因此只能显示一些简短信息。通常使用占位符文本作为输入指南（例如：“点击以输入评论”）或指示输入的限制和示例（例如：“年/月/日”）。许多电子商务产品搜索框使用占位符文本进行流行的商品促销。
△淘宝应用的搜索框占位符文本
iOS具有在软键盘顶部显示占位符文本的功能，因此即使在输入过程中用户也可以提示用户输入正确的规则，并且在输入过程中用户的视线保持在软键盘上移动。
△在键盘上方显示占位符文本
帮助者文本/帮助者文本
如果“文本”字段的输入规则或注意事项更复杂，建议在“文本”字段（通常在下方）附近添加帮助文本以获取其他说明。辅助文本也可以以工具提示或弹出窗口的形式呈现。
MailChimp将交互添加到密码输入框的帮助文本中：输入框的复杂规则分为多个简单条件。当用户输入的内容满足条件时，将给出相应的反馈以通知用户已满足条件。分割复杂的任务很容易，用户输入也不容易出错。
△MailChimp
初始值（
获取焦点后，输入框中默认保留的字符不会消失。用户可以删除或修改这些字符。良好的初始默认值可以减少用户的输入负担。例如，地图App路线导航功能的起始值输入框是用户的当前位置，用户只需输入目的地即可开始导航，从而提高了效率。
△起点默认值是用户的当前位置
输入限制
文本类型的长度和长度各不相同，但计算机可接受的文本有限，业务方通常对文本类型有要求。例如，手机号码肯定是一个号码，如果您输入其他内容，则会收到错误消息。为了减少用户错误的可能性并保持计算机系统的安全性和稳定性，必须对文本字段施加一些输入限制，例如可以在最短和最频繁地输入多少字符;是否可以输入表情符号等特殊字符;过滤前后的空格是否过滤;不支持从剪贴板等粘贴
还要考虑如果用户的输入超出限制或错误，应如何向用户提供适当的反馈，从而帮助用户正确地修改内容。
自动获得焦点（自动对焦）
当用户单击文本字段时，光标会弹出软键盘，指示文本字段已获得焦点，用户可以输入或修改内容。主要任务是填写页面的形式，用户进入页面后可以自动获得焦点。如果页面有多个文本字段，当用户填写一个时，它将自动获得下一个焦点，这将使操作更平滑。
输入法
Text字段的主要输入方法是键盘。使用适当的软键盘布局有助于用户提高输入效率并减少出错的可能性。软键盘布局等的功能已在《「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard》中详细讨论过。
除键盘外，使用其他输入法可以提高输入效率。例如，语音输入，GPS定位，照片识别文本，自动文本关联和其他输入控制。
△淘宝应用的文本字段提供了非常丰富的输入法
字数限制显示
对于需要限制单词数量的文本字段，目前有2个单词限制显示样式：
当前输入的最大字数/单词数。
始终显示“当前输入的字数”。达到最大字数限制时，将显示长度。
这两种方式给用户带来不同的感受，如微博的文字区域（文字区/多行文字输入区）和回复微博限制提示从原来“当前输入的单词/140字改为”显示数字输入130个单词后可以输入的字符“。这样做的好处是用户不会故意控制输入单词的数量，因为输入开始时单词数量的限制，中断情绪的流动和引起情绪。平滑或减少输入动机可能会改善发送微博和评论的活动。
△微博修改之前和之后
清除按钮
对于手机软键盘，多次单击删除键删除多个字符比物理键盘体验差得多。因此，对于具有已修改内容要求的“文本”字段，可以在右侧放置“清除”按钮，然后单击以清除它。文本字段中的所有内容。
清除按钮外观有4种：
仅在获得焦点时出现。
有内容时出现，即使没有焦点。这适用于搜索框，单击“清除”按钮，然后清除内容，然后自动获得焦点，一次性直接进行下一次搜索。
总是出现。
没有明显的清除按钮，但按下软键盘上的删除按钮可直接清除所有内容。这通常在密码输入框错误后使用。
密码输入框和可见性切换图标
在PC时代，电脑屏幕比较大。如果密码直接以明文显示，很容易被旁观者偷偷摸摸，所以请使用星号“*”或“•”隐藏真实密码移动时代的密码输入框也值得考虑。首先，手机屏幕相对较小，观看时不容易被盗。其次，犯罪分子可以通过观察软键盘按键序列来窃取密码，而不需要进入密码输入框。另外，密文显示对用户输入和检查造成很大的麻烦。国外数据显示，使用密码的默认纯文本显示，通过可见性图标（隐形图标/可见性图标）切换明文/密文可以显着提高转换率而不降低安全性。
编者注：何时显示而不显示？或者，什么设计方法可以满足方便性和安全性要求？答案就在这里→《不易察觉的细节!常见的登录界面该不该显示密码?》
多行输入框的最大行高
根据“文本”字段可以输入的行数，可以将其划分为单行文本字段和多行文本字段。由于手机的屏幕相对较小，建议将一行限制为多行文本框。最大行高，如果达到最大行高，则可以通过滚动条滑动输入框中的文本。为了便于拇指滚动，建议最大线高度大于5行。
△多线输入框的最大线高
