web表单设计

时间：2023-10-04 21:18:02 | 来源：网站运营

时间：2023-10-04 21:18:02 来源：网站运营

web表单设计：表单是横在企业和用户之间的一道阻碍，没有人喜欢表单，但是表单却是系统获取用户数据的重要手段，所以，让用户快速并轻松地完成表单是设计表单的基础要求。

好的表单设计可以大幅度提升用户数据转化率，给企业带来巨大的利润，是“由内而外”设计出来的。要让用户在填完表单后知道他们获得了什么，也就是要做到系统与用户之间的平衡。

要做到平衡，在内容的选择上要达到无论增加还是减少都会给用户带来疑惑的程度。比如：当用户在网上购物，自始至终都没有填写过自己的收货地址，那就会给用户带来疑惑，用户会想，他们怎么拿到刚刚买的东西。所以收货地址是必不可少的表单信息，只是获取用户地址的时间节点需要多考虑一下了。

在设计表单的时候，除了满足以上条件外，我们还需要保证表单能传达给用户清晰的完成路径信息。比如：表单的动作按钮始终保持可见。

总结一下，在设计表单时，大体我们要遵循以下3个原则：

1. 减少痛苦，保持表单简洁容易

2. 清晰的完成路径

3. 平衡用户和系统的需求

接下来详细介绍一下表单详细内容的设计。

一、 选内容

在选择表单的内容时，我们要反复推敲每一个问题是否都是必不可少的？那些问题能不能通过自动获取？能不能换个时间节点或者场景询问用户（用户需要的时候）？

二、 表单结构与元素规范

l 名称和动作按钮保持一致

l 浏览线清晰、简单、顺畅（对于表单来说，标签、输入框、动作按钮构成垂直轴，形成单一的路径，可以有效提高用户的填表速度）

l 保证用户注意力集中

l 当分为多个页面展示时，要有对应的进度提示

l 用tab键控制光标有序在各输入框间移动

三、 标签对齐

1. 顶对齐

l 优点：处理速度快（比左对齐快接近10倍，比右对齐快接近2倍）；标签与输入框距离接近，相关性强；视觉流单一（垂直向下）；节省横向空间，适用于标签较长或输入内容较长的情况。

l 缺点：占用大量的垂直空间

l 注意：相邻输入框的间距最好设置在输入框高度的45%~75%

2. 右对齐

l 优点：标签和输入框邻近，处理速度较快（比左对齐快2倍左右）；节省了纵向空间。

l 缺点：左侧不齐，当用户有只浏览标签的需求时，浏览速度较慢；左侧标签的灵活度不够（当标签很长折行显示时，会加大填写表单的速度）

3. 左对齐

l 优点：快速浏览标签（当表单包含不等的必填项和选填项时适用）；节省纵向空间；适用于不常见标签或需要用户提供准确数据的标签。

l 缺点：标签和输入框间距较大，增加了用户填写表单的困难度。

4. 输入框内标签

l 优点：节省了大量空间，适用于只有一两个输入框的情况

l 缺点：用户输入数据时，标签就会消失；不适用中/厂表单

四、 输入框

l 当需要输入框对输入内容进行暗示时，需要采用适宜的长度，否则保持长度一致

l 根据输入内容选择合适的输入框类型

l 根据需求适当利用弹性输入框

五、 动作按钮

l 保证主动作始终可见

l 尽量避免出现次动作

l 动作按钮的文案要与表单的目标一致

l 慎用元素的属性变化

l 给予用户及时的反馈，避免重复点击等操作

l 保证动作按钮的位置与表单的整体视觉流一致，如下所示：

要注意的是，当变化取消按钮的属性时（形状或颜色），测试结果显示（Luke Wroblewski和他的团队做的基于23人测试的实验），用户完成表单的速度不如没有差异的快，虽然被测试人员都提出了增加主动做与次动作的差异的优化意见。