你真的懂得文本输入框设计的那些潜规则么？

文本输入框几乎是每个UI设计师都必须使用的设计控制器。它们无处不在，对用户体验的影响无疑是巨大的。虽然它看起来很简单，但成熟的文本输入框实际上需要满足许多“潜规则”。你知道所有这些规则吗？

文本输入框几乎是每个UI设计师都必须使用的设计控制器。它们无处不在，对用户体验的影响无疑是巨大的。虽然它看起来很简单，但成熟的文本输入框实际上需要满足许多“潜规则”。你知道所有这些规则吗？

当新用户开始使用应用程序或进入网站时，至少最基本的信息需要通过文本输入来完成。产品经理、设计师和开发人员也知道这是最好的解决方案。

在今天的文章中，我们专注于文本字段输入中应该注意的一些核心因素。这些大多是最常见的规则，每个规则都有一些例外值得注意。

文本输入框

文本输入框是UI设计中最常见的控制器，用于在绝大多数场合向用户输入少量文本。无论你使用哪个应用程序，你都需要使用文本输入框获取少量的个人信息（用户名等）。当你想搜索一些信息时，打开谷歌，至少通过搜索框输入来完成至少的搜索请求。

清晰

文本标签清晰

如果用户想知道他们输入的字段是什么样的数据，他们自然需要清楚地告诉他们文本标签。当然，有时用户也使用与字段相关的图标来理解输入框对应的字段含义（例如，当用户通常看到放大镜图标时，他们会意识到这是一个搜索框）。但在绝大多数情况下，必须有文本标签。

Apple iOS 标签和放大镜图标同时放置在搜索框中

清晰的标签使用户更加自信、正确地理解和正确地操作。

短文本标签

标签不是一个有帮助的解释，所以你应该使用一个简短（几个单词）的描述性短语作为标签，这样用户就可以快速扫描它。如果有额外的信息，用户可以通过上下文或额外的帮助解释来理解，而不是超长的标签。

Amazon之前 由于标签文本超长，注册页面注册过程缓慢。目前的版本要强得多。

输入框尺寸合理

如果您的输入框尺寸是根据输入内容的长度和尺寸设计的，则更适合用户阅读和输入。

输入框焦点

标签颜色

标签的颜色应该取决于你的应用程序或网页的整体配色方案，并确保对比度（不要太暗或太耀眼）。W3C 对文本对比度有以下要求：

·小文本应确保至少与背景之间有4.5:1.对比度比率大的文本(14pt粗体，18pt常规)应确保与背景的对比度超过3:1

提供舒适的点击区域

无论您是设计网页还是应用程序，您都应该考虑用户在手机上点击屏幕时的体验。您需要确保用户在点击输入框时的触发区域足够宽松和舒适，而不是难以点击。一般来说，拇指的触发区域应控制在 45~57px之间，但在移动端，控制看起来太不舒服，所以你的文本框架高度应该设计在32~40px之间，这看起来足够友好，不太大。

仅限于桌面端：友好的输入框输入键盘

这是一个历史悠久的可用性设计：用户应该能够仅仅使用键盘输入所有内容。许多深度用户都有这样的需求，他们习惯于使用Tab 在不同的输入框和控件之间切换按钮，无需离开键盘即可填写表单。您可以在W3C文档中找到相应的说明。

用户花费

目标：减少用户输入

智能预设

填写表格本身就是一项艰苦的工作，大多数时候它不会变得令人愉快。因此，许多需要填写和选择的表格最好填写预设的初始值或内容，这可以使用户使用更方便——许多内容和参数实际上可以通过其他方式计算和获得（例如，您可以根据用户的地理位置帮助他们填写邮政代码），或者通过之前在其他地方输入的数据填写内容。

例如，用户的IP地址可以提前填写。Whatsapp 然后调用系统服务，帮助您在手机号码之前提前填写区域代码，让您的填写体验更加舒适。

自动完成和自动建议

自动完成是根据您输入的内容以下拉框的形式实时完成的功能。这可以帮助用户更准确、更有效地填写信息。特别有助于输入和拼写困难的用户，特别是当语言不是他们的母语时。

自动建议以列表的形式呈现相关关键词或短语，匹配度可能不理想。自动完成更多的是填写你填写的内容，而自动建议是为你推荐可能的短语和关键词。

上一篇：各大品牌奥运会营销合集之：相爱相杀出精彩！

下一篇：未来尖端包装设计趋势