移动表单的最佳实践

此文翻译自smshingmagazine,作者：Nick Babich，翻译：扬扬离 点击查看原文

特此声明，如有侵权，请联系删除

快速摘要：用户在填表单的时候很犹豫，所以我们作为设计师的目的就是使填表单的流程尽可能简洁。Nick分享了一些能让你有效设计表单的技巧。

表单是所有移动交互的关键，它处于用户和用户所需要达到目的之间。每天我们使用表单进行基础的在线活动。回忆一下你最后一次网上买票，订酒店房间或者网购，大部分这些交互都包括一步填写表单步骤。

表单只是达到目的的一种手段。用户应该能够快速完成它们而不会产生混淆。在本文，你将学到一些帮助你有效设计表单的技巧。

什么构成有效表单

每个表单最优先的目标是完成。两个因素对完成率有主要影响：

1、对复杂度的感知

用户看到表单第一件事儿就是评估需要花多少时间去完成它。用户通过扫描的方式评估。感知在评估过程中起到一个至关重要的作用。一个表单看起来越复杂，用户放弃填写的可能性就越大。

2、交互成本

交互成本是用户为了达到目标而与界面交互的努力（包括认知和物理）的总和。交互成本与表单可用性直接相关。用户完成表单所需的工作量越多，表单的可用性就越低。高交互成本可能是难以输入的数据的结果，可能是无法理解某些问题的含义，或者对错误信息的混淆。

表单的组成部分

一个典型的表单包括一下五个部分。

1、输入字段

这包括文字字段，密码字段，复选框，单选按钮，滑块以及用户输入的任何其他字段。

2、字段标签

这告诉用户相应输入字段的含义。

3、结构

这包括字段的顺序，表单在页面上的外观以及不同字段之间的逻辑连接。

4、操作按钮

表单至少有一个操作按钮（触发数据提交的按钮）。

5、反馈

反馈通知用户操作的结果。反馈可以是积极的（例如，表明表单已经成功提交）或者是消极的（例如，您提供的数字不正确）。

本文介绍了与结构、输入字段、标签、操作按钮和验证相关的许多方面。本文中提到的大多数观点都有正反案例，所有这些案例都是使用Adobe XD设计的。

输入字段

在表单设计方面，设计师最重要的是尽量减少打字的需要。减少投入努力至关重要。设计师可以通过专注于表单字段设计来实现这一目标。

最小化输入字段总数

您要求用户填写的每一个表单都需要付出一些努力。填写表单付出的努力越多，用户完成表单填写的可能性就越小。所以，表单设计的基本原则就是越短越好—去掉所有不必要的字段填写。

Baymard Institute分析了结账表格，发现结账过程太长或太复杂是结账时放弃填写的主要原因之一。该研究发现结账平均包含近15个表单字段。大多数在线服务可以将默认显示的字段数减少20%到60%。

很多设计师很熟悉“少即是多”原则，但是，他们仍然会提出其他问题，试图收集有关用户的更多数据。在初始注册期间收集有关用户的更多数据可能很诱人，但是请拒绝这种诱惑。试着从这方面考虑，随着您添加的每一个额外字段，您将增加失去潜在用户的机会，那您所获的信息值得失去新的用户吗？请记住，只要您收集到用户的联系方式，您就可以随时跟进，收集更多数据。

清楚的区分所有可选字段

在优化可选字段之前，请先问问自己是否确实需要表单中包含它们。想想你真正需要什么信息，而不是你想要什么。理想情况下，表单中可选字段的数量应为零。

如果在头脑风暴会议之后，您仍希望在表单中包含一些可选问题，请向用户明确说明这些字段是可选的：

标记可选字段而不是强制字段

如果您尽可能少地询问，那么您表单中的绝大多数字段都是强制性的。所以，只需标记少数输入字段。例如，如果6个输入字段中5个都是强制性的，那么将一个字段标记为可选字段是比较合理的。

使用可选标签表示可选字段

避免使用星号表示可选字段，并非所有用户都会将星号与可选字段相关联，并且某些用户会对其含义感到困惑（星号通常用于表示必填字段）。

