image.png

前言

输入框组件设计应该为交互提供清晰的启示，使输入框在布局中易于发现、高效地填充和可访问。

输入框结构

image.png
以下是输入框的基本元素：

  1. 容器ー可交互输入区
  2. 输入文本ー输入文本字段
  3. 标题ー告诉用户这个输入框该输入什么内容
  4. 占位符文本ー为用户提供输入文本前所需信息的描述或示例
  5. 提示或验证文本(可选)ー提供额外的上下文或验证消息
  6. 前导图标(可选)ー表达输入框的类型
  7. 尾随图标(可选)ー输入文本的附加控件，如展示/隐藏，清除。

    输入框类型

    image.png
    其中大多数都是基于基本的文本字段，然后这些字段经过修改以更好地处理特定类型的信息，如信用卡号码。下面是我们创建的界面中最常用的输入类型的几个例子：
  • 文字输入
  • 搜索
  • 日期
  • 下拉选择
  • 输入域
  • 手机号
  • 多选输入
  • 步骤选择器
  • 密码
  • 纯数字输入
  • 颜色选择

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

    为请求的数据提供正确的输入框类型将有助于用户以正确的格式输入信息并避免错误，使处理过程尽可能简单和高效。
    image.png

输入框必须根据状态和用户交互更改其外观

这可以通过提供可视化的线索来实现，这些线索将传达输入框的状态。可以有以下状态之一: 不活动、悬停、禁用、聚焦、验证、错误。所有的状态都应该明确地彼此区分，并且在整个形式和应用中保持一致。最好遵循最佳实践，不要挑战形成的用户心智模型。

image.png

选择最好的输入框样式

通常，标签定位有三个主要选项: 顶部、左部和右部对齐。 最适合您的样式取决于表单、组件库和设计平台的关键目标和大小。 它们都有一些优点和缺点。
image.png

左对齐的标签

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

  • 优点：标签可伸缩性好，垂直空间利用率高
  • 缺点：标签与相应输入之间的距离可变，增加了完成时间。

image.png

右对齐的标签

比左对齐标签快近两倍的完成时间

  • 优点：文本字段标签和输入紧密定位，限制了眼球运动的次数，从而导致快速完成时间
  • 缺点：很难快速浏览表单并理解所需的所有信息

image.png

顶部对齐的标签

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

  • 优点：让用户只需一个眼神的移动，就能捕捉到输入标签和输入文字，最快完成时间。
  • 缺点：需要更多的垂直空间

image.png

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

对表单中的所有文本字段使用相同的输入长度将使它们在视觉上令人满意是更难完成的。
image.png

占位符不能替代标签

消失的占位符文本会让用户的短期记忆变得紧张。没有标签，用户无法在提交表单之前检查他们提供的所有信息。如果你想要一个非常简约的表单设计，你可以使用Material设计浮动标签的方法。 表单内的占位符文本有时会让用户感到困惑，最好在字段外使用提示文本。
image.png

帮助用户填写表单

  • 用自动完成功能帮助解决部分查询。这发生在你输入的输入框内，你可以按回车键或 “右键 “来接受它。
  • 使用自动建议搜索相关的关键字和短语的几乎没有限制的列表。这个列表以下拉的形式出现在多个建议列表中。
  • 预先填写字段并使用智能默认值。通常情况下，您可以通过IP或地理位置轻松检测用户的国家和城市。而且根据大多数常见的场景和分析，你可以定义什么应该被默认选择。电子商务是个例外，不要预选任何与购买相关的偏好，比如尺寸或颜色。
  • 提供相关信息。如果你知道为了做出正确的决定或避免错误，用户在进行转账时需要一些额外的信息，比如账户余额，不要犹豫地提出来。

image.png

使用内联验证

“实时在线验证 “是指在用户浏览表单的过程中，实时检查用户输入的有效性，而不是在用户提交表单时一次性检查输入。正确的实现才不会造成更大的伤害。

  • 将验证信息显示在靠近输入的地方，并且全部显示在一起。
  • 不要对用户大喊大叫，错误信息应该告诉用户如何解决问题，而不是指责用户。
  • 避免 “过早验证”，当他们还没有完成输入，字段就被标记为无效。
  • 考虑使用 “积极的验证”，它可以增加愉悦感和进步感。

image.png

减少输入框的数量

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

  • 不要将全名和日期等文本分解成多个字段
  • 不要多次询问相同的信息。
  • 与标签和提示文案一起工作，尽量缩短它的长度

image.png

隐藏不相关的字段

通过逐步公开信息，我们只揭示要点，帮助用户在需要的时候管理复杂性。
image.png

使用条件逻辑

条件逻辑允许根据访问者的答案自动显示或隐藏字段，并跳过表单中的页面。 这种方法不仅可以减少字段的数量，而且可以使填写过程更加个性化，更具有对话性。
image.png

对相关输入框分组

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

避免使用多列布局

单列布局为用户创造了一个清晰的完成路径。使用多栏式布局的后果包括用户跳过他们实际需要输入数据的字段，将数据输入到错误的字段，或者干脆停止，从而导致放弃。
image.png

将复杂的表单分解为几个简单的步骤

有时候，即使删除了所有不必要的东西，一些表单也会变得非常庞大。 把巨大的任务分解成一系列小任务看起来更容易，并且激励他们完成整个过程直到最后。

  • 显示步骤和视觉传达用户的进展，这会给用户更多的满足感和动力
  • 要对表单进行细化，太多的步骤是无济于事的，只会让用户感到厌烦
  • 进行关键信息的总结提供，以减少焦虑和需要在最后有复习的步骤。

image.png

尽量减少在页面内的导航

如果表单足够大，可以分成多个步骤，那么它就应该有一个单独的明确的重点空间来处理它。暴露一般的导航或任何会打乱流程的链接只会造成混乱。我也建议不要在小型Pop-Ups中使用多步骤表单。
image.png

显示适当的键盘类型

Android或iOS提供了几种不同的键盘类型，每种键盘都是为了方便不同类型的输入而设计的。为了简化数据输入，编辑文本字段时显示的键盘应适合字段中的内容类型。要意识到键盘会出现在哪里。为了不引入不必要的滚动，请将你的文本字段放置在上部区域。
image.png

密码创建设计

  • 允许用户露出他们的密码，而不是要求用户输入2次密码，这对于密码生成程序来说也会更好。
  • 始终显示密码要求，并显示用户满足所有标准的进度。尝试简化用户的需求
  • 使用强度表鼓励用户创建更强的密码

image.png

作者：Taras Bakusevych
原文地址：https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0