表单不知道该怎么设计？看这篇《表单设计指南》

　　用户可能不愿意填写表格，所以尽可能简单，微小的变化都有可能极大的提高用户体验。

　　目录

推荐阅读：别人的UI表单为什么设计这么漂亮?

　　表单组成

　　表单结构

　　输入字段

　　标签

　　按钮

　　验证

　　会话界面：设计表单的新方式

　　总结

　　概要

　　用户使用应用或网站都有一个目的。通常，用户实现目标的的方式之一就是表单。 表单仍然是用户在网页和应用中最重要的交互类型之一。大多数情况下，表单往往是完成目标的最后一步。用户应该能够快速完成表单。

　　在本文中，您将看到从可用性测试、试验测试、眼动追踪研究以及用户的投诉中获得的实用技巧。这些技巧被正确使用时，能够产生更简单，更高效的表单体验。在文章的最后，还将找介绍一种设计表单的新方法。

　　1. 表单组成

　　常见的表单有以下五个部分：

　　结构：这包括字段顺序，表单在页面上的显示以及多个字段之间的逻辑关系。

　　输入字段：这些字段包括文本字段，密码字段，复选框，单选按钮，滑块和任何其他用于输入的字段。

　　文本标签：告诉用户相应的输入字段的含义。

　　动作按钮：当用户按下该按钮时，执行动作。

　　反馈：通过反馈使用户了解他们的输入结果。 大多数应用和网站使用纯文本作为反馈的形式。

　　表单也可能包含以下内容：

　　辅助信息：解释如何填写表单。

　　验证：自动检查用户的数据是否有效。

　　本文将介绍表单结构、输入字段、标签、按钮和验证的许多方面。

　　2. 表单结构

　　表单是一种对话。 就像对话一样，它应该由两方之间的逻辑通信组成：用户和应用。

　　只保留必要的字段

　　确保只有真正需要的字段。添加到表单的每个额外字段都会影响转换率。要一直思考为什么要向用户请求这些信息以及将会如何使用它。

　　按照逻辑顺序排列

　　从用户的角度而不是从应用或数据库的角度来提问。比如，在他们的名字之前询问某人的地址是不合理的。

　　聚合相关字段

　　将相关字段分组集合。从一组问题到下一组问题的方式更像对话。 将相关字段分组在一起也能帮助用户理解需要填写的信息。比较下面的两种信息表单的方式。

　　聚合相关字段 (Image: Nielsen Norman Group)

　　一列还是多列?

　　多列展示表单字段的问题之一，就是用户填写字段的顺序可能会偏离预期。如果一个表单多列字段，那么用户必须以Z模式进行扫描，从而降低了理解的速度并使完成的路径混乱。但是，如果在一个列中，则完成的路径是明确的一条直线。

　　在左边，有许多方式解释表单字段之间的关系，而在右侧是明确的直线。

　　3.输入字段

　　输入字段是使用户填写的字段，比如文本字段、密码字段、下拉菜单、复选框、单选框、日期选择器等等。

　　字段数量

　　表单设计中的一个经验法就是，越短越好。这当然看起来很直观：降低用户的成本，提高转换率。因此，尽可能减少字段的数量。 这会让你的表单感觉更简单，特别是当你需要用户填写大量的信息时。但是，不要过头。 在给定的时间只显示五到七个输入字段是常见的做法。

　　在一个容易填写的字段中聚合多个字段，如地址 (Image: Luke Wroblewski)

　　必填还是选填?

　　尽量避免表单中的选填字段。但是如果要使用它们，一定要清楚地区分哪些输入字段是必填的。一般对必填字段使用星号(*)。 如果您决定在必填字段中使用星号，请在表单页面显示一个提示，说明星号的用途，因为不是每个人都明白它的含义。

　　MailChimp邮件列表的订阅表单。

　　设置默认值

　　避免设置默认值，除非您认为大部分用户将选择该值，尤其是必填字段。为什么?

　　因为你可能会增加错误。用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。

如何建站：

建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了