尺寸合适

如果可能，使用字段长度作为提示。输入字段的长度应按照字段中预期的信息量的长度设计。该字段的大小将充当视觉约束—用户只需查看该字段长度即可知道需要输入多少文本。通常，诸如区号和门牌号应短于街道地址的字段。

激活正在输入的字段

自动聚焦在表单的第一个输入字段，自动聚焦字段位用户提供指示和起点，一边它们能快速开始填写表单。通过这样做，你可以减少交互成本—为用户节省一个不必要的点击。

突出聚焦激活的输入字段。聚焦字段本身应该是非常清晰的—用户应该能够一目了然地了解重点。可以是描边边框或者是为输入框添加阴影。

不要要求用户重复输入他们的邮箱地址

电子邮件地址的额外字段在产品开发人员中如此受欢迎的原因显而易见：每个公司都希望尽量减少硬弹跳的风险（无效电子邮件导致的无法交付）。很遗憾，遵循此方法并不能保证您获得有效的地址。用户通常从一个字段复制粘贴他们的地址到另一个字段。 

提供“显示密码”选项

复制密码输入字段是产品设计的另一个常见错误。设计师遵循此方法因为他们认为这样做可以防止用户输入错误密码。实际上，重复输入密码字段不仅会增加交互成本，还不能保证用户不出错。因为用户没有看到他们在该字段输入的内容，他们可能会犯同样的错误两次（在两个字段中），并且当它们尝试使用密码登录时会遇到问题。就如 Jakob Nielsen总结：

当用户输入密码时，可用性会受到影响，他们获得的唯一反馈就是一排符号。通常，屏蔽密码甚至不会增加安全性，但由于登录失败，它确实会使您的业务付出代价。 

不要分割数据字段

在询问全名、电话号码或出生日期时，不要分割字段。分割字段迫使用户额外点击以移动到下一个字段。对于需要格式化的字段（例如电话号码或出生日期），最好有一个单独的字段和清晰的格式规则作为它的占位符。 

避免下拉菜单

Luke Wroblewski有句名言：下拉菜单应该是用户界面的最后一招。下拉框对移动设备尤其不利，因为折叠的元素使得在小屏幕输入数据的过程更加困难：在下拉框中放置选项需要两次点击并隐藏选项。

如果使用下拉框选择选项，考虑用单选按钮替换它。这样使所有选项都可见，并降低交互成本—用户可以点击该项目并立即选择。 

使用占位符和字段屏蔽

格式不确定性是表单设计中最重要的问题之一。这个问题与表单废弃直接相关—当用户不确定应该以何种格式提供数据时，他们可能快速地放弃表单。您可以做一些事情来使格式更清晰。

占位符文本

字段里的文本可以告诉用户需要什么内容。占位符文本对于“全名”之类的简单字段不是必需的，但是对于需要特定格式数据的字段，它可能非常有用。例如，如果您设计了跟踪包裹的搜索功能，那么最好提供一个实例跟踪编号作为跟踪编号字段的占位符。 

表单必须在占位符文本和用户输入的实际值之间有清晰的视觉区别，这一点非常重要。换句话说，占位符文本不应该看起来像一个预设值。如果没有清晰的视觉区别，用户可能会认为具有占位符的字段已经具有值了。

字段屏蔽

字段屏蔽是一种帮助用户格式化文本的技术。很多设计师混淆了字段屏蔽和占位符文本—它们不是一回事儿。与占位符不同（占位符基本上是静态文本），掩码自动格式化用户提供的数据。在下方示例中，当输入电话号码时，圆括号、空格和破折号会自动出现在屏幕上。屏蔽输入还使用户更容易验证信息。当一个电话号码以块的形式显示时，查找和纠正一个输入错误就变得更容易了。

使用配套键盘

移动用户喜欢为输入字段提供合适键盘的应用程序和网站。这个特性使它们减少不必要的点击。例如，当用户需要输入信用卡卡号时，您的应用程序应该只展示拨号键盘。在整个应用程序中一致地实现键盘匹配是非常重要的（应用程序中所有表单都应该具有此功能）。

