第1章

信息输入控件

1.1

文本框

文本框（text field）是产品原型设计过程中最常用的原型控件之一，主要适用于用户与产品进行交互时，需要用户进行信息输入的场景。图1-1展示了整个文本框控件的基本要素。

图1-1 文本框

完成一个规范的文本框控件设计，要明确的要素包括文本框标签（label）、占位符文本（placeholder text）、输入框（input box）、帮助文本（help text）、初始默认值（default value）、输入文本（input text）、跟踪图标（trailing icon）、格式化标记（formatting tag）。本节将详细介绍这些要素。

1.1.1

文本框标签

文本框标签主要用于向用户介绍该文本框用来输入什么信息，主要分为文字标签和引导图标两种类型。图1-2（a）与（b）分别展示了以“用户名”和“密码”为例的文字标签和引导图标。在产品设计过程中，在保证用户明确输入信息的前提下，是否使用标签、使用哪种（一种或者两种）标签可自由选择。

图1-2 文字标签和引导图标

文本框标签的位置很灵活，它可以在本文框的上方、左侧、内部，同时还可以设置为左对齐、右对齐或顶部对齐等。图1-3（a）～（f）分别展示了文本框标签顶部左对齐、顶部右对齐、外部左对齐、外部右对齐、内部左对齐和内部右对齐的效果。

图1-3 文本框标签的效果

从图1-3中可以看出，在有顶部、外部、内部3种标签的文本框中，对于顶部标签，用户眼球移动的效率最高。这种样式节省水平空间，但是会占用更多的垂直空间，不适合用于表单过多、空间不足的页面。如果表单信息不多，优先考虑顶部样式；如果较多，则考虑使用外部样式或内部样式。

标签的外部对齐样式或内部对齐样式可以兼顾眼球移动效率和垂直空间的有效利用，但当标签较长时，会占用更多的水平空间，它们适用于表单多、不需要专业理解能力的横向页面。

在对齐方式中，人们对左对齐标签的阅读效率是较高的，因为现代人的阅读习惯是从左至右阅读。采用左对齐方式，在不同样式标签的视觉跳转过程中能比较清晰地展示阅读的起点，帮助读者理解标签信息。

右对齐标签的好处是在视觉的终点，很好地保证了标签的整齐程度，使页面看起来更简洁。在常见的产品设计案例中，大多数文本框标签采用的是右对齐方式。至于在原型设计过程中最终选择哪种对齐方式，我们可以根据实际的表单信息和样式综合考虑。

1.1.2

占位符文本

占位符文本指用户未在文本框中输入信息时，预先占据文本框内位置，用来描述该文本框中信息输入规则的文本。占位符文本的颜色不太明显（一般会降低文本框标签字体颜色的透明度来作为占位符文本的字体颜色）。如图1-4所示，在“公司名称”文本框中，占位符文本为“请输入公司名称”，用来提示用户这里需要输入的是公司名称。

图1-4 占位符文本

当用户输入内容时，占位符文本会消失，同时被输入的文本内容代替。占位符文本和文本框标签的相同之处在于，都起到信息提示和说明的作用；不同之处在于，文本框标签不会随着输入状态的变化而消失。

占位符文本和文本框标签同样是文本框控件的基本要素之一。在设计产品时，占位符文本不能轻易省去。某些情况下，只使用占位符文本而不需要任何文本框标签，这主要用于一些很简单的界面（文本框较少且用户对输入内容非常熟悉的场景）。

1.1.3

输入框

输入框是文本框控件的核心要素，承载着用户输入信息的功能。常见的输入框主要分为3种类型，分别是输入线框、填充输入框与线性输入框，如图1-5（a）～（c）所示。

图1-5 常见的输入框类型

3种输入框类型本质上没有任何区别，在产品设计过程中，结合整体的界面布局的美观程度，选择合适的一种即可。值得注意的是，一旦选择了某种类型的输入框，就要保证全局相似页面都使用同种类型的输入框。这也是产品设计一致性原则的体现。