ui组件系列之文本框和表单设计

当你在设计表单时，是否对文本框和表单的规则有疑惑？本文的一些简单的规则将帮助你完成设计用户希望完成的表单。

上图是表单的发展历程，由石刻上的表单到纸质表单再到电脑上输入的表单。印刷式的表单已存在多年，我们可以从其设计中学到一些技巧。

一、文本框剖析

文本框允许用户在界面中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的可见性，使字段在布局中好发现，填充且容易理解。

这些是基本文本字段的重要元素：

1.容器-可交互输入文本的区域

2.输入文本-输入文本字段

3.标签文本(标题)-告诉用户给定表单字段中属于什么信息

4.占位符文本-是所需信息的描述或示例，在用户输入文本后会被替换

5.帮助提示或验证文本（可选） -提供其他上下文或验证消息

6.头部图标（可选） -描述文本字段所需的输入类型

7.尾部图标（可选） —对输入的文本的附加控制，例如清除，隐藏/显示等

二、文本框类型

它们大多数基于基本文本框，为了更好地展示特定类型的信息而做的演变，例如输入信用卡号的文本框。以下是我们创建的整个UI中最常用的输入类型的一些示例：

三、使用恰当的输入框类型来收集数据

为收集的数据提供正确的文本框类型，将帮助用户以正确的格式输入信息，并避免错误，从而使填写过程尽可能简单。

可以通过提供视觉上的变化来传达文本框的状态。输入文本字段可以具有以下状态之一：未激活，悬停，激活，禁用，校验，报错。大家在做表单设计时最好的做法就是遵循这些状态的变化，不要挑战已经形成的用户思维模型。

通常，文本框的标题有三种常用的位置可选择：顶部，左侧对齐和右侧对齐。采用哪种样式将取决于表单的主要目标和表单的大小，组件库以及要设计的平台。它们各自具有一些优点和缺点。

我已经根据大型设计研究的研究结果进行了汇总，最开始的Material design指南中流行的下划线输入并不是最佳选择。有趣的是，同一项研究表明，用户更喜欢带有圆角的输入。

当用户不熟悉所要填写的内容时，这是一个不错的选择

优点：标题易于拓展；充分利用垂直空间

缺点：标题和相应的输入内容之间的距离过长，而且不一致的距离会增加文本输入的完成时间

与左对齐的标题相比，完成时间快将近两倍

优点：文本的标题和输入内容的位置更紧密，减少了了眼睛的运动次数，从而缩短了完成时间

缺点：难以快速扫描表单并了解所需的所有信息

这是在大多数情况下最快的时间和最全面的选择。在移动端上效果很好，因为它们不需要很多水平空间。

优点：能够让用户单一眼球移动即可了解输入标题和输入文本，能够更快的完成

缺点：需要更多垂直空间

为表单中的所有文本框都使用相同的输入长度会使它们在视觉展现上令人愉悦，但是却很难完成填写。

输入信息后文本框内占位文本的消失，会对用户的短期记忆产生压力。没有标题，用户将无法在提交表单之前检查他们提供的所有信息。如果您需要极简的表单设计，则可以使用“Material design”浮动标题的方法。
表单内的占位符文本有时会使用户感到困惑，最好在字段外使用提示文本。