设置HTML输入类型以显示匹配的键盘。七种与表单设计相关的输入类型：

input type="text" 显示移动设备的普通键盘

input type="email" 显示移动设备的普通键盘和“@”“.com”

input type="tel" 显示0到9的小键盘

input type="number" 显示带有数字和符号的键盘

input type="date" 显示移动设备的日期选择器

input type="datetime" 显示移动设备的日期和时间选择器

input type="month" 显示移动设备的月份和年份选择器 

询问特定范围时使用滑块

许多表单要求用户给出特定范围的值（例如，价格范围、距离范围等）。为了达到这个目的，不要使用两个单独的字段从“”到“”，而是使用一个滑块，用户通过拇指交互即可指定范围。 

清晰解释为什么要询问敏感信息

人们越来越关注隐私和信息安全。当用户看到他们认为私有的信息请求时，他们可能会想“嗯？他们为什么需要这个？”如果表单要求用户提供敏感信息，一定要解释为什么需要它。您可以通过在相关字段下面添加解释文本来实现这一点。根据经验，解释文本不应该超过100个字符（此处字符是英文字符）。 

注意静态默认值

智能默认值是根据系统拥有的关于用户的信息计算出来的，与智能默认值不同，静态默认值是对所有用户都相同的预置值。避免静态值除非您相信您用户中有很大一部分，比如95%会选择这些值，特别是对于必填字段。为什么？因为这很可能引起错误—用户浏览很快速，他们不会花额外时间来分析所有的问题；相反，他们将直接跳过字段，以为它已经有一个值。

保护用户数据

Jef Raskin曾经说过“系统应该将所有用户输入视为神圣的”，表单也是如此。当你在填写网络表单时，不小心刷新页面但是数据仍然保留在字段中，这种体验非常好。Garlic.js等工具可以帮助您在提交表单之前在本地保存表单的值。这样，如果用户不小心关闭了选项卡或浏览器，就不会丢失任何宝贵的数据。

自动化操作

如果您想让数据输入的过程尽可能地顺畅，仅仅最小化输入字段的数量是不够的，您还应该注意用户在数据输入方面所付出的努力。打字输入有很高的交互成本，即使使用物理键盘，也很容易出错，而且很耗时。但当涉及到移动屏幕时，更容易出错更耗时。更多的输入增加了用户出错的几率。尽量避免不必要的输入，因为这会提高用户满意度，降低错误率。

通过以下几种方式你可以达到自动化操作目的

自动完成

许多用户在谷歌的搜索框中输入问题时都有自动完成。谷歌向用户提供与用户输入的内容相关的建议列表。同样的机制也可以应用在表单设计中。例如，表单自动完成电子邮件地址。 

自动大写

自动大写使第一个字母自动大些。这个特点对于名字、街道等字段来说是极好的，但是请避免在输入密码时使用它。

自动更正

自动更正修改那些拼写错误的单词。对特殊的字段，如名称、地址等关闭此功能。

自动填写个人资料

在任何在线注册表单中，输入地址通常是最麻烦的部分。通过浏览器根据以前输入的值填充字段，使此任务更容易。根据谷歌的研究，自动填写帮助人们填写表格节省了30%的的时间。

使用移动设备的本地特性来简化数据输入

现代移动设备是具有许多惊人功能的复杂设备。设计人员可以使用设备的本地特性，如摄像头或地理位置，来简化数据输入的任务。

下面是一些关于如何使用传感器和设备硬件的提示。

定位服务

可以根据用户的地理位置数据预先选择用户的国家。但是由于准确性问题，预填完整地址可能会有问题。Google’s Places API可以帮助解决这个问题。它同时使用地理定位和地址预填充，根据用户的确切位置提供准确的建议。

使用定位服务，可以提供智能默认值。例如，在“查找航班”表单中，可以根据用户地理定位将“出发地”字段预填为距离用户最近的机场。

生物识别授权

现今使用文字密码最大的问题就是大多数用户容易忘记密码。82%的用户记不住密码，5%到10%的会要求用户重置密码。恢复密码是电子商务中的一个大问题。75%的用户如果在结账时遇到恢复密码等问题就不会完成购买。

