基础知识：移动表单设计

你将会学到

了解为移动设备设计注册表单的 6 个基本原则。 为什么移动表单设计很重要？

在线购物者越来越多地使用移动设备来发现新商店、浏览产品和进行购买。仅在美国，就有超过 35% 的在线购物使用移动设备，而且这个数字每年都在持续增长。为了确保将这些客户转化为订阅者，您的注册表单在移动设备上的外观与在桌面设备上的外观一样重要，这一点至关重要。

移动表单设计的 6 个基础知识

1. 保持表格简明扼要
2. 构建表单以满足用户期望
3. 帮助用户浏览您的表单
4. 选择在移动设备上运行良好的内容块
5. 让您的表单在移动设备上易于打开、阅读和填写
6. 考虑你的颜色及其对比度

保持表格简洁明了

对于移动表单来说，少即是多。虽然一次性了解订阅者的所有信息（姓名、电子邮件、生日等）可能很诱人，但较长的移动表单可能会导致完成率较低。尽可能限制需要填写的表单元素或字段的数量。 – 建议输入字段数量：每页 1-3 个

• 建议号召性用语按钮数量：每页 1-2 个

如果我需要超过 3 个字段怎么办？

如果您需要 3 个以上字段，例如您想同时收集电子邮件和短信同意，请考虑使用多步骤表单。多步骤表单允许您收集更多信息，而不会压倒潜在订阅者。另外，在一张表格中收集多种类型的同意时，为短信设置单独的步骤是一种合规性最佳实践。或者，您可以通过稍后在客户旅程中重新定位订阅者来了解有关订阅者的更多信息。也许您可以在 30 天后向当前订阅者展示另一张表格来询问他们的生日，或者您可以将其作为欢迎系列的一部分进行询问。

构建表单以满足用户期望

人们期望表单遵循一定的逻辑，如果表单不遵循一定的逻辑，可能会令人沮丧（或者只是奇怪）。以下是构建移动表单的提示。 先询问较少的个人信息

即使表格上的所有字段都是必需的，在某人的名字之前询问其生日仍然很奇怪。一般来说，按照从最不私密到最私密的顺序询问信息。例如：

1. 姓名
2. 电子邮件或电话号码
3. 生日

在移动设备上使用单列结构

单列意味着所有输入、字段和按钮都遵循表单中的一行。虽然多列格式适合在桌面上使用，但它们会使移动表单看起来混乱或拥挤。单栏表单也更容易在移动设备上扫描。 | | |

|

|

将号召性用语 (CTA) 按钮放置在表单底部

CTA 按钮应该位于观看者扫描旅程的末尾，因此这是他们最后看到的东西。您不希望他们必须向上滚动才能完成表单，或者必须搜索按钮。通常，CTA 按钮位于中间或左侧。 将关闭按钮放在右上角

关闭按钮需要位于右上角的原因很简单，因为这是用户期望看到它的地方。如果您将其放置在其他位置，例如左上角或底部附近，您的用户可能会花时间寻找关闭表单的方法，并在查看时感到沮丧。这可能会导致他们对您的品牌留下负面印象，这意味着他们将来不太可能访问您的网站或成为客户。

帮助用户浏览您的表单

对于移动设备，您希望尽可能清楚地了解某人需要做什么、应该如何做以及他们已经做了什么。 将简洁的标签放在每个字段上方（并靠近）

在表单中每个字段的正上方放置一个标签，清楚地描述他们应该提供哪些信息。 另外，将标签放在它们所描述的字段附近，这样就可以清楚地看出两者是在一起的。在任何移动设备上查看时，每个标签应占用不到一行，因此简洁是关键。 在每个文本输入字段中使用占位符

在用户需要输入文本或数字的每个字段中，包括占位符以向受众展示他们的输入应该是什么样子（例如，示例电子邮件、姓名、日期格式等）。这有助于减少某人可能犯的错误数量。与标签和占位符一起使用可以让用户轻松浏览表单。 使用按钮的描述性号召性用语

