关于Web表单设计，需要注意的8个要点

常见的表单设计背后藏着许多秘密，如何让用户快速准确的填写表单，是本文在思考解决的问题。本文偏理论和实践结果，实例较少，供大家参考和学习。

常见问题：

在设计表单时，你是否会有如下疑问或思考：

一、表单设计原则尽量减少痛苦，填写过程尽量简洁容易；说明完整填写路径，清晰地告诉人们如何填写完成考虑情景，受众群体、应用、业务确保一致沟通，保证客户与公司只用一种声音说话二、表单的组织三、标签对齐

每个表单至少都有三个基本要素：标签、输入框和动作。

标签负责提出问题，输入框供给人们填写信息，而动作允许人们提交答案，还有一类——无标签表单。

1. 顶对齐标签

顶对齐标签由于输入框和标签的位置非常近，处理起来毫不费力，所以填写整个表单很快很容易，是最能减少填写时间的方式。

顶对齐标签还提供了大量的横向空间，可以扩大或收缩标签文字，而不会对整个页面的布局产生负面影响。大量横向空间可用于以多种方式组合相关输入框。

但是，顶对齐标签也会占用额外的垂直空间，若可使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签。

顶对齐标签还应当采用合适的垂直间距。表单输入框之间的间距太少或太多都会阻碍移动。一般而言，最好使用输入框50%~75%的高度作为相邻输入框的间距。

2. 右对齐标签

右对齐标签同样有输入框与标签相邻的有点，因此也能快速填完且减少垂直屏幕空间的占用，但是速度没有顶对齐快。

由于右对齐布局造成左侧参差不齐，会降低快速浏览表单问题的效率，还会产生灵活性问题，如果标签需要两行字，浏览表单会更加困难。

3. 左对齐标签

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

三种方案中，左对齐表单填写速度最慢，人们一般将左对齐布局中的标签与相应输入框联系起来，只是花费时间较长。

但是，完成时间较长也不是坏事，也有适用场景。如果希望人们速度放慢，并仔细思考表单中的每个输入框，特别是表单含有大量可选输入框、类似“使用偏好”或者高级设置陌生数据时。

4. 输入框内的标签

如果屏幕空间宝贵，应当将标签和输入框组合成单一的用户界面元素。光标放入输入框时，标签要迅速消失，以便用户能轻松填写。

填写输入框时，输入框内的标签会消失，因此答案情境也会消失；如果忘记了要回答什么问题或者检查答案时，体验也是不好的。

因此，如果表单较长、甚至中等长度，输入框内标签并不是好的解决方案。输入框内标签更适合用于只有一个问题（例如，搜索框）或者几个输入框的表单或者问题非常熟悉的表单（例如PHP表单验证，通讯录）

四、输入框

表单中何时使用文本框、复选框、单选按钮、下拉菜单、列表框呢？

五、动作

标签列出表单要求人们回答的问题，输入框让人们填写答案，完成表单的单一职责属于动作。

六、帮助文字

常见帮助文字是在标签或输入框旁增加帮助文字，告诉应该如何回答问题。

帮助文字最合适解释人们不熟悉的数据，例如，为什么要问这些问题、安全和隐私、建议回答问题的方式及说明可填项。

七、即时验证

直接反馈有助于再次确保人们的回答有效。这种实时的沟通方式即为即时校验（Inline Validation）。

八、多余输入/额外输入总结

表单的设计方式多种多样，不能完全按照设计规则来进行产品设计，需要具体分析应用场景，填写情境来设计。

感谢各位花费时间来阅读，希望对您有帮助！

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!