文本输入框设计，无论是网站还是APP，当新用户开始使用APP或在某个网站上定居时，大多数人都需要使用文本输入框来获取少量的个人信息（ 用户名等）。 因此，整个页面上输入框的设计在用户体验中起着重要作用。
至
这似乎是一个简单的设计，但是成熟的文本输入框设计需要满足许多“隐藏规则”。 今天，我将跟随编辑方快了解这些规则：
至
清除文字标签
用户想知道他们输入的是哪种数据，因此他们自然需要文本标签来清楚地告诉他们。 当然，有时用户还使用与字段相关的图标来理解输入框中相应字段的含义（例如，用户通常会看到放大镜的图标并意识到这是一个搜索框）。 但是在大多数情况下，文本标签是必须的。
至
使用短文字标签
标签不是有用的说明，因此您应该使用简短的（几个单词）描述性短语作为标签，以便用户可以快速扫描。 如果有其他信息，请使用上下文或其他有用的说明让用户理解，而不要使用冗长的标签。
至
合理的输入框尺寸
如果输入框的大小是根据输入内容的长度和大小来设计的，则它更适合用户阅读和输入。
至
输入焦点
对于输入框，当用户选择并准备输入时，应提供清晰的视觉提示，例如发光的输入框或闪烁的光标。
至
输入提示
呈现数据的方式有很多。 因此，在设计输入框时，它应与用户输入信息的类型和格式相匹配。 但是，要获得完整的对应关系并不容易。
例如，有多种输入电话号码的方式，例如我们常见的“ +86”，在更多情况下，您可以直接输入一串11位数字的手机号码，而座机号码的情况甚至是 更差。 情况很复杂。 有些人习惯于添加区号，而其他人则不习惯。 面对这种复杂的情况，您可以设计输入框并将输入提示添加到“格式化”的输入内容。
至
提供舒适的点击区域
无论是设计网页还是APP，在点击手机屏幕时都应考虑用户的体验。 您需要确保用户单击输入框时的触发区域足够宽松并且不难单击。 一般来说，拇指的触发区域应该控制在45〜57px之间，但是在移动终端上，该控件看起来太大了，让人感到不舒服，因此您的文本框高度应该设计在32〜40px之间，因此 看起来足够友好，但不要太大。
至
字体大小
设置字体大小时，应确保字体足够大，并使其清晰易读。 在网页上设置正文字体时，最安全的选择是16px。 当然，大小的选择主要取决于实际的页面设计。 如果存在识别问题，则应将其调整得更大一些。
至
标签颜色
标签的颜色应遵循您的APP或网页的整体配色方案，并确保对比度（不要太暗或太刺眼）。 W3C对正文的对比度有以下要求：
较小的文字应确保与背景的对比度至少为4.5：1
·较大的文字（粗体为14pt，常规为18pt）应确保与背景的对比度超过3：1
至
完美的界面充满了小细节，这个看似简单的输入框要实现良好的用户体验，必须遵守上述隐藏规则。
至
可能您还想看