未来的密码就是没有密码。甚至今天，移动开发者可以利用生物识别技术，用户不需要输入密码，他们就能使用生物识别阅读器进行身份验证—使用指纹或人脸扫描。

相机

如果表单要求用户提供信用卡或者驾驶证详细信息，可以通过把相机作为扫描仪简化数据输入过程。提供一个选项，以采取的照片卡自动填写所有细节。

但是请记住，无论您的应用程序填充字段有多好，都必须让它们可供编辑。用户应该能够随时修改字段。

声音

声控设备，比如苹果的HomePod、谷歌Home和亚马逊(Amazon)的Echo等语音控制设备正在积极蚕食市场。更愿意使用语音进行普通操作的人数显著增加。根据ComScore的数据，到2020年，50%的搜索将是语音搜索。 

随着用户使用语音命令变得更加舒适和自信，语音命令将成为移动交互的一个预期功能。声控输入为移动端用户提供很多优势，尤其是在用户不能集中注意力在屏幕的情况下，例如，开车时。

在设计表单是，您可以提供声控作为数据的替代方法。 

字段标签

编写清晰准确的标签

标签是文本，它告诉用户在特定的输入字段中期望从他们那里得到什么数据。编写清晰的标签是使表单更容易访问的最佳方法之一。标签应该帮助用户了解需要什么信息。

避免使用完整的句子来解释。标签不是帮助文本。写简洁明了的标签（一两句话），这样用户可以快速浏览你的表单。

将标签和输入放在一起

把每个标签靠近输入字段，因为眼睛会直观地知道它们是绑定在一起的。 

不要使用渐隐的占位符文本作为标签 

虽然内联标签看起来不错，并且节省了宝贵的屏幕资源，但是这些好处远远比不上显著的可用性缺点，其中最关键的就是上下文的丢失。当用户开始输入时，占位符文本消失，迫使用户回忆相关信息。虽然对于字段少的表单来说可能不是问题，但是对于很多字段的表单，比如7到10个字段的表单，这可能是一个大问题。用户在输入数据后很难回忆起所有字段标签。毫不奇怪，用户测试不断显示，表单字段中的占位符对可用性的损害常常大于帮助。

对于占位符消失的问题，有一个简单解决方案，浮动或自适应标签。 

顶部对齐标签

将字段标签放在表单的字段之上可以改进用户扫描表单的方式。使用眼球追踪技术，谷歌显示用户在提交表单前需要更少的注视、更少的注视时间和更少的扫视。

另一个顶端对齐标签的优势是它为标签提供更多的空间。长标签和本地化版本将更容易适应布局。后者尤其适用于小屏幕移动端。您可以让表单字段扩展整个屏幕的宽度，使其足够大，以显示用户的整个输入。

句子VS标题 

大写单词有两种常用方法：

标题大小写：大写每一个单词首字母，“This Is Title Case.”

句子大小写：大写句子首字母，“This is sentence case.”

相比标题大小写，标签使用句子大小写有一个优点：稍微更易读，更快速。虽然短标签的区别可以忽略不计（“Full Name” 和 “Full name”之间就没有太大区别），但是对于较长的标签，句子大小写更好。

避免标签使用大写字母

所有字母都大写，在不涉及实质性阅读的上下文中（如，首字母缩写和logo）是可以的，其他情况就要避免所有字母大写。正如Miles Tinker在他的著作《打印的易读性》中提到的，与小写字体相比，全大写字体大大降低了扫描和阅读的速度。

布局

您现在知道，用户是扫描网络页面，而不是阅读它们。对于填写表单也是如此，所以设计人员需要设计易于扫描的表单。允许高效地扫描对于加快表单填写流程是至关重要的。

使用单列布局

CXL研究所的一项研究发现，单列表单比多列表单完成得更快。在这项研究中，测试参与者完成单列表单的平均速度比多列表单快15.4秒。

多列表单打乱了用户的垂直动量，多列表单使视线来回曲折移动。这大大增加了眼睛注视次数，因此也增加了完成时间。此外，多列表单可能会给用户单来不必要的问题，比如“我应该从哪里开始？”以及“右列中的问题和左列的问题同等重要？”

