UI组件——表单简介

表单是大多数网站的重要组成部分。如果没有表格，用户就无法直接注册优惠或时事通讯、进行购买，甚至无法轻松联系公司。同时，表单可能会出现许多使用户关闭的可用性问题。

精心设计的表单可以克服这些可用性障碍，并使用户的填写过程变得容易。它们提高了转化率，并且不会给填写它们的用户带来任何不必要的认知负担。

帮助用户更高效地扫描表单

标签放置 在表单的可用性中起着关键作用。标签应放置在输入附近，以直观地表示它们的关系。输入上方的标签放置使表单的扫描和阅读感觉更自然。此外，这种标签和输入的垂直对齐方式可以更好地适应不同长度的标签。

简单的单列对齐还可以更轻松地转换表格以适应各种屏幕尺寸。

极长的桌面表单可以在每个字段的左侧放置标签以节省空间。 

保持自然的阅读流程

与多列表单相比，一列表单布局已显示出用户完成的速度要快得多。

Baymard 研究所进行的一项研究表明，用户倾向于跳过多列表单中的输入，在错误的字段中键入数据，对如何处理这些表单感到困惑，或者干脆放弃它们。

多列表单会减慢用户的速度，因为他们必须在输入之间来回跳转，这甚至会导致他们无法跟踪表单中的进度。一根柱子自然地从上到下流动，减轻了用户必须付出的努力。

用户认为是连贯实体的某些字段（如卡号、到期日期和 CVV）可以放在一行中，而不会混淆用户。

使用逻辑输入分组来减少认知负荷

根据邻近原则，彼此靠近放置的项目作为一组出现，并且具有相似的属性或功能。将表单分解为逻辑组，例如个人信息或账单信息，可以减轻认知负担，并帮助用户更快、更有效地完成表单。

使用排版工具（标题、字体粗细、大小）和间距来分隔组，建立稳固的视觉层次结构，并使表单更易于扫描。

在元素之间添加足够的空间

边距 是指元素之间存在的空间。它们在页面上创造了喘息的空间，从而有助于消除视觉混乱。如果没有足够的间距，表格会感觉很拥挤并且难以扫描。

如何理解表单布局有足够的间距？倾听你的直觉，确保相关元素靠得足够近，不相关的元素相距较远。

边距还保持页面元素之间的平衡和节奏。

创建舒适的组件间距

一致 的组件间距 为您的表单域提供节奏和平衡。与间距不一致的表格相比，它还使表格更易于扫描和填写。更不用说，具有舒适、一致间距的表格看起来更美观。 

提供足够的按钮间距

在表单上，按钮是最重要的交互元素。表单完成取决于按钮间距的好坏。

按钮周围需要留有空白，以使点击（或点击）更容易，并防止用户意外与错误的按钮进行交互。这有助于避免不可逆的操作，例如意外单击“取消”而不是“提交”。

使用进度跟踪器来鼓励用户

如果您的表单包含至少 3 个步骤，例如结帐表单或在线调查，添加进度跟踪器将使用户了解他们还有多少表单需要填写。将表单分解为多个步骤或页面使它们更易于消化，并减少填写它们所需的认知负荷。此外，进度跟踪器可确保用户看到终点并鼓励他们继续前进。

使用上下文主要操作标签

所有形式都需要某种行动。主要操作按钮应该清楚地说明一旦用户通过主要操作标签点击或点击它们会发生什么。仅当其他词可能使用户感到困惑时，才使用“提交”或“发送”等通用操作词。

同时，设身处地为用户着想，完成下面的句子，想出更具描述性的标签——“我想……”你对此的回答，可能包括“注册”或“下载”等术语，将帮助您想出正确的标签术语。

使主要操作按钮脱颖而出

主要的动作风格应该鼓励用户点击按钮。使用足够的视觉重量增强您的主要操作按钮，使其从任何其他表单元素（包括辅助操作）中脱颖而出并吸引用户。

使次要按钮比主要按钮更微妙

辅助按钮，例如“取消”或“返回”，在表单上起到支持作用。因此，次要动作风格应体现其配角，而不是抢占主要动作的风头。使用较浅或饱和度较低的颜色是使它们比主按钮更突出的好方法。

注意不要让辅助按钮看起来被禁用。

提供可见且相关的错误消息

当用户输入表单的内容出现问题时，应通过警报通知他们此问题。有时，设计师会 在表单上方放置错误消息 并收工。该消息应该非常引人注目和相关，不幸的是，仅从这个位置，用户可以简单地忽略问题，特别是如果表单很长。

在错误输入附近放置错误消息并解释问题所在。它可以帮助用户立即发现错误并立即修复它。

本文内容为转载