使用您的应用或网站的人有一个特定的目标。通常，站在用户和他们的目标之间的一件事是一种形式。表单仍然是网络和应用程序中用户最重要的互动类型之一。事实上，形式通常被认为是完成目标的最后一步。表格只是一种手段。用户应该能够快速完成并且没有混淆。
在本文中，您将看到从可用性测试，现场测试，眼动跟踪研究和不满的用户的实际投诉中收集的实用技术。这些技术 – 正确使用时，使设计人员能够生成更快，更简单和更高效的表单体验。有一种方法可以创建和设计自己的原型：您只需要下载adobe xd（免费）即可开始使用。在文章的最后，您还将找到设计表单的新方法。
形式典型的形式有以下五个组成部分：
结构
这包括字段的顺序，表单在页面上的外观以及多个字段之间的逻辑连接。输入字段
这些包括文本字段，密码字段，复选框，单选按钮，滑块和为用户输入设计的任何其他字段。字段标签
这些告诉用户相应的输入字段是什么意思。动作按钮
当用户按下此按钮时，执行动作（如提交数据）。反馈
用户通过反馈了解其输入的结果。大多数应用程序和网站使用纯文本作为反馈形式。消息将通知用户有关结果，并且可以是积极的（表示表单提交成功）或否定（“您提供的号码不正确”）。表单也可能包含以下组件：
帮助
这是如何填写表单的任何说明。验证
此自动检查确保用户的数据有效。本文涉及与结构，输入字段，标签，操作按钮和验证有关的许多方面。
表格结构表单是一种对话类型。和任何对话一样，它应该由双方之间的逻辑沟通组成：用户和应用程序。
只要求什么确保只问你真正需要什么。您添加到表单的每个额外字段将影响其转化率。一定要考虑为什么要从用户那里请求某些信息，以及如何使用它。
订购表格逻辑从用户的角度逻辑地询问详细信息，而不是从应用程序或数据库的角度。通常，在他们的名字之前要求某人的地址是不寻常的。
组相关信息将相关信息组合成逻辑块或集合。从一组问题到下一个问题的流程将更好地类似一个对话。将相关领域分组在一起，也将帮助用户了解他们必须填写的信息。比较在下面的联系信息表中的工作原理。
集团相关领域（图片：尼尔森诺曼集团）一列可以 多栏将表单域排列成多列的问题之一是用户可能会不一致地解释这些字段。如果表单具有水平相邻的字段，则用户必须以z模式进行扫描，减慢理解速度并使路径变得完整。但是，如果表单位于单个列中，则完成的路径是页面上的直线。
在左侧，当以标准的两列布局排列表格字段相关的许多方式之一，而在右侧则是页面上的直线。输入字段输入字段是用户填写表单的方式。存在所需信息的各种类型的字段：文本字段，密码字段，下拉列表，复选框，单选按钮，日期选择器等。
字段数形式设计中的一个经验法则是更短更好。这当然看起来很直观：用户的努力减少将导致更高的转换。因此，尽量减少字段的数量。这将使您的表单感到更少的加载，特别是当您要求很多信息时。但是，不要过度; 没有人喜欢变成30场询问的三场形式。在给定时间只显示五到七个输入字段是常见的做法。
在一个易于填写的字段中组合多个字段。（图片：luke wroblewski）（查看大图）强制性 可选尽量避免表单中的可选字段。但是如果你使用它们，至少要明确区分哪些输入字段不能留空。惯例是为必填字段使用星号（*），对于非必填字段使用“可选”字样（以多个必填字段为前提）。如果您决定使用星号作为必填字段，请在表单底部显示一个提示，说明星号是什么，因为并不是每个人都明白这是什么意思。
mailchimp的邮件列表订阅表单。设置默认值避免设置默认值，除非您认为大部分用户（例如，其中90％的用户）将选择该值。特别避免需要的字段。为什么？因为你可能会引入错误。人们快速扫描在线表格，所以不要以为他们会花时间来解析所有的选择。他们可能会跳过已经有价值的东西。
但是，此规则不适用于智能默认值 – 也就是说，根据有关用户的信息设置的值。智能默认可以使表单更快更准确。例如，根据地理位置数据预先选择用户的国家/地区。不过，请谨慎使用这些，因为用户往往会保留预选的字段。
在结帐表格中智能预选的国家输入掩码场屏蔽是一种帮助用户格式输入文本的技术。一旦用户将焦点放在一个字段上，就会出现一个掩码，并且会在字段被填写时自动格式化文本，帮助用户专注于所需的数据并更容易地注意到错误。在下面的示例中，随着手机和信用卡号码的输入，自动应用括号，空格和破折号。这种简单的技术可以节省电话号码，信用卡，货币等等的时间和精力。
（图片：josh morony）仅桌面：使键盘友好用户应该只能使用键盘专注和编辑每个字段。倾向于使用键盘的高级用户应该能够轻松地勾选和编辑字段，而不用把手指从键盘上拉出来。您可以在w3c的设计模式指南中找到键盘交互的详细要求。
即使是简单的日期选择器也应遵循w3c的指导方针。（图片：salesforce）（查看大图）仅桌面：输入字段的自动对焦自动对焦一个字段给用户一个指示和起点，以快速开始填写表单。提供一个清晰的视觉信号，焦点已经移动到那里，无论是通过改变颜色，在框中褪色，闪烁箭头，无论如何。亚马逊的注册表格具有自动对焦和视觉指标。
（查看大图）仅限移动设备：将键盘与输入连接相匹配手机用户欣赏为正在请求的文字提供适当键盘的应用程序。在整个应用程序中实现这一点，而不仅仅是为了某些任务而不是其他任务。
（图片：google）限制打字（自动完成）随着越来越多的人使用移动屏幕，任何可以做的事情，以防止不必要的打字将改善用户体验和减少错误。自动完成可以消除大量的打字。例如，填写地址字段通常是任何注册表单中最有问题的部分。诸如place autocomplete address form（使用地理位置和地址预先填充以提供基于用户确切位置的准确建议）的工具使用户能够以比常规输入字段更少的按键输入其地址。
标签明确书写的标签是使ui更易于访问的主要方式之一。一个好的标签告诉用户该字段的目的，当焦点在字段本身时保持其有用性，并且即使在字段已被填写之后仍然可见。
字数标签不是帮助文本。使用简洁，简短的描述性标签（一两个字），以便用户可以快速扫描您的表单。以前版本的amazon的注册表单包含很多单词，导致完成率很慢。目前的版本好多了，标签很短。
（查看大图）句子案例 标题案例在今天的大多数数字产品中，有两种方式来利用单词：
标题案例：大写每个字。“这是标题案例”。句子：大写第一个字。“这是句子”。用于标签的句子案例比标题案例有一个优点：它稍微更容易（因此更快）阅读。虽然短标签的差异可以忽略不计（“全名”和“全名”），但对于较长的标签，句子情况更好。现在你知道在标题中读长文有多困难。
避免所有caps link切勿使用所有盖帽，否则表单将难以阅读，并且难以快速扫描，因为字符高度不会有变化。
全部标签很难阅读。标签对齐：左对齐 右对齐 热门matteo penzo 2006年关于标签放置的文章表明，如果标签位于领域之上，则表单更快地完成。如果您希望用户尽快扫描表单，顶部对齐的标签很好。
左对齐，右对齐和顶部对齐的标签（图像：ux matters）（查看大版本）顶部对齐标签的最大优点是不同尺寸的标签和本地化版本可以更轻松地适应ui。（这对于空间有限的屏幕特别好）
（图片：css-tricks）左对齐标签的最大缺点是完成时间最慢。这可能是因为标签和输入字段之间的视觉距离。标签越短，输入越远。然而，缓慢的完成率并不总是一件坏事，特别是如果表单要求敏感数据。如果您要求驾驶执照号码或社会安全号码，您可能会故意减慢用户的速度，以确保其正确输入。因此，读取敏感数据标签所花费的时间并不重要。左对齐标签还有一个缺点：它们需要更多的水平空间，这可能是移动用户的问题。
（图片：css-tricks）右对齐标签的最大优点是标签和输入之间的强大的视觉连接。靠近的物品似乎是相关的。这个原则不是新的; 它从派生接近的法律，从格式塔心理学。对于简单的形式，右对齐的标签可以有很好的完成时间。缺点是不适; 这样的形式缺乏硬的左边缘，这使得看起来更难舒服，更难阅读。
（图片：css-tricks）外卖：如果您希望用户快速扫描表单，请将标签放在栏位上方。布局将更容易扫描，因为眼睛将直接向下移动页面。但是，如果您希望用户仔细阅读，请将标签放在字段的左侧。这种布局会减慢阅读器的速度，并使它们以z形运动扫描。
内联标签（占位符文本）在输入字段中设置为占位符的标签将在场获得焦点后消失; 用户将无法再查看。虽然占位符文本可能适用于两个字段的形式（带有用户名和密码字段的简单登录表单），但是从用户需要更多信息时，它是可视化标签的替代品。
（图片：snapwi）一旦用户点击输入字段，标签将消失，因此用户不能仔细检查他们是否写了要查询的内容。这增加了错误的几率。另一个问题是用户可能会将占位符文本错误地用于预填充数据，因此忽略它（如尼尔森诺曼集团的眼动跟踪研究证实）。
占位符文本作为字段标签占位符文本的一个很好的解决方案是浮动标签。默认情况下会显示占位符文本，但一旦输入字段被点击并输入文本，则占位符文本会淡出，并且顶部对齐的标签将生效。
（图片：mds）外卖：不要只依靠占位符; 也包括标签，因为一旦字段已经填写，占位符将不再可见。使用浮动标签，以便用户确信已填写正确的字段。
动作按钮单击时，操作按钮会触发一些活动，例如提交表单。
主要的 次要操作初级和次级动作之间缺乏视