在单列设计中，眼睛沿自然方向移动，从上到下，一次一行。这有助于用户设置一个清晰的路径。单列非常适合移动设备，因为垂直屏幕更长，垂直滚动也是移动用户的一种自然手势操作。

这条规则有一些例外。可以将简短且逻辑相关的字段放在同一行（例如，城市和地区代码）。 

用你的问题创造一个流程

提问的方式也很重要。应该从用户的角度逻辑地提出问题，而不是根据应用程序或数据库的逻辑，因为这将有助于创造与用户对话的感觉。例如，如果你设计一个结账表单并询问诸如全名、电话号码和信用卡等细节，那么第一个问题应该是关于全名的。改变顺序，例如，先问电话号码而不是姓名会导致不适。在真实世界对话中，在问别人的名字之前问他们的电话号码是不寻常的。

把深入的问题放到最后

当涉及到为你想问的问题设计流程时，考虑一下优先级。遵循先易后难原则，将深入的和个人问题放在最后。这让用户更容易进入这个过程。一旦它们建立了融洽的关系，他们就更有可能回答复杂和侵入性更强的问题。这是有科学依据的:罗伯特•恰尔迪尼(Robert Cialdini)的一致性原则规定，当一个人朝着某件事迈出一小步或迈出一小步时，他们会觉得更有必要完成它。

将相关字段分组在一起

格式塔原理其中一条，接近原则指出相关的元素应该彼此接近。这个原则可以应用于表单中的问题顺序。相关性越强的问题，它们之间的距离就应该越近。

设计人员可以将相关子都分组为多个部分。如果表单多于六个问题，则将相关问题按照逻辑分组。不要忘记在各个部分之间提供大量的空白，以便在视觉上区分它们。

让长表单看起来更简单 

如何设计一个向用户提出大量问题的表单？当然，你可以把所有问题放在一个屏幕里。但这降低了用户的完成率。如果用户没有足够的动力完成一个表单，那么表单的复杂度可能吓跑他们。第一印象起着至关重要的作用。通常，表单越长或越复杂，用户开始填充空白的可能性就越小。最小化字段的数量，这就造成了一种感觉，表单比实际短。

有两种方法可以做到

渐进式披露

渐进式披露就是在适当的时间为用户提供正确的信息。目标是在适当的时间把合适的东西放在屏幕上

最初，只向用户显示几个最重要的选项。

在用户与表单交互时显示表单的某些部分。

组块

分块需要把一个长表单拆分成几个步骤。可以通过将表单拆分成几个步骤的方式来提高完成率。分块还可以帮助用户处理、理解和记忆信息。当涉及多步骤表单时，始终使用完整性度量工具通知他们的进度。

设计人员可以使用进度跟踪器（如示例所示）或者“Step # out of #”指示器来指示总共有多少步骤，并显示用户目前的进度。后者对于移动表单非常有用，一问步骤指示不会占用太多空间。

操作按钮

按钮是一个交互元素，它引导用户采取行动。

使操作按钮具有描述性

按钮的标签应当解释这个标签的功能，用户应该能够通过看到按钮就能知道点击后会发生什么。避免使用“提交”和“发送”之类的通用标签，而是使用描述操作的标签。

不要使用清除或者重置按钮

清除或重置按钮允许用户清除他们表单中的数据。这些按钮从不帮助用户，而且经常伤害他们。删除用户输入的所有信息的风险超过了重新开始的好处。如果用户填写表单时不小心按错了按钮，他们很可能不会重新开始。

对主按钮和辅助按钮使用不同的样式

如果可能，避免辅助按钮。但是，如果表单有两个按钮调用，例如，电子商务表单中的“使用优惠券”和“提交订单”，则确保主操作和辅助操作之间有清晰的视觉区别。通过在按钮上添加更多的视觉权重来对主要操作进行视觉优先级排序。这将防止用户点击错误的按钮。 

设计对手指友好的触摸目标

