B端设计中15个实用的表单技巧

B端设计中表单是任何用户界面不可或缺的一部分，它们在企业和用户之间建立了一个的桥梁。

它们的重要性是毋庸置疑的，但是大家在设计的时候仍然会有犯有灾难性错误的情况。一个糟糕的表单会破坏你的

转化率，惹恼用户，给客户造成不好的体验。

这就是为什么我想分享这15个实用的技巧来教你如何构建尊重终端用户和提高转化率的可用表单！

标签对于你的表单是非常重要的！适当的添加标签并让它们始终可见是至关重要的。没有什么比猜测输入字段的内

容更烦人的了。

在许多情况下，设计师会在输入字段完成时隐藏标签。但这会给那些不能轻松验证输入的用户带来困惑。

当设计师将字段放在网格中时，你强制用户遵循 Z 模式，这是不可取的，因为它可能会使用户感到困惑。

当表单字段在垂直线上时，用户可以快速垂直地浏览表单，这样他们就更容易完成任务（例如：填写表单）。

Z 字型：设计跟踪人眼从左到右、从上到下阅读时的行进路线。就像字母 z。

作为上一个技巧的拓展，放置在输入字段左侧的标签创建了一个类似的 z 模式，导致了一个不太可扫描的形式。

最好将标签放在表单字段之上，以帮助用户轻松地扫描表单。但是，如果表单非常少(少于1-2个字段) ，那么将标

签放在字段的左侧可能不会产生显著差异。

如果最终使用了表单左侧的标签，请确保标签的文本是右对齐的。这使用户更容易扫描页面，并为表单创建对称的

视觉层次结构。

长的表单会阻碍用户填写表单，这会降低你或你的产品的转化率。一个快速的可视化方法可以使它们更有吸引力，

并且不那么累人，那就是将相关的字段分组在一起。为了提高可用性，甚至可以在每个子节中放置一个 CTA“保

存”按钮，以允许用户分别保存输入。

当用户填写表单时，他们一个接一个地完成每个字段，然后期望提交表单。这是典型的用户路径。

尊重这个用户路径，并将 CTA 按钮放在表单结束处附近。这是一个在 UI & UX 设计中应用 Fitts 定律的典型例子。

该定律指出，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。

无论在何时，留白永远是你最好的设计伙伴！在字段之间留出足够的空间，使您的形式更加美观。大多数用户会避

免使用过于密集的表单。

在设计中，我们总是避免重复相同的信息和数据。特别是对于表单，您需要小心并省略有关该字段的不必要信

息。例如：如果你有 2个必填字段和 1 个可选字段，仅通知用户有关可选字段的信息。如果你有 2 个可选字段和

1 个必填字段。反其道而行之！ 

错误提示！这很常见，用户也知道这一点。但是他们希望了解错误存在的原因以及如何修复它。始终用深入的细节

描述错误的来源，并帮助人们克服它们。

为您的表单字段选择正确的 UI 元素至关重要！有时你可能不清楚选择哪个元素。特别是当你在下拉按钮和单选按

钮之间时，一个常见的经验法则是当您有 3 个以上的选项时使用下拉列表。对于较少的选项，请使用单选按钮，

允许用户提前查看所有选项。

占位符文本是在表单中引导人们的好方法。显示示例值以向他们演示该字段的预期格式。通用占位符文本，不会为

最终用户增加任何类型的价值。

不要用多个 CTA 按钮干扰用户！保持简单并使用单个 CTA。如果您需要更多 CTA 按钮，请始终尝试将它们合并

为辅助按钮。不如你的主要 CTA 突出。

文案可以在设计和可用性方面创造奇迹。对于表单提交按钮，请避免使用诸如提交、发送、下一步、继续之类的

词。使用可操作的词来突出即将发生的动作。一些例子：

• 对于注册表单：“创建您的帐户”

• 对于候补表：“加入 1000 多个开发人员”

• 对于反馈表：“向我们发送您的反馈”

不要对所有内容都使用文本字段！使字段的类型适应其内容。有许多内容类型具有特定要求并需要特殊处理。

一些例子：

• 电话号码

• 信用卡

• 网站网址

• 国家

• 日期

• 颜色

大多数领域都有某种限制。字符限制、号码/日期范围、电话号码等。让用户事先了解限制，以防止他们感到沮

丧。

参考文献：

https://medium.muz.li/15-tips-for-better-ui-forms-744febd107f9