专业提示：按钮也应该有标签。在按钮文本中提供更多描述性也对用户有所帮助。例如，不是简单的“提交”号召性用语，而是说“订阅时事通讯”或“注册短信”可以更清楚地了解按钮的功能。另外，这可以帮助您以较小的形式节省宝贵的空间。 指出哪些字段是必填的，哪些字段是可选的

告诉您的客户必须填写哪些字段以及不需要填写哪些字段，可以简化用户体验。您可以将某些表单元素设为必需，将其他元素设为可选，

包含成功消息

在有人提交表单后添加成功消息，以便用户知道他们已成功。

选择在移动设备上运行良好的内容块

某些类型的表单块比其他类型的表单块更适合移动设备。下面，我们列出了在移动设备上可以使用的内容和不可以使用的内容。 | | |

让您的表单在移动设备上易于打开、阅读和填写

一般来说，您的表单应该易于在移动设备上使用。人们不需要费力地阅读文本或单击特定按钮。如果发生这种情况，他们可能会感到沮丧，并可能完全放弃该表单或您的网站。为移动设备进行设计时有几种最佳实践。 字体大小至少为 16 像素

使用 16 或更多像素的字体大小有助于确保文本清晰易读。这样，用户就不需要放大来阅读。 16 像素是建议移动表单中任何文本（包括标签、占位符和按钮文本）的最小字体大小。 在字段、按钮等之间添加至少 8 个像素的空间

在表单中的各个操作之间留出足够的空间，以便用户无需费力地单击他们想要的字段。否则，他们可能会决定离开而不是继续尝试。当您构建表单时，请尽量让用户不易犯错误。测试不同类型设备上的用户体验。 使触摸目标至少为 48 像素

任何“触摸目标”，例如输入字段或按钮，都应该很大并且易于点击。成人手指的平均长度为 11 毫米，约为 41.6 像素。考虑到这一点，最佳实践是将触摸目标设置为至少 48 像素。 使用表格预告

使用表单预告片，以便移动访问者在浏览时可以根据需要打开和关闭表单，这样表单就不会掩盖您网站的内容。请注意，Google 对带有侵入性插页式广告的网站进行处罚。预告片有助于避免这种惩罚，但您还应该对表单使用较长的时间延迟。

考虑你的颜色和它们的对比度

您始终希望表单颜色与您的品牌相匹配，以便它反映您的品牌。然而，让所有用户都能使用颜色组合也同样重要。否则，您可能会疏远潜在的订户或客户。选择颜色时，有两个关键考虑因素。 选择高对比度的颜色

颜色对比度是前景和背景中的文本或对象之间的光线差异。良好的颜色对比度可以提高表单的可读性，并且它是可访问性的关键组成部分。使用颜色对比度检查器 检查颜色对比度。 最小对比度为 1:1，无法阅读（想象一下白色背景上的白色文本）。可用的最高对比度为 21:1，即白底黑字。换句话说，比率越大，对比度越好。根据网页内容可访问性指南 (WCAG)，小文本、图像和图像中文本的最小颜色对比度为 4.5:1，大文本或重要元素的最小颜色对比度为 3:1。理想情况下，对比度应该更大。根据 WCAG 的说法，更好的最小值是：

• 7:1 适用于较小的文本、图像或文本图像
• 4.5:1 适用于较大的文本、关键视觉元素等。选择色盲友好的颜色

让每个人都能欣赏您辛勤工作的内容非常重要。使用某些颜色组合可能会使某些群体难以甚至无法阅读表格。 | | | | |

|蓝色和黄色|

|橙色和黄色 |

| | |

至于不使用哪些，请记住，色盲有很多种类型（不仅仅是红色和绿色）。 | | | | |

|蓝色和紫色|

|蓝色和灰色|

|紫色和红色|

|蓝绿色和粉色 |

|蓝绿色和灰色|

|黄色和粉色|

|粉色和灰色|

|灰色和棕色|

|橙色和棕色 |

| | |

其他资源

• Klaviyo 注册表单入门
• 创建点击文本表单以收集短信同意
• 如何创建 ADA 友好注册表单