微小的触摸目标创建了一个可怕的用户体验，因为他们使用户与交互对象交互变得具有挑战性。设计对手指友好的触摸目标非常重要—更大的输入空间和按钮。

下图显示承认手指的平均宽度约为11毫米。

根据Material Design设计原则，触摸目标应至少为48*48dp。无论屏幕大小如何，这种尺寸的触摸目标的物理尺寸都在9毫米左右。使用更大的触摸目标来适应更广泛的用户可能是合适的。

不止触摸目标尺寸重要，触摸目标之间的足够空间也很重要。在触目目标之间保持安全空间的主要原因是防止用户触摸错误的按钮和调用错误的操作。当诸如“同意”和“不同意”这样的两个选择彼此相邻时，按钮之间的空间变得极其重要。Material Design设计原则建议使用8个或者更多dp的空间来分离触摸目标。这将创建平衡的信息密度和可用性。 

点击后禁用按钮

表单操作按钮通常需要一些时间来处理。例如，提交后可能需要计算数据。重要的是，不仅要在操作时提供反馈，还要禁用提交按钮，以防止用户意外地在此点击按钮。这点在电商网站和移动应用程序尤其重要。通过禁用操作按钮，不仅能防止用户意外重复点击提交，还能向用户提供了确认（用户将知道系统已经收到了他们的提交）。

帮助和支持

成功完成填写表单后，通知用户这一点非常重要。可以在现有表单的上下文中提供此信息（例如，在刷新表单上方显示一个绿色成功标记），或者将用户引导到一个新页面，该页面表示他们的提交已经成功。 

错误和验证

用户会犯错误，这是不可避免的，设计一个支持用户在失败时刻使用的用户界面是非常重要的。

虽然关于错误和验证的主题值得单独撰写一篇文章，但是仍然有必要提到一些改进移动表单用户体验的建议。

约束每个字段输入

预防胜于治疗。如果您是一位经验丰富的设计人员，您应该熟悉可能导致错误状态的最常见的情况。例如，通常很难在第一次正确地填写表单，或者在移动设备网络连接不好时正确地同步数据。考虑这些情况，以尽量减少错误的可能性。换句话说，通过约束和提供建议的方式可以更好地防止用户犯错误。

例如，如果您设计及了一个允许人们搜索酒店预订的表单，则应该防止用户选择已经过去的入住日期。如下图Booking.com所示，你可以简单的通过日期选择器来控制用户只能选择今天或者将来的日期。这样的选择器将迫使用户选择一个合适的日期范围。 

不要把数据验证规则设置太严格

虽然有的情景设置严格验证信息是必要的，但是大多数情况下，严格的验证信息会延迟编程。当用户以与预期稍微不同的格式提供数据时，在屏幕上显示错误会造成不必要的摩擦。这将对转换产生负面影响。

一个问题有几个变体答案是很常见的，例如，当一个表单要求用户提供有关其所在州的信息，而用户的响应时输入州的缩写而不是全称（例如，CA而不是California）。表单应该接受这两种格式，开发人员将数据转换为一致的格式。

清除错误信息

当你编写错误信息时，请将重点放在最小化用户在与表单交互式遇到问题的挫折感上。下面是一些写有效错误信息的规则：

永远不要责怪用户

您传递错误消息的方式可能会对用户如何看待它产生巨大的影响。“您输入了一个错误的数字”这样的错误信息将所有的责任推给用户，结果，用户可能会感到沮丧进而放弃使用应用程序。写一些听起来中立或者积极的内容。“那个数字不正确”就是一个听起来比较中性的信息。

避免模糊或者笼统的错误消息

不要对用户说太多“出错了，请稍后再试”。用户会想究竟是什么出错了。总是试着解释问题的根本原因，确保用户知道如何修复错误。

使错误消息具有可读性

像“用户错误输入: 0x100999”这样的错误信息是神秘而可怕的。像人一样写，而不是像机器人一样。使用人类语言，解释用户或系统究竟做错了什么，用户应该做些什么来修复这个问题。

内联显示错误

