网页表单你设计对了吗？（每人只能选一次）

IT行业学习视频供您观看！

（每人只能选择一次~）

91.2%的童鞋都去了

当设计问题特定于网页表单设计时，原则是什么？ 您是否正确设计了 Web 表单？

我们先看一个例子。 下图是美国航空安全委员会网站的投诉页面。 奇怪的是，我们只能找到两个按钮：“预览”和“清除表单”。 事实上，“提交”按钮单独位于表单下方，但这显然不符合我们正常的逻辑。 我们一般习惯于右下角的“提交”按钮。 因此，用户在网页上发表投诉时，经常会不小心清除内容。 不管这样的设计是有意还是无意，确实减少了用户的投诉。

良好的表单设计可以让用户更快、更准确地完成表单。 研究表明，当表单设计遵循基本可用性原则时，用户准确填写表单所需的时间几乎是填写不遵循可用性原则的表单时的两倍。

那么什么样的形式才是好的设计呢？ 这可能与表格长度、表格内容、需要收集的数据等多种因素有关，在实际设计中，必须根据具体情况进行分析。 但以下基本可用性原则可以帮助您避免许多问题。

1. 保持简短

这个原则适用于很多事情。 削减不必要的内容需要一些时间，但它减轻了用户的负担并加快了他们的完成速度。 减少（a）可以通过其他方式收集的内容，（b）将来更容易收集的内容，以及（c）简单地省略一些内容。 当您减少表单长度时，表单转化率就会增加，这具有重要的商业意义。

2.标签对应输入框

标签应靠近其相应的输入框。 在移动设备上，它可能位于输入框的正上方。 在PC上，可能会与输入框一致。 请务必避免容易引起歧义的间距，例如标签与两个输入框之间的距离相同。 如果你想询问两个不同的主题，你应该将其分为两个单独的输入框。

3.输入框对齐

将输入框放在多列中会破坏表格的垂直动力。 将所有输入框对齐到同一列，而不是强迫用户适应杂乱的布局。

4. 逻辑排序

表单标签和选项的顺序应按逻辑顺序排列，如“姓名、性别、手机号码……”或“一日游、两日游、三日游……”。 当然这里也要考虑用户的使用频率，尽量把用户选择最多的选项放在前面。

上图是星巴克手机APP，允许用户自行点餐。 不过，底栏中的“Full Decaf”选项位于最右侧，需要滑动才能看到。

如果全脱咖啡因是用户更常使用的选项，则应将其放置在最左侧。

5. 避免使用占位符文本

设计师经常喜欢使用占位符文本，因为它提供了更好的视觉效果。 但占位符文本通常会导致许多其他问题，应该避免。

6、输入形式与输入内容匹配

如果只有两个或三个选项，请勿使用下拉列表。 直接使用单选按钮更合适。 文本输入框的大小应与所需的文本输入长度相匹配。 例如姓名栏一般不超过4个字符，手机号码一般为11位等。

7.区分可选内容和必填内容

首先，根据第一原则，我们应该尽可能减少选项。 如果有些内容确实有必要但只适用于一小部分用户，请提供解释，不要误导大多数用户。 将表单中的选项限制为一两个，并明确将它们标记为可选。

8.指定输入或格式要求

如果输入需要特定的格式或内容，请提供精确的说明。 不要让用户猜测你想要什么。 下面所示的网站直到用户的密码格式错误才提供准确的要求，这显然违反了这一原则。 正确的做法应该是在用户输入时提供详细的格式要求。

9.避免使用重置和清除按钮

重置或清除写入内容往往会给用户带来不必要的麻烦。 如果表单收集敏感信息，例如财务信息，我们应该为放弃填写表单并希望删除其个人信息的用户提供“取消”按钮。 但还要注意，“取消”按钮在视觉上应该比“提交”按钮稍微不那么明显，以避免意外点击。

10.提供可见且具体的错误消息

我们应该通过多种方式提示用户错误，不仅是颜色，还可以加粗字体、绘制错误区域等，以确保用户不会忽略错误信息。 这一点不要太含蓄。 而且，我们应该保留用户之前的错误输入，以便用户可以方便地修改。