返回博客

文本字段和表单设计

2024年6月13日

FORM表单已经存在了相当长的时间，大大简化了起草投诉和其他各种法律诉状的任务。随着信息及其处理的进步，收集数据的手段也在不断发展。纸质印刷形式已经存在多年，我们可以从他们的设计中学到一些技巧。

— 文本字段剖析 —

文本字段允许用户在界面中输入文本。它们通常出现在窗口和对话框中。文本字段组件设计应提供清晰的交互功能，使字段在布局中可发现、高效填充和可访问。

以下是基本文本字段的关键元素：

容器(Container) — 可交互的输入区域
输入文本(Input text) — 输入到文本字段中
标签文本(Label Text) — 告诉用户哪些信息属于给定的表单字段
占位符文本(Placeholder text) — 所需信息的描述或示例，在用户提供后将其替换为输入文本
帮助或验证文本(Helper or Validation text) — 提供其他上下文或验证消息
前图标(Leading icon) — 描述文本字段所需的输入类型
尾图标(Trailing icon) — 对输入文本的附加控制，如清除、隐藏/显示等

— 文本字段类型 —

它们中的大多数都基于基本文本字段，这些文本字段经过修改以更好地处理特定类型的信息，例如信用卡号。以下是我们创建的整个UI界面中最常用的输入类型的几个示例：

— 收集数据的输入类型 —

为请求的数据提供正确类型的文本字段将帮助用户以正确的格式输入信息并避免错误，从而使该过程尽可能简单高效。

— 状态和外观 —

这可以通过提供将传达文本字段状态的视觉提示来完成。输入文本字段可以具有以下状态之一：默认、悬停、禁用、聚焦、验证、错误。所有状态都应彼此明确区分，并在整个形式和应用中保持一致。最好遵循最佳实践，不要挑战形成的用户心智模型。

— 选择最佳文本字段样式 —

通常三个主要标签定位选项：顶部、左侧和右侧对齐。最适合的样式将取决于设计的窗口、组件库和平台的关键目标和大小。它们都有一些优点和缺点。

1.左对齐标签

当用户不熟悉请求的数据时，这是一个不错的选择

优点： 易于扩展的标签，充分利用垂直空间

缺点： 标签和相应输入之间的距离和可变距离增加了完成时间

2.右对齐标签

优点： 文本字段标签和输入位置紧密，限制了眼球运动的次数，从而缩短了完成时间

缺点： 更难快速扫描表单并了解所需的所有信息

3.顶对齐标签

最快的完成时间和大多数情况下的全方位最佳选择。在移动设备上运行良好，因为不需要大量的水平空间

优点： 用户眼球无需左右运动即可捕获输入标签和输入文本，最快完成时间

缺点： 需要更多垂直空间

— 字段长度应与预期输入长度 —

对表单中的所有文本字段使用相同的输入长度将使它们在视觉上令人愉悦，但更难完成。

— 占位符不能替代标签 —

如果没有标签，用户将无法在提交表单之前检查他们提供的所有信息。

表单内的占位符文本有时会使用户感到困惑，最好在字段外使用提示文本。

— 帮助用户填写表单 —

使用自动补全功能帮助解决部分查询。这发生在键入的输入框中，您可以按 Enter 或“向右箭头键”完成输入。
使用自动建议为相关关键字和短语，提供预选列表。此列表以下拉列表的形式显示为多个建议列表。
预填充字段并使用智能默认值。通常可以通过IP或地理位置轻松检测用户的国家/地区和城市。根据最常见的方案和分析，可以定义默认情况下应选择的内容。
提供上下文信息。为了做出正确的决定或避免错误，用户在转账时需要一些额外的信息，例如帐户余额。

— 使用内联验证 —

“实时内联验证”是指在用户完成表单时实时检查用户输入的有效性，而不是在用户提交表单时一次性检查输入。正确实施它以免造成更多错误：

在输入附近显示验证消息
不要责怪用户，验证错误时应该告诉用户如何解决问题
避免在完成输入之前将字段标记为无效时“过早验证”

— 减少字段数 —

消除视觉和认知负担，看起来更简单。

不要将全名和日期等文本拆分为多个字段
不要多次询问相同的信息
使用标签和提示复制以尽可能缩短它

— 隐藏不相关的字段 —

通过逐步披露信息，我们只揭示要点，并帮助用户仅在需要时管理复杂性。

— 组相关字段 —

简化复杂表单的最简单方法之一是开始对相关字段进行分组。格式塔心理学中有多种分组原则可以帮助项目感觉相关：接近性、相似性、连续性、封闭性和连通性。将数十个非结构化字段分组为几个可管理的集合将显著提高表单的可用性。

— 避免使用多个列布局 —

一列布局为用户创建清晰的完成路径。使用多列表单布局的后果可能导致用户跳过他们实际有数据要输入的字段，将数据输入到错误的字段中，或者只是停止可能导致放弃。