网站建设之设计用户友好表单的终极指南

表单是一个关键的转换工具 – 这就是为什么掌握最有效的表单设计技术很重要。在填写表格时，挫折绝不应成为用户流程的一部分，下面列出的提示应有助于为他们创造更愉快的体验。

首先，我将介绍每种形式的三个主要组件以及如何有效地使用它们。接下来，我将从头到尾跳到构建表单的最佳实践。最后，我将概述三种类型的表单布局，以帮助您确定哪种格式最适合您要收集的数据类型。让我们跳进去。

3个基本表单组件

组件是每种形式的基础，可以轻松地与周日晚餐的成分列表进行比较 – 您希望选择最好的原料并为其提供良好的服务。让我们介绍一个表单的三个基本组成部分，然后跳转到它们周围最容易被忽视的细微差别：

1.文本字段

这是主要的表单组件，通常最终被过度设计。节省一些时间，不要重新发明轮子。

• 选择熟悉的外观：使用两种最易识别的文本字段形状之一：众所周知的矩形或简单的线条（由Google的Material Design制作）。根据大小建议输入的预期长度。

• 描述您的需求：使用标签来说明预期的输入。确保它们始终可见，这样即使填充表单也很容易扫描。将标签放在文本字段的顶部或作为占位符在打字时转换为浮动标签。避免在文本字段的左侧或右侧放置标签，因为一旦表单开始增长，它就会造成混乱。

2.下拉菜单

下拉菜单在网上流行，并且在这里停留。毕竟，他们做得很好。

• 按字母顺序排列下拉列表：按字母顺序对答案进行排序，以帮助人们快速找到他们正在寻找的答案。

• 将建议的答案置于顶部：如果您确定大多数人会选择列表中的一个（或多个）答案（例如，根据他们当前的位置），请将此答案放在下拉列表的顶部并将其与其他人带有微妙的分隔线。

3.按钮

各种形式的真正超级明星。如果没有按钮，您的表单就没用了。确保每个人都能理解并且可见，这一点非常重要。

• 描述操作按钮的作用： “提交”一词并未说明全部内容。确保按钮内的文本尽可能简单明了。如果它用于将产品添加到购物车，请将其标记为“添加到购物车”。如果它可以删除不需要的产品，请将其标记为“删除”。尝试描述在具体点击之后发生的操作。

• 使用不同的样式来引起注意：使用颜色来建议您的按钮是否有助于采取积极或消极的行动。不同的风格也可以表明哪种行为是主要的和次要的。

表格结构

现在您已经掌握了基础知识，您将如何构建表单以使其成功？它是如何工作并与您的用户互动的？让我们深入了解构建表单的一些最佳实践：

• 显示填写表单的优势：如果您的业务依赖于成功填写表单的人，请确保告诉用户为什么值得花几分钟的时间。仔细选择您的单词并确保它们表明用户从填写表单中获得的价值。准备一些特别的东西 – 例如，为您的目标群体提供精彩提示的电子书。在这种情况下，您的按钮的文字可以说“注册并获取免费的电子书！”
• 将所有组件排列在一列之下：当然，我们从上到下阅读。尝试将所有元素放在一列之下 – 这样可以更轻松地快速扫描表单，而无需从一侧跳到另一侧。

• 只询问你真正需要的东西，真的需要：保持形式简短。避免要求提供当前不需要的数据 – 您可以随时收集。你的形式越短，人们就越有可能填补它。
• 解释为什么要求提供敏感数据： 如果您需要询问某些人们可能会犹豫不决的敏感数据，请解释为什么要求它。通过透明您将如何以及为何使用此数据来建立信任。
• 标签可选的字段：如果表单包含一些可选的文本字段，请使用“可选”标签标记它们，而不是在它们旁边放置星号。人们通常不喜欢表格中的星号，因为它们提醒他们签署复杂的合同和隐藏的陈述。

• 对组件进行分组并按逻辑顺序列出：通过在分组组件的顶部插入标题，可以更轻松地快速扫描表单。尝试遵循人们已经从不同的常见情况中了解的熟悉模式。
• 不要使用额外的文本字段要求用户确认他们的密码：不要让人们输入他们的密码两次，让他们偷看它。即使他们最初没有并拼错他们的密码，他们也总是有机会（或者至少他们应该）稍后改变它。
• 显示表单进度：如果您的表单相当长，那么显示进度非常重要，这样人们就可以知道它们的位置以及需要完成多少表单。这可以通过简单的进度条或将表单分成更短的步骤来完成。只要它给人们带来了希望，那么它就能完成任务。

• 节省进度：与显示进度一样重要，正在填写表单时主动保存它。没有比在表单上花费大量时间然后丢失连接导致所有输入数据消失更糟糕的情况。
• 尽可能使用图标和图像：如果您要求与图像严格关联的内容，除了描述图像外，还要显示图像。
• 建议答案：如果您的表单处于打开状态，并且要求用户键入不同的答案，这些答案通常作为Dribbble上使用的技能或标签，请在输入数据库时​​建议您的答案。
• 保持单独输入/返回：键盘上的这个键有一个众所周知的角色。不要让它立即发送表格，特别是当它很长并且包含几个文本区域时。让enter为enter并将光标导航到新行。
• 显示出了什么问题，并记住颜色不是一切：如果有一些验证问题，请显示出错的地方。这并不仅仅意味着使用红色作为指标。一个很好的描述理想地支持如何使事情正确的建议也是有用的。您还可以尝试将摇动动画应用于填充不佳的字段。

• 让人们知道什么是正确的：表单成功发送到您的服务器的简单信息是纯金。不再猜测它是否通过或者在此过程中是否发生了某些问题。

表单布局的类型

设计表格的最后阶段是其演示。你怎么在视觉上卖它？

标准（一页）表格：

最常见的演示文稿是简单的单页表单。它由所有组件组成，适用于简短和不太复杂的表单。

多步形式：

多步骤表单主要用于电子商务平台上的签出过程。人们喜欢一步一步做事，所以它很快就会熟悉。通过设计，它还显示了用户当前的进度。此格式最适合更复杂，更长的表单。这让他们不那么可怕了。只需记住要对组件进行分组，并确保每个步骤都是流程的一个封闭部分。

会话形式：

会话形式是一种非常好的自然方式，可以无缝地收集数据。他们的潜力似乎仍然未被发现，然而，他们已经存在了一段时间。一次要求一件事给人的印象是更快的形式过程。当人们关注对话时，他们忽略了表单的实际长度。

虽然形式可能不是最令人兴奋的设计，但我们不能否认它们的重要性和影响力。下次当你想要远离设计表格时，只需记住停止过度思考它，将这些技巧作为一般指导原则，最后但并非最不重要的是，考虑那些将要填写它的人。让他们快乐将使您的业务成功！