网站建设中四个必须遵循的表单设计原则发布者：本站     时间：2022-05-07 09:05:30

在网上，我们无时无刻都在使用表单（Form），在网上购物、邮件注册、参与评论等等。不夸张的说，它已经成为了数字信息时代不可分割的一份子。然而，这么多年伴随着一些改进我们发现，表单设计在我们的使用感受中也仅仅停留在“还可以”的程度。不过，现在我们可以使用新的方法设计出更好、更便捷的表单体验。

 

p.s.我们简单说说表单中含有哪些元素：

 

四个必须遵循的表单设计原则

 

标签（Label）告诉用户该表单需要填写什么类型的信息，通常放置在表单文本框之外。

表单字段（Form field）则是用来收集用户输入的信息，在我们平常使用的表单之中，每个字段包含着某一类型的信息（如姓名、性别等）。

占位符文本（Placeholder text），又叫提示文本，位于表单文本框里面，一般用于提示用户填写。在大多数的做法中，当用户开始输入，这些提示文本会自动消失。

 

一条经典的表单设计原则是表单越短越好。这条法则看上去似乎有理有据，但是它却没给我们带来预期高的用户转化率。这条指导原则错就错在没有考虑其他因素，如用户输入，它们该如何设计、如何影响表单的体验。

 

举个例子，在我的研究中发现这篇文章被设计师们引用的次数远远超过其他文章，被大多数人奉为经典，想想就可怕。这篇文章来源于Imaginary Landscape(一个开源的网络开发社区)将近10年前的一次报告，文章里面提到如果将一个11个字段的表单减少至4个字段，那么转化率就会提升160%。但这份报告只给出了一个页面、二个变量和一次测试的结果，他们没有做更多的测试，比如对比不同的4个字段表单之间的测试结果，对比10和11个字段以及5和4个字段表单之间不同的结果，所以这份报告存在很明显的漏洞，根本不能令人信服。

 

来自Michael Aagaard在Call To Action 2015分享的一个与上面类似的案例。案例中，他负责提升某表单的用户转化率。他一开始的做法是将原本表单的字段从9个减少至6个，但是转化率没有提升反而降了14%。后来经过研究，他发现原本表单中最吸引用户注意的恰好是被删除的字段，结果显而易见，表单对用户的吸引力变弱了。发现问题后，Michael Aagaard进行了第二次测试，他在保持9个字段不变动的情况下调整了表单的结构使之更清晰，结果转化率提升了19%。事实证明，减少表单字段不一定能提升用户转化率。

 

所以，我们该如何设计出好的表单？这里有一些新的设计原则也许适用：

1.优先考虑用户浏览方式

2.能够轻松填写的格式

3.限制输入

4.利用定位

 

（1）优先考虑用户浏览方式：

来自Jakob Nielsen很早之前的研究：用户浏览网页是通过眼睛快速扫描的方式浏览，而不是从上往下逐字地阅读。即使是在填写表单上面，用户也是如此。考虑到表单输入的效率，用户有效的扫描网页对于减少错误或错失字段的情况至关重要，尤其是当表单只能填写（提交）一次的时候（电商地址填写，注册帐号等等）。

 

表单标签的位置

虽然已经有了大量关于表单标签位置的研究，但仍然存有争议。表单方面的专家Luke Wroblewski有一篇研究明确了表单标签采取顶部对齐的方式能让用户更快完成浏览，原因是这种对齐方式对眼球移动的需求比其他对齐方式要更少。其中采用右对齐方式标签的表单浏览时间仅次于顶部对齐标签的表单，如果你的网页高度有限的话推荐这种对齐方式。采用左对齐标签方式的表单是三者之中浏览时间最长的，但是，这种对齐方式能够在你想要用户放慢速度阅读，仔细考虑的时候使用（如一些重要的输入）。

 

四个必须遵循的表单设计原则

 

提示

占位符文本（又叫提示文本）。关于提示文本，一般来说它对用户来说弊大于利。其中包括把标签作为占位符文本来使用的情况，这样的话当我们在表单里面添加内容的时候，提示文本会自动消失。这种做法虽然可以让用户不再看到提示文本，但是这很容易造成用户短期记忆的压力以及增加犯错的机会。

 

即使标签不作为提示文本，另外添加一个提示文本。用户这种扫描式的浏览很容易造成框内已经被输入了文字的误会。来自NN Group的研究，研究中表明了空字段对比有文字的字段更吸引用户注意，以及用户更多的会跳过那些有提示文本的字段。换句话说，被认为对用户有利的提示文本其实对用户来说弊大于利，尤其会对用户浏览网页方面造成困难。