Text fields(输入框/文本框)是一个历史悠久而经典的控件，当光标位于输入框时，用户可以在其中输入或复制粘贴文本、数字等内容。输入框虽然看上去简单，但需要考虑的细节也不少，本文将向你介绍输入框的相关组成部分和注意事项。

　　△ Text fields的相关组成部分

　　标题 / 输入框标签(Label)

　　Label是一个控件或一组相关控件的名称或标题，与Text field成对出现时表示输入框的标题或者内容，对于常见的主题有时也用图标代替Label。在表单中为了标明输入框是必填的，通常在Label旁边添加一个星号「*」。

　　△ 文字Label、图标Label、带星号的Label

　　Label与Text fields的对齐方式

　　Label和Text fields的排版对用户浏览和使用有很大影响，一般来说可以把Label与Text fields对齐方式划分为4种。

　　顶端对齐

　　Label和Text field垂直左对齐排列，用户只需依次向下浏览，因此浏览和填写的效率是4个对齐方式中最好的，而且占用屏幕横向空间少，即使Label特别长也能很好的显示(这对支持多国语言的软件特别有用，因为有些语言比英文还要长很多)。但这种对齐方式会占用过多的屏幕高度，此外应当注意每组Label和Text field与其他组的间距，以免密密麻麻降低可读性。

　　△ 顶端对齐

　　水平右对齐

　　Label和Text field水平显示，Label右对齐。占用的屏幕高度减小，但是由于Label长短不一时显得层次不齐，因此用户浏览效率会比垂直顶端对齐低。

　　△ 水平右对齐

　　水平左对齐

　　这种对齐方式利于用户浏览Label，但是Label和Text field的距离较远，用户从左往右浏览的时间会变得更长。可将某些短Label通过增加字符间距的方式使之更易读。当然，时间长也不是坏事，对于有陌生数据和需要谨慎填写内容反倒是能让用户减少出错的可能。

　　△ 水平左对齐

　　内嵌Label

　　Text field内嵌Label是最节省空间的做法，为了让Label和真正输入的内容做区分通常会把Label颜色调淡并且在最后加「…」，实际上是把Placeholder text当做Label。内嵌Label浏览效率上和顶端对齐不相上下，但是一旦用户在Text field输入内容后，Label就看不到了，因此只适合Label特别短或者搜索框、账号密码输入框等用户非常熟知的情况。

　　△ 内嵌Label

　　Float Label(浮动标签)

　　设计师Matt D Smith在内嵌Label的基础上发明了一种新颖的交互模式Float Label(dribbble )：当用户在Text field中输入内容以后，内嵌Label会浮动到Text field上方，成为顶端对齐。这种方式兼具内嵌Label和顶端对齐的优点，目前已经成为Material Design里Text field默认风格。

　　△ Float Label

　　这种模式也有缺点，Label显示过小，对于小屏幕和视力不佳的用户来说不是个好方案。此外，Label侵占了原本Placeholder text的空间，对于一些用户陌生的Text field来说需要额外的空间放提示和说明。

　　占位符文本/提示语(Placeholder text / Hint text)

　　Placeholder text是Text field没有内容时出现的灰色文字，当用户输入内容后将会消失，因此只能展示一些比较简短的信息。通常使用Placeholder text作为输入指引(例如：“请点击输入评论”)或者表明输入的限制和示例(例如：“年/月/日”)。很多电商产品搜索框会把Placeholder text用于热门商品促销。

　　△ 淘宝App的搜索框Placeholder text

　　iOS有一个特性，在软键盘上方显示Placeholder text，这样即使在输入过程中也能提示用户正确的规则，且输入过程中用户视线停留在软键盘上不用转移。

　　△ 在键盘上方显示Placeholder text

　　辅助说明/额外说明/帮助文字( Helper text)

　　如果Text field的输入规则或者注意事项比较复杂，建议在Text field附近(一般是下面)添加Helper text进行额外说明。Helper text也可以用Tooltips或者Popover的形式来呈现。