|B端产品中，Web端表单如何设计

编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的精确性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。

本文插图

一、表单的定义
表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。
二、表单的设计原则
设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。
针对互联网表单设计，我倡导的原则如下：

尽量减少痛苦；
说明填写完成路径；
考虑情境；
确保一直沟通。

三、表单的结构
我们先看看表单的结构，表单主要由5部分组成：

标题：这个元素帮助用户引导完成表单填写的整个过程，尤其在你对信息进行分组方便用户填写时，特别有用。
标签：告诉用户相对应的输入字段的含义。
输入域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
提示信息：包含帮助信息、占位符和反馈信息提示。
操作按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

本文插图

四、表单的表现形式
1. 标签
标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

本文插图

每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。
1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。

本文插图

顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。

优点：有最快的浏览和处理速度，同时标签长度弹性大。
缺点：非常占纵向空间。

2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。
浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。
左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。
此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。