UI设计 | 文本字段和表单设计-UI组件你用对了么？超级实用

木梓设计

北京/UI设计师/5年前/1189浏览

版权

木梓设计

简单的规则将帮助你设计用户希望完成的表单

木梓设计微信公众号整理编辑（ID：umthink365）

简单的规则将帮助你设计用户希望完成的表单

规范已经存在了很长时间，极大地简化了起草投诉和其他各种法律诉状的任务。随着信息及其处理的进步，收集数据的手段也在不断发展。由于印刷表格已存在多年，因此我们可以从其设计中学到一些技巧。

文字栏位剖析

文本字段允许用户在UI中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的承受力，使字段在布局中可发现，高效填充且可访问。

以下是基本Text字段的关键元素：
1. 容器 -可交互输入的区域
2. 输入文本 -在文本字段中输入
3. 标签文本 -告诉用户给定表单字段中属于什么信息
4. 占位符文本 -是所需信息的描述或示例，被输入文本替换在用户提供之后
5. 帮助程序或验证文本（可选） -提供其他上下文或验证消息
6. 前导图标（可选） -描述文本字段所需的输入类型
7. 尾随图标（可选） —对输入的文本的附加控制，例如清除，隐藏/显示等

文字栏位类型

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

（我们具体不是在讨论几种输入类型，例如复选框和单选按钮，因为我们将在本系列的后面部分介绍它们）

对你收集的数据使用适当的输入类型

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

文本字段必须根据状态和用户交互来更改其外观

这可以通过提供视觉提示来传达文本字段的状态来完成。输入文本字段可以具有以下状态之一：不活动，悬停，禁用，集中，验证，错误。所有州应清楚地区分，并在整个表格和申请中保持一致。最好遵循最佳实践，以不挑战形成的用户思维模型。

选择最佳的文本字段样式

通常，你将使用三个主要的标签定位选项：顶部，左侧和右侧对齐。最佳的样式取决于关键目标和表单的大小，组件库和设计平台。它们都有优点和缺点。

原始材料设计指南中流行的下划线输入不是最佳选择。我已经根据大型材料设计研究的建议进行了修订，我建议你检查一下。有趣的是，同一项研究表明，用户更喜欢带有圆角的输入。

左对齐标签

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

优点：易于扩展的标签，充分利用垂直空间
缺点：标签和相应输入之间的距离过长和可变距离会增加完成时间

右对齐标签

与左对齐标签相比，完成时间快了将近两倍

优点：文本字段标签和输入位置紧密，限制了眼睛移动的次数，从而缩短了完成时间
缺点：较难快速扫描表单并了解所需的所有信息

顶部对齐的标签

在大多数情况下，最快的完成时间和全面的最佳选择。在移动设备上效果很好，因为它们不需要大量的水平空间

优点：允许用户单眼移动即可捕获输入标签和输入文本，最快的完成时间
缺点：需要更多垂直空间

文本字段的长度应与预期的用户输入成比例

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

占位符不能替代标签

消失的占位符文本会拉长用户的短期记忆。没有标签，用户将无法在提交表单之前检查他们提供的所有信息。如果你需要极简的表单设计，则可以使用“材料设计”浮动标签方法。

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

帮助用户填写表格

使用自动完成功能帮助解决部分查询。这会在你输入的输入框中发生，你可以按Enter或“右箭头键”接受它。
使用Auto-Suggest搜索几乎无边界的相关关键字和短语列表。该列表以下拉形式显示为多个建议列表。
预填充字段并使用智能默认值。通常，你可以通过IP或地理位置轻松检测用户所在的国家和城市。根据最常见的方案和分析，你可以定义默认情况下应选择的内容。电子商务是一个例外，请勿预先选择与购买相关的任何偏好，例如尺寸或颜色。