设计出色形式的7个秘诀

设计出色形式的7个秘诀

2019-12-27

几乎每个网站设计都包含某种形式的表单。从简单的电子邮件地址收集，注册新闻通讯或通知，到完整的付款收集表单，当务之急是设计一个易于使用和理解的表单。

表单设计的标准也在不断发展。尽管许多表单过去常常包含多个列并要求提供大量信息，但大多数最佳实践现在建议将表单保持尽可能简单。设计还有很多。好的表格是可扫描的，不需要大量的输入，并且包括智能的标签和格式，以帮助用户在第一时间正确填写表格。

这里有一些秘密，可确保您设计的是用户实际填写的表格。

1.轻松扫描和阅读

您知道用户会扫描网站以收集信息，并确定他们将采取什么行动，或者内容和设计是否使他们感兴趣。形式也是如此。用户应该能够一眼就知道需要什么信息，并清楚地说明该表单的用途以及如何提交。

高度可扫描的表单包括以下内容：

对比：文字必须简短且易于阅读。避免使用多种颜色，并在浅色文本-背景组合上坚持使用传统的深色。
分组和空格：将较长表格上的相似信息分组。例如，在收集付款信息时，将客户信息，付款信息和运输信息分组。三个短块比一个长块更容易消化。使用智能间距将标签连接到其说明的字段，而不是在文本和字段元素之间使用均匀的间距。
清除结束语/号召性用语：使按钮较大且易于查看。按钮内的显微镜应该告诉用户将要发生的事情，例如“提交”，“立即付款”或“进行下一步”。记住要关闭反馈循环，并让用户知道正确提交表单的时间。

关于是否在表单字段内使用提示文本的争论很多。主要的问题是，此文本通常不会随着单击消失，并且用户必须主动将其删除才能开始输入。尴尬了。

此外，尼尔森·诺曼小组（Nielsen Norman Group）发现，空白字段可以吸引眼球，并帮助用户更清楚地输入信息。

如果您需要使用提示，请考虑使用交互式解决方案-浮动标签。将您的标签信息包括在表单字段中，以使其看起来像占位符文本，但是一旦用户将鼠标悬停或单击该字段，就可以使文本动起来并移动到左上角。标签或提示永远不会消失，也不会妨碍用户尝试填写表单。（加上小动画对于用户来说是一个有趣的惊喜。）

场掩码可以提供一些相同的线索和形式提示，但不会妨碍可用性。仅当用户激活字段并提供有关所需信息的附加扫描提示时，字段掩码才会出现。掩码可以通过自动格式化信息来进一步帮助用户，从而避免会在提交时将表格踢出的错误。

电话号码是行动面具的一个很好的例子。考虑多种格式选项：

用户如何知道哪个将工作？表单字段将根据用户类型指定和调整格式，因此他或她不必考虑它，而只需键入数字。（这也免除了在移动设备上的键盘之间切换的麻烦。）

您无法知道用户将在哪种设备上遇到您的表单，但是无论如何都应该很容易填写。考虑可以将信息发送到表单并调整字段以检测和使用适当选项的所有不同类型的键盘。

在台式机上，用户无需单击鼠标即可输入表格并填写每个字段。完成后会自动从一个字段前进到下一个字段，或者使用标签或Enter键移动。W3.org有一套可靠的键盘建议供您遵循。

在移动设备上，将键盘类型与所需数据匹配。如果输入的是字母，请调出字母键盘；对于数字，请调出数字选项。来自Google：“应用程序用户非常喜欢为文本输入提供适当键盘的应用程序。确保在整个应用程序中一致地实施此操作，而不是仅针对某些任务而不是针对其他任务。”

垂直表格对用户而言比多列格式更容易。最佳实践规则是确保所有字段都可以在屏幕上显示，而无需以从上到下的格式滚动。

一个例外是超短格式，其中用户仅需要输入电子邮件地址或名称和电子邮件地址。在这种情况下，只要电子邮件框足够长，用户可以看到其地址的所有字母，则两个并排的列以及一个号召性用语可以很好地工作。

记住也要以垂直形式对元素进行逻辑排序。如果您要收集名字，姓氏，电子邮件地址和头发颜色，则以这种方式对其进行排序。

在表单中使用尽可能多的预填充解决方案。没有什么比添加地址更令人高兴了，在点击了头几下之后，Google API就会启动并建议地址选项。

这执行三件事：

考虑与电子邮件地址相同的事物，以便在@符号后为用户提供流行的电子邮件域。当用户输入web @ g…时。该字段会自动建议web@gmail.com。

您将很容易向用户询问表单中的许多信息。抵制冲动！

只要求提供重要信息。用户更有可能填写需要较少承诺的表格。如果以后需要更多信息，则可以从列表中通过电子邮件将其发送，以询问其他详细信息。（正如已经选择加入的人一样，此时用户更有可能与您进行更多互动。）

避免使用可选字段。不要要求提供多余的信息。请勿在可以使用一个字段的多个字段（例如电话号码）中使用。

杭州网站建设供一些填写表格的回报。使其有趣或有趣。感谢用户。

创建易于阅读和易于使用的表单将增加您收集数据并将网站访问者转变为重复用户的机会。

分享到