发布时间：2021-12-12 分类： 电商动态
文本输入框几乎是每个UI设计者必须使用的设计控件。它们无处不在，对用户体验的影响无疑是巨大的。虽然看起来很简单，但设计良好的文本输入框实际上足以满足许多“隐藏规则”。你了解这些规则吗？
当新用户开始使用应用程序或驻留在代购源码网站中时，至少需要通过文本输入完成最基本的信息。产品经理，设计师和开发人员也明白这是最好的解决方案。
在今天的文章中，我们关注文本字段输入应注意的一些核心因素。这些主要是最常见的规则，每条规则都有一些明显的例外。
文字输入框
文本输入框是UI设计中最常用的控件，用于在大多数情况下向用户输入少量文本。无论您使用哪个应用程序，都需要一个文本输入框来获取少量个人信息（用户名等）。如果要搜索某些信息，请打开Google并至少输入搜索框以完成最低搜索请求。
清除
明文标签
用户想要知道他们输入的数据类型，自然有必要用文本标签清楚地告诉他们。当然，有时用户还使用与字段相关的图标来理解输入框中相应字段的含义（例如，用户通常看到放大镜图标将意识到这是一个搜索框）。但在绝大多数情况下，文本的标签是强制性的。
Apple iOS中的搜索框同时包含标签和放大镜图标
清晰的标签可以让用户更加自信，理解并正确操作。
短文字标签
标签没有帮助，因此您应该使用短（几个单词）描述性短语作为标签，以便用户可以快速浏览。如果有其他信息，请让用户通过上下文或其他有用的说明了解某些内容，而不是额外的长标签。
以前，由于标签文本冗长，亚马逊的注册页面很慢。目前的版本更强大。
合理的输入框大小
如果您的输入框大小是根据输入的长度和大小设计的，那么它将更适合用户阅读和输入。
输入框焦点
对于输入框，当用户选择要输入的输入时，应提供清除视觉提示，例如外部照明的输入框或闪烁的光标。
输入提示
数据以各种方式呈现。因此，在设计输入框时，应该匹配用户输入信息的类型和格式。但是，完成一次通信并不容易。
例如，有许多不同的方式可以输入电话号码，例如我们通常的“+86”，在更多情况下，您可以直接输入一个11位数的手机号码。在固定电话号码的情况下，更复杂，有些人习惯于添加区号，而其他人则不习惯。面对这种复杂情况，您可以通过设计输入框并添加输入提示来输入输入。或者以输入电话号码为例：
此输入框的电话号码格式已固化，因此用户可以清楚地知道应输入哪种类型和位数。
具有描述性质的文本占位符将添加到此输入框中，以清楚地指示应输入的数字。缺点是占位符在用户输入时消失。
帮助信息
帮助信息（或相关文本）应出现在需要的地方，例如表格中的文字解释为何需要信用卡号码，以及生日日期后的福利，或“条款”的存在。服务与QUOT;链接。它们及时出现，以帮助用户解释一些令人困惑的问题。一般来说，这种帮助信息不应超过100字。
仅限移动设备：将键盘类型与文本输入匹配
在APP上，用户经常需要输入不同类型的文本。当输入框需要输入数字时，结果是全键盘自然不方便，当需要输入文本时，数字键盘更不合适。
辅助功能
目标：确保不同情况下的用户可以轻松轻松地浏览并填写输入框
避免使用大写文本标签
切勿使用全部大写字母的文本标签。这些标签通常难以快速导航，因为字母的大小在高度上是一致的，并且对于非英语国家的用户来说尤其麻烦。
字体大小
设置字体大小时，请确保字体足够大，以使其尽可能清晰。在网页上设置正面字体时，最安全的选择是16px。当然，尺寸的选择主要取决于实际的页面设计。如果出现识别问题，则应适当调整。
标签颜色
标签的颜色应遵循应用程序或网页的整体颜色方案，并确保对比度（不要太暗，不要太刺眼）。 W3C对文本文本对比有以下要求：
·较小的文本应确保背景和背景之间的对比度为4.5: 1
·较大的文字（14pt粗体，18pt常规）应确保背景和背景之间的对比度超过3: 1
提供舒适的点击区域
无论您是设计网页还是应用程序，都应该在点击手机屏幕时考虑用户体验。当用户点击输入框时，您需要确保触发区域足够宽松且舒适，不易点击。一般来说，拇指的触发区域应该控制在45到57px之间，但在移动端，控件看起来太大而不会让人觉得不舒服，所以你的文本框高度应设计在32~40px之间，所以它看起来很友好而且不是太大。
仅限桌面：输入键盘的友好输入框
这是一种历史悠久的可用性设计：用户应该能够仅使用键盘完成内容输入的所有工作。许多深度用户需要使用Tab按钮在不同的输入框和控件之间切换，并在不离开键盘的情况下填写表单。您可以在W3C文档中找到相应的说明。
用户支出
目标：尽量减少用户输入
智能预设
填写表单本身就是一件苦差事，大多数时候它都不会令人满意。因此，需要填写和选择的许多表格都具有预设的初始值或填写的内容，这使得用户使用起来更加方便——许多内容和参数可以通过其他方式计算和获得（例如，您可以帮助他们根据用户的地理位置填写邮政编码，或者使用先前在别处输入的数据填写内容。
例如，在许多情况下可以预先填写用户的IP地址。 Whatsapp呼叫系统服务预先填写手机号码前的区号，以使您的填充体验更加舒适。
自动完成和自动建议
自动完成功能是根据您在下拉框中输入的内容实时填写的功能。这有助于用户更准确，更有效地填写信息。这对于打字困难且难以拼写的用户尤其有用，特别是如果该语言不是他们的母语。
自动建议会在列表中显示相关的关键字或短语，这在匹配方面可能并不理想。自动完成是为了完成您填写的内容，自动建议是为您推荐可能的短语和关键字。
两者的结合可以使用户输入体验更加出色，Google搜索就是这样做的。
