【第 3326 期】如何设计用户友好型表单_AI阅读总结 — 包阅AI

前言

阐述了设计用户友好型表单的重要性和具体方法。今日前端早读课文章由 @飘飘翻译分享。

正文从这开始～～

在您的生活中，你很可能曾经使用过在线表单 — 无论是通过 iOS 或 Android 设备上的移动应用程序，还是通过台式机，甚至是传统的纸笔格式。

【第2969期】FormRender 2.0 开箱即用表单方案

表单由多个不同的字段组成，每个字段都附有标签和说明文本，需要填写相关数据。表单用于以合乎逻辑和有意义的方式收集关键数据，从而促进相关各方之间的顺畅沟通。

表单无处不在。从食品配送到旅行预订或活动注册，它们无缝地融入我们每天依赖的服务和产品中。无论你是拥有一家网上商店、经营一家航空公司，还是仅仅想收集客户反馈，您的主要目标都是帮助他们点击 “提交” 或 “立即购买”。

通过创建一个易于使用和理解的表单，你不仅简化了用户的旅程，也为自己的成功奠定了基础。用户友好型表单更易于浏览和填写，从而为用户带来更顺畅、更满意的体验。用户的满意度可以转化为更高的完成率和转化率，这对任何企业的发展都是非常有利的。

【第3317期】2个提升页面体验的小贴士

设计用户体验表单

在设计表单时，必须考虑到许多因素，这使得设计更加具有挑战性。在某些情况下，我们需要长时间吸引用户的注意力，这可能会让用户不知所措。为了使用户使用起来更加方便，建议在可能的情况下使用快捷方式。其中一种方法是允许用户通过链接现有账户（如 Google 或 Apple ID）来创建新账户。

还有许多其他方法可以让用户体验快速而简单。以下 10 种技巧将帮助你设计出易于使用的用户体验表单。

1、字段输入类型

使用不同的输入字段，帮助用户了解他们需要提供哪些信息（出生日期、手机号码等）。这将有助于正确收集所有信息，并创建一个具有相关信息的有组织数据库。如下图所示，最好提供选择框，让用户可以从可用选项中进行选择，或接受有关数据类型和格式的指导。这样可以更容易地收集数据，从而减少出错的可能性。

另一个例子是预测性搜索，它会根据用户的输入显示结果。当用户开始在输入框中输入内容时，会出现一个可用选项列表，这可以加快用户的操作速度，并确保您从所有用户那里收集到一致的数据。

2、对齐段落

将各个部分对齐看起来似乎是一个微不足道的细节，但在实际上，它能产生巨大的影响。这样做的目的是将所有信息按同一个方向排列，使表格更容易阅读。

用户更有可能以垂直的方式查看您的信息，因为这种方式更快、更高效地了解所有信息。考虑到这一点，理想情况下，您希望将表单的字段名称设置为垂直排列，这将使其更易于访问，并有助于限制数据收集过程中可能出现的错误。

3、组字段

有时候，表单可能会很长且复杂，因此最好将信息分组，每组包含标题、副标题或描述，以简化用户的操作。通过将信息分块，用户可以快速将每种类型的信息联系起来。

【第2063期】如何进行表单体验优化-中台系统

将主要信息放置在垂直位置，可以在左侧区域添加任何额外的信息或说明。采用这种方法时，请确保在每个区域之间留出空间，以便用户可以轻松区分它们。

4. 书写清晰的标签

标签应简单易懂，以便用户快速了解每个字段需要输入哪些信息。对于简单的字段，使用简单的标签，并尽可能减少每个标签的字数。下面是一个简单的例子：使用 “全名” 标签，而不是 “我的名字是”。

5. 增加视觉提示

在表单中融入视觉提示是提升用户体验的另一种方式。应同时使用文字说明与任何视觉提示，以使表单更具吸引力、更易访问且更便于使用。

6. 明确可选与必填字段

在设计表单时，我们通常会包含可选和必填字段。通常，我们会通过在字段前添加一个星号 (*) 来指定必填字段。尽管我们仍然会看到这种方法的应用，但越来越多的人开始采用一种不同的方法，即用文字而不是符号来指示可选字段。表格应该只收集最重要的信息，并包含少量可选字段。这样可以使人们更容易理解信息，而不会被过多的信息所淹没。

这种方法提供了一种更直观的方法，尤其适用于内容较多、较复杂的表格。

7.CTA 转换

因为填写表单的目的是让用户完成并提交表单，所以必须精心设计提交按钮。那么，我们该如何让用户点击 “提交” 按钮呢？按钮的设计、颜色、位置以及 “提交”（CTA）文字是需要我们特别关注的关键元素。

要记住的一件重要事情是突出我们希望用户点击的按钮。通过创建一个轮廓并使用醒目的颜色，我们可以引导用户点击操作按钮。如下面的例子所示，一个清晰的按钮将为用户提供明确的操作。

8. 撰写清晰的 CTA

一个清晰明确的行动号召是必不可少的，因此必须明确表达。下面的例子中 “添加到购物车” 按钮表明该产品将被添加到购物车中。

这个号召性用语会给出明确的方向，让用户可以继续他们的体验。

9. 验证和错误处理

在提交表单之前，会进行验证，这意味着必须填写所需的字段，并且输入值必须具有正确的格式。如果出现错误或缺失的情况，将会显示错误消息，帮助用户满足要求。

表单中可能会出现三种类型错误信息：

值得注意的是，屏幕阅读器可以读取错误列表，从而使您的网站具有可访问性。通过所有检查后，即可成功提交表单。

10、颜色

颜色不仅能让你的表单看起来更美观、更具吸引人，还能让用户更轻松快速浏览每个部分的内容。

不同的颜色可用于不同的目的。如前所述，红色通常用于表示表单中的任何错误，而浅灰色则可用于表示我们不允许更改的任何禁用字段（见下面的示例）。整个表单背景也可以使用柔和的色调，帮助用户识别每个空字段。然后可以使用突出的对比色，让用户注意到 “继续付款”、”提交” 或 “确定” 等操作按钮。

最后的想法

简单直观的表单往往会有更高的点击率，从而带来更高的完成率。这对于专注于在线购买和账户注册的企业尤为重要。实施用户友好型表单可以让企业最大限度地减少错误，提高所收集数据的质量。创建用户友好型表单可以简化整个提交流程，并提供用户体验，从而鼓励客户再次访问您的服务。

关于本文
译者：@飘飘
作者：@YLD
原文：https://medium.com/yld-blog/how-to-design-user-friendly-forms-f71b37ec959e

这期前端早读课
对你有帮助，帮”赞“一下，
期待下一期，帮”在看” 一下 。