从 4 个方面，总结B端表单标签的设计细节

上期回顾：

从 4 个方面，总结 B 端表单的交互设计细节

“虚假的事物可以被随意想象，唯有真实的事物才能被理解。

阅读文章 >

精心设计的表单，能让用户感到心情舒畅，愉快的注册、付款和进行内容创建和管理，这是促成网上商业成功的秘密武器。表单在 B 端和 C 端都有举足轻重的作用，特别是 B 端产品，表单和表格几乎占据了整个产品的 70%。

表单设计相关文章：

超多干货！B 端表单设计的 3 大模式和 4 大使用场景

本篇文章总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。

阅读文章 >

那我们在设计表单的时候有没有需要注意的地方？如果产品或业务方问你为什么这样设计，你应该用什么方式去回答？

为什么学习底层逻辑：

互联网经过了这么多年的发展，现在要说在一些基础的元素上去创新其实很难。首先公司不会给你时间去研究，大环境也不允许，这可能是为什么底层技术都是用的国外的。google 可以用 3 个月时间研究基础组件文本框，这里面除了设计还需要进行大量的测试，来验证设计是合理的、好用的，但是国内很少有公司会给你 3 个月研究一个文本框。

有人会说我只要会用就行了，管它为啥这么设计。如果是这样，在评审的时候就会经常被质疑，为什么要用这个组件，能不能换一个？我觉得可以用开关组件，我觉得可以用单选，那我们到底听谁的，我们还是设计师吗？我们虽然没有这么多时间去研究创新，但在使用的时候还是要知道这些组件的底层原理，这样你才能根据业务场景灵活运用，而不是听别人的，看别人的。

首先看一下表单有哪些设计原则：

设计原则是任何一种解决方案的指路灯。他们体现解决方案应包含的基本目标。

原则 1：尽量减少痛苦，填写过程应该尽量简洁、容易

原则 2：说明填写完成路径，清晰告诉用户如何完成这个目标

原则 3：考虑情境，受众群体、应用、业务

原则 4：确保一致沟通，保证客户与公司只用一种声音说话

带着原则来了解一个问题：

输入框标签应当顶对齐、右对齐还是左对齐？

导致不同对齐的原因：有时候你希望能降低人们速度，使他们有时间进行深思熟虑。也可能受到屏幕显示的限制，要求表单纵向或者横向空间最小化。也可能由于本地化需要，表单要适应不同长度的多种语言。所以标签顶对齐、左对齐或者右对齐的正确答案取决于这些及其他更多因素。

1. 顶对齐

三种标签对齐方式中，顶对齐标签对减少表单填写时间所做的贡献最大。

由于标签和输入框的位置非常靠近，处理起来毫不费力。填写整个表单很快很容易，因为人们一般只需要在一个方向移动：向下。这也为填完表单提供了清晰地完成路径。

顶对齐标签还提供了大量横向空间，可用来扩大或者收缩标签文字，而不会对整个页面布局产生负面影响。这对比长标签或者跨文化的本地化标签特别有用。相同情况下，法语，德语或者荷兰语等语言比英语长，因此很容易破坏表单布局。大量横向空间可用于以多种方式组合相关输入框，这是顶对齐标签的另一优点，由于横向空间减少，左对齐和右对齐标签对这种布局灵活性不足。

但顶对齐标签会占用额外的垂直空间。因此，如果可供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签。 顶对齐标签布局还应当采用合适的垂直间距。 表单输入框之间的垂直空间太少或者太多都会阻碍移动。一般而言，最好使用输入框 50%至 75%的高度作为相邻输入框的间距。

能迅速填完顶对齐标签表单的原因之一，可能是因为眼球只需要在标签和输入框之间进行单一运动。事实上，马泰奥·彭佐从 2006 年 7 月进行的眼动研究发现，从标签移动到输入框只要 50 毫秒，比右对齐标签方式快两倍，后者高达 240 毫秒。

