设计完美表单的10个技巧

表单是用户界面设计的功能方面，因此在设计它们时有一些原则。今天我们将讨论提供表单以完成所有设计技巧和最佳实践。

1.从输入开始

从最常见的表单元素开始：文本输入字段。它是大多数形式中最常见的组成部分，所以要把它弄好，你已经到了一半。

每个表单输入有3个基本元素：文本字段，标签和错误消息。无论您选择哪种方式来设计这个最基本的构建块，请确保始终有一种方法让用户知道需要哪条信息，以及是否有错误 - 他们如何从该错误中恢复。这让我们整齐地把标签放在哪里。

标签在上面

趋势来来去去。有一种趋势倾向于使用占位符作为标签。虽然使用标签占位符不一定是错误的，但它们确实存在一些UX问题。问题是如果用户点击它，标签就消失了。如果用户返回此表单并且输入因错误而被聚焦，则标签也会消失。

标签需要始终可见。出于这个原因，标签位于顶部。

为什么输入字段的顶部而不是左侧？

当标签位于字段的左侧时，这将需要在移动设备上堆叠一个标签。首先考虑移动。

引导用户使用占位符输入正确的信息，并使用标签进行预期用途。

将标签放在输入字段上方的另一个参数是读者有一条线性垂直线来读取信息，研究显示比从左列跳到右列更快。因此，让您的用户更轻松 - 为他们提供一条简洁的线路，让他们阅读他们需要输入的内容以推进您的网站。

2.错误状态和警告

对于每个标准文本输入字段，您都需要相应的错误消息。以下是有关错误案例设计的一些提示：

错误消息可能来自客户端或服务器。客户端可以检测诸如何时未填充必填字段或电子邮件地址格式不正确的情况。服务器端将能够查明当前是否存在电子邮件地址。知道哪些是客户端，哪些是服务器。在表单作为提示提交之前，应该向用户提供客户端错误。客户端错误应该阻止用户提交不正确的信息。

通过错误消息获取智能。

当用户发出错误时，请向他们提供有关哪个字段导致错误的信息。为了安全起见，一些开发人员可能不希望在登录时指定电子邮件或密码是否错误，这完全没问题。但是，当用户只是在结账时注册电子邮件或输入他们的地址时，请告诉他们哪个字段错误以及原因。

每次设计文本输入时，还要考虑用户点击“发送”之前和之后错误消息的外观。

包括警告

如果特定字段需要特定条件 - 例如，密码需要具有一定数量的字符并将数字和字母组合在一起，请让用户知道。您可以包含显示密码输入时密码强度的方法。显示电子邮件是否已注册，或者是否已使用用户名也可能很有用。

3.喜欢与喜欢

在视觉上，当您喜欢分组时，表单看起来更整洁，但从用户体验的角度来看，它也更好。想一想移动用户将如何与此表单进行交互。如果文本输入字段在一起，则用户必须留在键盘上才能完成字段。

如果您要求用户从文本输入字段切换到下拉列表，无线电和返回文本输入字段，这将更多地从用户端转移。想想用户如何握住他们的移动设备，以及如何通过将类似的输入字段组合在一起来减少摩擦。

4.收音机按钮，下拉菜单和复选框

有时可能会混淆何时使用单选按钮，下拉菜单和复选框。

单选按钮是向用户显示少量可能答案的好方法。作为设计师，您可以预先选择答案，或将其留空。当只能选择一个选项时，单选按钮是最佳选择。

当有许多可能的答案时，下拉列表更合适（我的经验法则是如果有超过5或6）。您可以预先选择答案，或将顶部项目保留为“请选择”以指示用户做出选择。

当您有一个要勾选的方框（例如条款和条件）或者您有多个可能的选择时，复选框是最佳选择。如果您想知道要向用户发送哪些营销电子邮件，一组复选框将允许您进行多个选择。

使用复选框而不是单选按钮不应限制您的用户界面设计决策。作为设计人员，您可以灵活地了解这些UI元素在屏幕上的显示方式。如果您仍希望设置样式复选框以使其看起来更有趣，则这不应对用户体验产生影响。您可以通过设计可选择的图像或图标，使其更具吸引力，而不是在小圆圈旁边放置文本列表。

5.尽可能消除可选字段

如果业务目标是让用户从您的网站购买东西，那么您作为设计师的目标是消除客户和系统之间尽可能多的摩擦。取出不必要的字段会使表单在用户方面显得更少工作。

