表单的交互设计：从引导转化为对话

你喜欢填写表格吗？我想不会的。这不是我们想要的服务。用户只想买一张票，订一间酒店房间，买东西等等。然而填写一张表格成为他们必须处理的一个步骤。那么，到底是什么影响到用户提交表格的态度呢？

·可能是耗时的。

· 复杂的形式往往很难理解（或者你只是不愿意把它填进去）。

·表单可能会询问您不想要共享的个人信息：信用卡详细信息、手机号码、家庭地址等。

表单字段实际上是服务用户的最重要工具，不管表单是用于什么–无论是订阅时事资讯，还是一步一步地收集数据。

可以把表单放在两列中吗？

眼睛追踪研究表明，单列表单比多列表单要好。为什么？我们向下滚动网站的方式类似于我们填写表单的方式：自上而下，专注于内容。有平行列的表单很容易导致用户误入歧途，分散他们的注意力。为了保持用户在流中而不是中断垂直方向，将字段放在下面。当然，每条规则都有它的例外。对于下面的规则，短的或逻辑上连续的字段(移动号码、城市、州和区号)可以放在一行中。

如果表单的结构相当复杂(例如网上商店的结账阶段或贷款平台的注册阶段)，它可以在视觉上分为语义组，在它们之间增加空间或标题。这将给用户在表单中取得进展的感觉，而不会感到不知所措。

标签应该放在哪里？

标签告诉用户哪些信息属于给定的表单字段，它们通常位于表单字段之外。有两个变体用于放置标签：字段上方和左对齐。还有一种：设计师开始以动画形式和隐藏标签中的占位符。关于什么是最好的展示标签的方法有很多争议，但仍然没有明确的答案。有一点是清楚的：标签的放置取决于情况。让我们仔细看看每个选项。

将标签放置在字段的上方

这是最常见的标签放置。它更好地适应智能手机的大小，是至关重要的响应标记。

证明留下的标签是合理的

如果需要显示更大的数据输入字段，这可能是最好的选择。左对齐标签会得到更多的关注，不会与其他字段混在一起。此外，联系人表单将占用较少的空间。但是请记住，这种方法只适用于桌面视图；对于移动设备来说，大小是一个问题(对于左放置的标签和字段来说，屏幕都太窄了)。给用户带来麻烦，他们可能无法看到输入数据的全部或在提交表单之前发现输入错误。为了防止错误的表单被提交，您将不得不创建额外的原型，从而使网站对智能手机变得友好。

将标签放置在字段中(字段内的顶部对齐标签)

在字段中放置的交互式标签因其可扫描性而越来越受UX设计者的欢迎。动画可能有所不同，但过程是一样的：在使用标签占位符单击字段后，标签不会消失，而是移动到字段的顶部，为用户输入数据腾出空间。

这种方法的优点很明显：它节省了空间，而且用户可以理解动画。但是表单中的动画并不总是最好的解决方案。这取决于表单的内容。如果您处理的表单字段非常少(登录或通讯框)，那么顶部对齐的标签就不那么必要了，因为用户不需要重述太多的信息。具有多个部分的复杂形式。尽管这种方法的好处，也要考虑如何下拉选择将看起来和适合动画。

尽管如此，交互式标签占位符比静态标签占位符更优。当单击字段时，标签向上移动，保持可见，而静态标签则消失。

我们可以使用占位符文本而不是标签吗？

提供提示的方法有很多种；其中一种是表单字段中指令的常见实现。不幸的是，用户测试不断表明表单字段中的占位符常常损害可用性而不是帮助。它们可能会严重地使表单的填写过程复杂化，特别是如果表单包含十几个字段。消失的占位符文本会使用户的短期记忆紧张。人们很难记住什么信息属于某一领域，也很难检查和纠正错误。这也给有视觉和认知障碍的用户增加了额外的负担。

正如我们所看到的，困难在于当用户单击字段以填充时，占位符文本是不可见的。没有标签，用户无法在提交表单之前检查他们的工作。他们很容易忘记他们必须在当前字段中填写哪些数据，以及前面的数据是否没有错误—总是存在着错误信息的巨大风险。用户必须逐个删除每个字段中的文本来显示占位符文本，以验证它们的输入是否满足描述。实际上，许多人甚至不会意识到错误的潜在性，也不会再做重复检查。