表格布局：6最佳实践和卓越的例子

你有没有尝试在网站上完成表格并在这样做时感到困惑或失去？表格现场标签和田地本身的放置是否没有任何意义？表格的标题和提交按钮不容易找到的位置吗？

这些因素在其他几个方面是Web表单的布局的主要方面，这些方面具有增强或减少其用户体验（UX）的潜力。通过实施成功的布局，您将为您的访客创造一个很好的体验，并启动它们与您的品牌之间的积极和希望的长期关系。

在本指南中，我们将在本指南中回顾六个网络形式布局实践以及每种练习的示例，以帮助您开始。但首先，让我们查看实际上的Web表单布局以及为什么它非常重要。

为什么网络表单布局很重要？

几乎每个网站都有某种网页形式。您的Web表单布局在您的表单转换的情况下发挥着重要作用。这是因为一个伟大的形式布局导致无缝表单完成，并改善了访客的提交过程。自从您创建了无声的Web表单以来，访问者将轻松转换，并且感觉专业和周到。

相比之下，规划不良的布局将导致可能令人困惑和难以通过的形式，可能会使您的访客挫败，甚至让他们完全放弃您的网站，减少您的转换。

现在我们理解为什么获取您的Web表单的布局右是如此重要，让我们潜入如何为您的Web表单创建最佳布局。下面是在安排内容时遵循六种最佳实践。

表格布局：6最佳实践和卓越的例子

我们策划了此最佳实践列表，几乎适用于各种类型的Web表单。我们还包括各种练习的很棒示例，以帮助您更好地将概念应用于您自己的表单。

1.使用单列布局

当涉及到您的布局时，您应该尽可能将所有字段的位置和顺序保持直接。这意味着您应该使用单列布局。通过以这种方式组织您的领域，您的访问者不会错过一个字段，他们将以最有意义的顺序完成字段，并且他们将能够提交表单快点而不是如果你使用多列表单。

伟大的例子：

来源

此示例显示了单列格式应该是什么样的。布局就像它可能是精简，简单的，简单的是，这是你想要的。这样，您可以减少访问者需要通过您的表格工作的时间，并且没有可能的错误或混乱的原因。

2.将副本对齐

将所有表单字段对齐到网页的左侧。这是制定您的表格的最自然的方式，因为这是绝大多数人如何学会阅读内容 - 通过从右到左移动。如果您不使用内联表单字段标签（直接位于表单字段本身），则应将标签对齐左侧。同样，这种自然流程将帮助您的访客更有效地完成表单，而不会感到困惑的是哪个标签属于哪个领域。

伟大的例子：

来源

这张照片描绘了表单字段和标签的左侧对齐。该表格以一种方式组织，使访问者明确，因此可以快速完成和提交过程。毫无疑问，哪个标签属于哪些字段和左侧工作的字段是自然和无忧无虑的。

3.使用单页布局

创建表单时，您应该使用单页布局，因此每个页面上只有一种形式。如果您有一个简短的形式，一切都应该轻松地适合单个页面，使这是一个简单的布局实现。

如果您有很多表单字段，则应将它们分解为a多阶段形式。执行此操作时，将有多个网页具有单独的表单部分，您的访问者需要完成的工作量看起来更易于管理。（如果你做有一个多步骤，您还可以在页面顶部添加一个进度条，以便您的访客知道他们将通过它工作多久。）

伟大的例子：

来源

由于访问者需要完成的大量表单字段，这是三个单独的网页的多步形式。通过以这种方式组织形式，审查和完成它不觉得它会是一个漫长而繁琐的过程。

而不是查看需要完成的长期表单字段，而是只看到几个领域的时间使得表单感到不那么压倒性。（页面顶部的进度条也有帮助解决此问题，特别是因为它清楚地标记了访问者需要通过的网页的名称。）

4.创建移动友好的布局

这些日子几乎每个人都始终带有某种类型的移动设备。No matter if they’re on-the-go, traveling, commuting, or simply sitting in the comfort of their own home, it’s no secret that people are signing up for your newsletter, registering for an account, and buying your products via their smartphones and tablets. That’s why it’s critical your site includes移动友好形式。

伟大的例子：

来源

此示例显示成功移动表单布局的许多重要方面。The form has a clear title at the top of the small screen, a clear and simplified option to add (or scan) credit card information so a visitor doesn’t have to type our the series of numbers on such a tiny keyboard, a straightforward, single-column, and multi-step layout, minimalist design, and more. This form is laid out in a way that allows users to easily understand and complete it via a mobile device.

5.添加内联表单字段标签

内联现场标签和文本使访问者可以特别容易理解他们应该在您的表格中响应的地方。他们猜测标签属于哪个领域的猜测，让游客毫不犹豫地通过表格来简单。他们还可以保持您的表格，看起来很干净，极简主义，无杂乱，和时尚。

伟大的例子：

来源

由于这些字段标签是内联的，因此如果标签位于入口字段之外，表单看起来简单且短。访问者将无常确定他们需要输入其信息的位置。有时当场标签位于上面的，下面或字段侧面，很难确定哪个标签属于哪个字段。

6.使用内联错误消息

使用内联Web表单中的错误消息是一种有效的方法，以确保有人理解他们尝试完成的领域的问题。它们还将访问者指示错误的确切位置，因此没有时间浪费确定问题所在的位置。

创建内联消息后，请务必添加一些关于错误所在的内容以及访问者如何纠正它。这不仅可以在修复错误时保存您的访客时间，但它还可以节省您和您的员工一旦表单提交，就必须通过无效的响应工作。

伟大的例子：

来源

在此表单中，错误消息出现在内联，这意味着无效的字段被突出显示为红色。该表单包括字段旁边的错误符号，以进一步突出显示问题以及问题所在的事实。最后，该消息解释了为什么错误存在和如何修复它。

回到你身边

通过成功的Web表单布局，您将为您的访问者创造一个很好的用户体验，这将为他们留下积极，持久的印象。您的布局应简化您的访客的表格完成和提交流程，因此对表单本身没有任何混淆或不确定性。通过思考这些实践以及如何将它们纳入自己的表单来增强UX并提升您的转换，开始提高您的表单的布局。