当涉及到显示错误信息时，设计人员会一般会选择两个位置，表单顶部或内联。放在表单顶部可能会带来糟糕的体验。 Javier Bargas-Avila 和 Glenn Oberholzer对在线表单验证进行了研究，他们发现在表单顶部现实所有错误消息会给用户的记忆带来很大的认知负担。用户需要花额外的时间将错误消息与需要注意的字段进行匹配。

内联定位错误消息要好得多。首先，这个和用户自上而下的阅读流一致。其次， 错误将出现在用户输入的上下文中。 

使用动态验证

选择显示错误消息的时间非常重要。只有在按下提交按钮后才看到错误消息可能会让用户感到沮丧。不要等到用户完成表单后，请在输入数据后立刻提供反馈。

使用带有实时反馈的内联验证。验证立即告诉人们他们输入的信息是否符合表单的要求。2009年， Luke Wroblewski测试了内联验证与提交后验证的对比，发现内敛验证的结果如下：

成功率提高22%；

错误率减少22%；

满足率提升31%；

完成时间节省42%；

眼球固定次数减少了47%。

但同时内联验证应该小心实现：

避免在激活字段时就显示内联验证

在这种情况下，只要用户激活一个字段，他们就会看到一个错误信息。甚至在表单完全为空时显示错误信息。当激活输入字段时，可能看起来像表单在用户开始填写之前就对他们大喊大叫了。

不要在输入每个字符后验证

这种方法不仅增加了不必要的验证尝试次数，而且还会让用户感到沮丧（因为用户可能会在完成字段之前看到错误消息）。理想情况下，内联验证消息应该在用户停止输入后500-10000毫秒或转移到下一个字段后出现。这个规则有一些例外：当用户输入密码时，内联验证很有帮助的（检查密码是否满足复杂性要求）；创建用户名（检查名称是否可用）和输入带有字符限制的消息时。

易用性

所有能力的用户都应该能够访问和享受数字产品。设计人员在构建产品时应该尽可能地考虑易访问性需求。以下几种方式可以使您的表单更易于使用。

确保表单有适当的对比

用户很可能在户外操作表单，确保表单在强光和低光环境下都易于使用。检查表单中字段和标签的对比度。W3C推荐的正文对比度如下：

小文本与背景的对比度至少为4.5:1；

大型文本（14点粗体，18点常规或者以上）的对比度应该至少为3:1。

测量颜色对比有点难度，幸运的是，有一些工具能简化此过程。其中之一是Web AIM颜色对比度检查起，它帮助设计师测量对比度级别。

不要仅仅依靠颜色来传达状态

全球大约有1/12的男性（8%）和1/200的女性患有色盲（或色觉缺陷）。虽然色盲有很多种类型，但最常见的两种是红色色盲，即对红光的敏感度降低，和 绿色色盲，即对绿光的敏感度降低。当验证错误或成功消息时，不要仅仅依赖颜色来传达状态（例如，将输入字段设置为绿色或红色）。正如W3C准则所属，颜色不应该用做传递消息、只是操作、提示响应或区分视觉元素的唯一视觉手段。设计人员应该使用颜色来突出或者补充已经可见的东西。通过提供额外的视觉提示来帮助色盲人士理解用户界面，从而为他们提供支持。

允许用户设置字体大小

允许用户增大字体尺寸以提高可读性。移动设备和浏览器包括一些功能，使用户能够在系统范围内调整字体大小。此外，请确保表单为大字体大小分配了足够的空间。

测试您的设计决策

上面提到的所有要点都可以视为行业最佳实践。但是仅仅因为所谓的“最佳实践”并不意味着它总是表单的最佳解决方案。应用程序和网站在很大程度上取决于它们的使用环境。因此，测试您的设计决策总是必不可少的。确保填写表单的过程很顺利，流程不会中断，并且用户可以解决他们在填写过程中遇到的任何问题。定期进行可用性测试，收集关于用户交互的所有有价值的数据，并从中学习。

结论

用户填写表单时会比较犹豫。所以，作为设计师，我们的目标就是尽可能简化填写表单的过程。在设计表单时，要努力穿件快速、无摩擦的交互。有时一个微小的改变—比如正确的编写错误消息可以显著提高表单可用性。