ui组件系列之文本框和表单设计

ZZiUP

北京/设计爱好者/3年前/5053浏览

版权

ui组件系列之文本框和表单设计

ZZiUP

当你在设计表单时，是否对文本框和表单的规则有疑惑？本文的一些简单的规则将帮助你完成设计用户希望完成的表单。

上图是表单的发展历程，由石刻上的表单到纸质表单再到电脑上输入的表单。印刷式的表单已存在多年，我们可以从其设计中学到一些技巧。

一、文本框剖析

文本框允许用户在界面中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的可见性，使字段在布局中好发现，高效填充且容易理解。

这些是基本文本字段的重要元素：

1.容器-可交互输入文本的区域

2.输入文本-输入文本字段

3.标签文本(标题)-告诉用户给定表单字段中属于什么信息

4.占位符文本-是所需信息的描述或示例，在用户输入文本后会被替换

5.帮助提示或验证文本（可选） -提供其他上下文或验证消息

6.头部图标（可选） -描述文本字段所需的输入类型

7.尾部图标（可选） —对输入的文本的附加控制，例如清除，隐藏/显示等

二、文本框类型

它们大多数基于基本文本框，为了更好地展示特定类型的信息而做的演变，例如输入信用卡号的文本框。以下是我们创建的整个UI中最常用的输入类型的一些示例：

三、使用恰当的输入框类型来收集数据

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

可以通过提供视觉上的变化来传达文本框的状态。输入文本字段可以具有以下状态之一：未激活，悬停，激活，禁用，校验，报错。大家在做表单设计时最好的做法就是遵循这些状态的变化，不要挑战已经形成的用户思维模型。

通常，文本框的标题有三种常用的位置可选择：顶部，左侧对齐和右侧对齐。采用哪种样式将取决于表单的主要目标和表单的大小，组件库以及要设计的平台。它们各自具有一些优点和缺点。

我已经根据大型设计研究的研究结果进行了汇总，最开始的Material design指南中流行的下划线输入并不是最佳选择。有趣的是，同一项研究表明，用户更喜欢带有圆角的输入。

当用户不熟悉所要填写的内容时，这是一个不错的选择

优点：标题易于拓展；充分利用垂直空间

缺点：标题和相应的输入内容之间的距离过长，而且不一致的距离会增加文本输入的完成时间

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

优点：文本的标题和输入内容的位置更紧密，减少了了眼睛的运动次数，从而缩短了完成时间

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

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

优点：能够让用户单一眼球移动即可了解输入标题和输入文本，能够更快的完成

缺点：需要更多垂直空间

为表单中的所有文本框都使用相同的输入长度会使它们在视觉展现上令人愉悦，但是却很难完成填写。

输入信息后文本框内占位文本的消失，会对用户的短期记忆产生压力。没有标题，用户将无法在提交表单之前检查他们提供的所有信息。如果您需要极简的表单设计，则可以使用“Material design”浮动标题的方法。
表单内的占位符文本有时会使用户感到困惑，最好在字段外使用提示文本。

使用自动完成功能帮助解决部分查询功能，在用户的输入框中，用户可以按Enter或“右箭头键”使用它。
使用自动联想值搜索相关的关键字和建议使用的内容列表。列表以下拉弹层形式显示多个建议列表。
预填充字段并使用智能默认值。通常，您可以通过IP或地理位置轻松检测用户所在的国家和城市。根据最常见的方案进行分析，我们一般可以定义默认情况下应选择的内容。
提供上下文信息。为了用户做出正确的决定或避免错误，用户在进行转帐时将需要一些其他信息，例如帐户余额，如果能够从上下文中获取这些信息，就请及时给出。
九、使用实时校验