我好久没见了。自从我懒惰以来，我没有翻译这篇文章很长时间。这次我翻译了一篇关于表格的非常基本的文章。一些例子是牵强附会的，每个人都可以选择性地看到它

表单对于企业和个人同样重要，在数据收集方面，我们在大多数情况下使用表单（可能是因为我们在互联网繁荣之前已经使用了很长一段时间）。因此，创建用户友好的表单对于填写表单的效率至关重要。

表格分辨率

表单的目的，内容和大小是不同的，但有一些基本元素可以帮助我们轻松填写。

亚马逊创建帐户表单解决方案

（1）标题

此元素可帮助用户指导完成表单的整个过程，尤其是在您收集的数据具有多个标题的情况下。例如：个人详细信息，工作详细信息，财务详细信息。

（2）标签

标签告诉用户他们希望在任何特定输入区域填写什么。

（3）占位符

占位符是标记的附加说明。

（4）错误消息提示

该错误消息提示用户提供反馈并提醒用户错误填写的原因。

（5）动作按钮

操作按钮位于表单的末尾，并具有确认提交的操作控件。

表格状态

基本上，表单需要在用户交互过程中经历三个阶段：

（1）默认状态

用户执行任何操作之前的表单状态。

（2）焦点状态

此状态强调用户填写的区域，帮助用户聚焦并减少重复扫描屏幕所需的时间。

（3）反馈状态

反馈状态是指用户收到反馈时的页面状态（主要是指错误信息反馈）。有时，当用户完成输入框的输入并将焦点移动到下一个输入框时，会出现此状态。当然，如果无法立即验证数据，请等到用户单击“提交”按钮然后提供反馈。

亚马逊创建一个帐户表单，其中包含页面的“默认，焦点，反馈”状态

最佳实践

（1）保持简单

保持您的表单简洁明了，只保留最必要的数据，并避免让用户以验证名称重复输入。例如，不要重复密码字段。相反，让用户看到他们直接输入的密码。

（2）及时使用验证

在为用户提供错误输入时，最好将反馈定位到特定位置。

Facebook和亚马逊使用两种不同的验证反馈方法

（3）组合相似的领域

将类似字段分组并按标准顺序对它们进行排序非常重要。这可以帮助用户减少认知负荷和注意力消耗。

具有相似支付页面的功能区域被适当地分组

（3）将标签对齐左侧

将标签放在输入框上（如上面解析的亚马逊表单）。不要将占位符文本用作输入框的标签。在这种情况下，用户在输入完成后将看不到标签。用户很难对输入内容进行最终检查，这将使他们思考很多。

始终将标签放在输入框上并将其对齐到左侧。有一份全面的研究报告来说明这是一种有效的做法：https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms .php

Flutterwave’ s Rave的登录页面，输入区域的大小与输入字段的预期长度相同。

payporte的输入区域与预期输入字段的长度不匹配

（6）CTA（号召性用语）按钮

表格末尾通常会有一个确认按钮或下一个按钮。在某些情况下，必须有多个按钮。要强调主按钮，请削弱辅助按钮。

亚马逊的主要辅助按钮处理得非常好

当使用模态弹出窗口进行信息收集时（窗体在模态弹出窗口中），辅助按钮有时是关闭按钮。削弱它的另一种方法是使用X图标而不是关闭按钮，如下所示。

Medium的登录模式弹出窗口使用X图标表示关闭按钮

（7）搜索区域

不要隐藏您的搜索框，特别是如果您的代购源码网站上有很多内容，搜索可能是最佳选择。

亚马逊的搜索框特别引人注目

当用户执行搜索操作并显示搜索结果时，不要立即清除搜索框的内容，以便用户可以轻松查看他最初搜索的内容。

在搜索

（8）清除

向用户传达清晰的信息，并向他们提供他们期望的信息，而不是含糊不清。没有人喜欢填写表格，没有人想填写两次。

Cowrywise的标签内容非常清晰，甚至按钮的文字都有很好的描述。

这里的所有示例都不是用于广告，也不是用于违反产品的设计。这仅供学习。

原文地址：https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

原作者：Momoh Silm

译者：孙孟超，互动设计师

翻译地址：https://zhuanlan.zhihu.com/p/35190166?group_id=963899481096404992

本文由@孙梦超发布，未经作者许可，禁止转载。

该地图来自Pexels，基于CC0协议

« 为什么代购源码网站流量会下降？ | Google Algorithm Update Daquan（2000 - 2017） »