在设计任何类型的结账或送货地址表格时，这一点很重要。如果营销部门想要了解客户的兴趣，以便他们知道要发送哪些营销电子邮件，那么在客户购买商品后可能还有其他方式可以找到这些信息（例如，当他们“确认电子邮件”）。

始终寻找创造性的方法，只有最小数量的字段可见。如果您的目标是优化电子商务网站上的转化，请专注于最小化表单中的字段数量以进行送达地址和结帐。如果您正在设计预订航班的界面，请向用户显示查看可用航班所需的最少字段数。一旦您的用户投入，您就可以开始找到他们可能需要的更多外围信息 - 例如行李数量等。

6.使用自动完成更长的字段

根据街道的名称，街道名称字段可能需要花费大量时间来输入 - 特别是在移动设备上。输入正确可能更加困难。

您可以考虑合并Google地图API以使街道名称自动完成。这意味着用户可能只需键入前几个字符，并从可能的街道名称的下拉列表中选择正确的街道。甚至可以自动填充邮政编码，只需拥有街道的名称，但我们将在下一点讨论这个问题。

7.使用条件逻辑

有一些方法可以使用逻辑代表用户输入一些信息，使他们的生活更轻松一些。

• 如果您了解用户所在国家/地区，则设计可以预先确定他们可能需要的其他字段（如果他们在美国，则为“州”，如果他们在爱尔兰等，则为'县'）

• 您可以使用邮政编码填充城市，州或省的名称。

• 如果您的国家/地区基于IP地址，您是否可以在电话号码字段中填写国家/地区代码？

如果您要代表用户填充字段，请始终为他们提供编辑此信息的方法。你可能不正确。

例如，您可以使用Google Maps API获取德国街道的名称。通过了解街道的名称，您还可以获得区号。但是，德国的一些街道足够大，可以跨越不同的区域代码，因此对于少数边缘情况，信息将是错误的。如果需要，始终为用户提供编辑数据的选项。

探索世界上每个国家的条件逻辑将是一项巨大的工作 - 所以要善于努力。查看您获得最多订单或流量的国家/地区，并开始针对这些国家/地区进行优化。如果您看到强大的回报，您可以继续为更多国家/地区实施相同的条件逻辑。

8.通过占位符获得智能

之前我们讨论过如何不使用占位符作为文本字段标签，因为当用户点击它时它会消失。我们没有探索占位符可以改善用户体验的其他方式。

占位符提供了一个向用户显示如何格式化其信息的简洁机会。电话号码就是一个很好的例子。用户应该包含他们的国家代码吗？还是区号？

当您需要某种格式的电话号码或信用卡号码以包含破折号时，您可以通过在占位符中提供示例来通知用户此信息。这是通过明确说明您需要国家/地区代码等来最小化错误的一种很酷的方法。

9.明确沟通下一步

通过沟通接下来会发生的事情，使您的按钮超时工作。如果还有其他步骤要完成，请将此信息告知用户。

您可以说“查看订单”或“立即使用Paypal付款”，而不是使用“下一步”或“结帐”。通过专门告诉用户点击它时会发生什么来添加另一级别的通信。这个按钮会完成他们的订单，还是他们有时间审查它？他们会被带到Paypal登录吗？

始终寻找方法让用户在体验期间感到放松，特别是如果它影响他们的银行余额。

每次我使用亚马逊结账时，我仍然会感到焦虑，因为他们直到最后一步才告诉我包括运费在内的全部金额。与您的用户保持透明。通过向他们提供他们在每一步所需的信息来推动信任，并清楚地解释当他们达成行动号召时会发生什么。

10.继续寻找优化方法

一旦你推出了明亮，闪亮的新表格 - 继续关注分析。如果你发现很多人在看到它时反弹，找出原因。进行用户测试以查看用户感觉不舒服的位置，并努力消除这种摩擦。作为一名设计师，我们的工作往往从未真正“完成”。

---

结论

表单有时候不是一件非常有趣的设计，但如果做得好，它们可以对网站或应用程序的用户体验产生巨大影响。设计您的表单以更加努力工作，这样用户就不必这样做了。

通过行动呼吁明确沟通，通过警告和占位符向用户提供提示，并提供自动完成功能。始终寻找新的方法来完成更多的繁重工作，因此用户可以获得无摩擦的体验。

源自大设计

QQ交流群：609764983

资源共享盘：设计资源共享盘