因为完成时间短、完成率高，有些设计师总是推荐使用顶对齐标签，毕竟，花费最少气力填完表单是首要目标，顶对齐标签的速度自然会起作用。 但眼动追踪及现场网站测试采用的都是人们熟悉数据的表单，也就是说，人们普遍了解或者随时可以找到这些信息，比如姓名、地址、信用卡号码或者电子邮件地址，测试结果是否适用于陌生数据，仍有待观察。

2. 右对齐

右对齐标签同样具有输入框与标签相邻的优点，因此也能快速填完。

但右对齐布局造成左侧补齐，会降低快速浏览表单问题的效率。西方人习惯从左往右阅读，他们的眼睛喜欢沿左侧移动。如果标签文字宽度变化，右对齐标签还会产生灵活性的问题。如果标签需要两行文字，流量表单会更加困难，而这种现象相当普遍。

也就是说，如果要尽量减少表单占用的垂直屏幕空间，右对齐标签能提供快读完成时间。 马泰奥·彭佐的眼动研究发现，专家用户和新手扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别为 170 毫秒和 240 毫秒，而填完时间比左对齐标签快两倍。

3. 左对齐

如果人们不熟悉表单要收集的数据，或者问题无法分成易处理的内容组（比如地址各部分），左对齐标签浏览表单问题会更容易，人们只要上上下下阅读标签左栏，不会被输入框打断。

但有些长标签经常会增加标签和输入框之间的距离，因而延长完成时间。人们不得不在栏之间“跳越”，发现输入框和标签之间的正确联系，然后才能输入答案。 与顶对齐标签相比，左对齐标签还有占用较少垂直屏幕空间的优点。不过和右对齐标签一样，标签长度和输入框组合弹性小是其缺点之一。

三种方案中，左对齐表单填写速度最慢，可能因为左对齐表单解析问题时眼球定位次数较多。人们一般都能将左对齐布局中的标签与相应输入框联系起来，只是花费时间较长。根据马泰奥·彭佐的研究，“典型扫视时间为 500 毫秒”，很长，说明用户经历着沉重的认知压力。

另外 2 种较少使用的标签：

1. 输入框标签

如果屏幕空间宝贵，可以使用输入框内标签，这种做法减少了一半表单需要的屏幕空间。目前常用场景主要是在一些登录、注册、申请试用等简单的表单中使用，在主要内容中比较少见。

2. 混合对齐

虽然目前没有数据表明采用混合标签会有问题，而经验又告诉我们情境常常比一致性更重要。 但同一产品采用不同表单布局时一定要谨慎，除非有合适理由。否则采用单一布局是最安全的，也能兼顾一致性问题。

总结

表单标签应当使用自然的简洁语言，大小写一致，所提问题应当尽量直观，容易理解 如果要减少填写时间，或者出于本地化原因，标签长度需要灵活多变，可采用定对齐标签 如果与上述目标类似，但垂直屏幕空间有限，可采用右对齐标签 如要求用户浏览表单标签，知道必填问题或者回答多个问题中的若干特定问题，可采用左对齐标签 如果表单非常短，屏幕空间极度有限，可采用输入框内标签，同时应当确保合适的交互和情境 确保清晰区分标签和数据，特别是对于输入框内标签 如果考虑在同一应用工具的不同表单采用不同标签对齐方式，应当平衡情境和一致性 单一表格中采用不同标签对齐方式会破坏明确完成路径，人们会觉得迷惑

最后再给大家讲一个故事：

有一天，齐桓公正在读书，被一个叫扁的工匠看到了．扁问：“大王，您读的是什么书？”桓公说：“这是圣人的书。”扁说：“如此说来，大王您读的只不过是圣人的糟粕而已。”齐桓公一听，气坏了，说：“你一个工匠，从来不读书，你知道什么？”扁不慌不忙地回答：“我是在做轮子的过程中感受到的．如果做轮子时轮轴做得太松，轮子就太过光滑不够坚固；如果太紧就会导致轮子转动困难；只有不松不紧的时候，才刚好合适．但不松不紧的感觉我却无法通过语言描述，只能在反复练习中去领悟。照此看来，您所读的书，不也就是圣人的糟粕吗？” 未完待续…