几何

除按钮外,文本字段可能是最常用的用户输入之一。当您登录Friendface,或在线订购Nicholas Cage枕头,或者将你的银行信息发送给新的在线笔友时,你很可能会使用文本字段。

在稍后的备忘单中,我们将讨论预先确定的文本字段(也称为下拉列表)以及如何设置表单样式,但是现在我们将讨论旧的简单文本字段以及我们如何设置样式。

那么这张备忘单上写的是什么:

  1. 文本字段剖析
  2. 文本字段结构
  3. 常用文本字段样式
  4. 图标
  5. 文本字段状态
  6. 文本字段标签和提示文字
  7. 反馈
  8. 自动格式化
  9. 触碰目标
  10. 辅助功能清单
  11. 文本领域名人堂
  12. 结束语

 

1.文本字段剖析 

文本字段具有多个占位符和片段,其中一些仅根据其所处的状态(默认、活动、输入等)才可见。下图将其全部分解。

 

2.文本字段结构 

有两种主要的文本字段结构:标准和分隔。

分隔的文本字段传达所需的信息类型和格式。常见分隔的字段示例是电话号码、日期和一些代码。如果你使用标准字段,那么我会建议将它们自动格式化(请参阅第8节)。

标准和分隔的文本字段结构示例。

如上所示,分隔的文本字段更好地传达了所需的数字格式,并且更方便人们再次检查他们写的内容。

你还可以使用所需输入的长度作为容器的长度来提示用户输入到底有多长。

具有两种不同长度的邮政编码文本字段的示例

 

3.常用文本字段样式 

在本节中,我将重点介绍几种最常用的文本字段变体样式。

标准文字字段

这些文本字段是我们设计界面时经常使用的。虽然它们可能不是革命性的,但它们完成了用户最关心的工作。
标准文本字段 

我喜欢这些字段类型的两个方面是它们看起来像输入字段,并且标签始终可见。

 

带占位符标签的文本字段

这些文本字段看起来与标准类型非常相似,只是它们使用占位符文本作为标签。
带占位符标签的文本字段 

虽然这是节省空间的一个很好的解决方案,但从可用性来说并不好。典型的例子是,如果你在单击输入字段后忘记了应该输入的内容。

标准文本字段和带有占位符标签的文本字段

然而发生在我身上的是,如果你查看上图中的右侧示例,则无法确定姓氏不在字段中第一个名字,而不移除类型来检查占位符标签。

专业提示:我比较建议避免使用没有标签的输入字段。但是我对登录注册界面并不介意,因为大多数用户已经习惯了经典的电子邮件和密码布局。

 

水平对齐标签

水平文本标签非常适合节省垂直空间。因此,你将看到它们在软件应用程序中的使用频率比在线表格要高。

水平对齐的文本字段

但是,我倾向于避免使用它们,因为它们为用户创建了Z形的视觉流。与向下阅读相反,你的眼睛必须在屏幕上曲折移动,这有点乏味。更糟糕的是,在非常长且间隔很小的表单上,有时很难分辨哪个标签连接到哪个输入框。
水平和垂直对齐形式的比较 

 

Material Design的行文本字段(旧)和填充文本字段(新)

Material Design不再讨论文本字段的“仅行”风格,但它仍然在互联网上广泛使用。这是一个光滑而优雅的领域,没有任何装饰,使其在当时非常受欢迎。

行文本字段

我不确定为什么它不再出现在他们的模式库中,但是我记得我前同事说他发现用户不知道这是输入字段,因为它看起来不像传统的输入或可点击。我很想知道是否有人遇到过同样的问题,或者对此有更多了解。
无论原因如何,填充文本字段似乎都已被接管。如果我的猜想是真的,那将是有道理的,因为它们看起来更像是具有填充背景的传统输入。
填充的文本字段 

 

Material Design的概述文本字段

Material Design的概述文本字段是对标准文本字段的现代呈现。这种巧妙的设计节省了空间,并使标签始终可见。
概述的文本字段 

 

4.图标 

图标通常在文本字段中使用,但根据图标本身及其位置的不同,其含义可能有很大不同。以下是表单字段中图标的最常见情况。

标准图标用法

你在使用表单时遇到的大多数图标纯粹是为了美观。这些图标将指示用户需要输入的内容。例如信封将指示电子邮件地址,电话将指示电话号码等。你在使用表单时遇到的大多数图标都会出现在那里,纯粹是为了美观。这些图标将指示用户需要输入的内容;例如,信封将指示电子邮件地址,地理PIN将指示地址,电话将指示电话号码等。

审美图标用法

 

反馈图标

反馈图标可以很好地向用户指示他们在尝试填写表单时成功/失败。您可能会说:“但是我们只能用颜色来表示成功,”但是,可惜,我的朋友们,有红绿色盲的人无法分辨出区别。因此,图标是指示成功或失败反馈的好方法。反馈图标很好地向用户指示他们在填写表单时成功或失败。你会说:“我们可以用颜色来表示成功或失败。”但是红绿色盲的人是无法区分的。因此,图标是表示成功或失败反馈的好方法。
反馈图标

 

清除图标

在一些输入字段中出现清除图标,并允许用户重设字段。虽然这是否真的需要,但它在触摸设备上非常有帮助。
清除图标 

 

语音输入
该图标向用户指示他们可以使用语音输入字符。虽然我不喜欢用语言通话,但是此功能对于无法打字或视力障碍的人非常有用。

语音输入图标 

 

显示/隐藏图标

对于密码字段,隐藏图标有助于避免窥视,但你希望检查你所写具体信息,因此“显示/隐藏”图标按钮非常有用。默认情况下,保持密码隐藏。

显示/隐藏图标

 

5.文本字段状态 

文本字段必须更改其状态,以便用户知道该怎么做。

默认和禁用

默认状态是未单击输入字段状态。当业务或系统要求不能进行交互操作时,可以禁用该输入字段。

默认和禁用的文本字段 

 

悬停

与按钮一样,文本字段应该向用户表明它们是交互式的或可单击的。大多数字段在悬停时会改变颜色或增加其线宽。如果将鼠标悬停在它上面,它应该恢复为原始状态。

触摸设备没有悬停状态。

焦点

焦点状态是当你单击表单字段时,表示已选中它,你可以开始输入。我们需要指示此状态,以便用户知道他们可以开始输入,信息将显示在该框中。

点状态

我很少遇到的模式是焦点占位符。此处可能有一个不带占位符的标签,但是在焦点上,您可以看到一个占位符,作为提示。不建议这样做,因为在我看来这还不是很“明显”,但值得考虑是否有必要出现。

点占位符

 

6.文本字段标签和提示文本 

在本节中,我们将只看第一节中描述的所有不同文本和标签元素。

标签

具有常量标签的文本字段是最容易访问的,因为标签使用户可以更轻松地再次检查他们添加的信息是否正确。

文本字段标签

占位符标签

我们也可以将占位符用作为标签。我不太建议使用它们,因为用户很难再次检查到是否在正确的框中输入了正确的信息。

文本字段占位符标签

标签和提示文字
占位符文本为用户提供了更多的上下文,方便用户知道需要输入什么信息。有时似乎有点多余,但可以帮助提示具体的写法。

标签和提示文字组合

辅助文字
辅助文字有助于使用户更好地了解他们需要填写的信息类型。这些额外的信息通常由你的业务规则决定,并且可能非常特定于你的系统和产品需求。

具有辅助文字的文本字段

工具提示图标
随着隐私法的更新,向你的用户透露他们的信息将如何被使用是至关重要的。虽然有几种方法可以做到这一点,但工具提示可以使界面保持整洁。

工具提示不仅仅需要保护隐私;它们还可以为用户提供更多关于需要填写内容的信息(密码长度、日期格式等)。

带工具提示的文本字段

在选择工具提示中应包含的内容以及不应该包含的内容时,问问自己“不知道这些信息是否会使表单更难填写?”  如果答案为“否”,则将其作为工具提示,否则请考虑使用辅助文字。

 

最小字符限制

对于最小字符限制没有设置规则,除非用户什么都没有填写内容。

最小字符文本字段

就我个人而言,我倾向于赞美用户,当他们有足够多的表达时给予他们微妙的积极反馈,而不是在他们开始时给他们失败的反馈。

 

最大字符限制

顾名思义,最大字符限制与最小字符限制相反。因此,为了确保有足够的字符,在这种模式下,我们必须让用户知道他们已经写得太多了。

最大字符文本字段

我最喜欢的最大字符限制文本字段是Twitter。想看看我在说什么,向下滚动到名人堂。

发布后的提示,有时’28 / 100’中的/有点难以理解,因此最好使用’剩下的72个字符’模式。方便用户更好的理解。

备用最大字符文本字段

 

7.反馈 

反馈状态是判断用户他们输入的文本是对还是错,如果错误时及时告知用户。例如,如果使用了用户名或密码不正确,或者您输入了有效的生日等。提供反馈的方法有两种:两者都有用,具体取决于具体情况。方法1:告诉用户他们在填写表格时犯了错误。方法2:当用户提交表单时告诉用户出错。就我们目前的目的而言,结果看起来都是一样的。 

失败反馈

失败反馈可用于突出显示错误,例如空的必需字段、错误的密码、无效的电子邮件(例如,当电子邮件不包含“@”时)、错误的电子邮件(当电子邮件不在数据库中时)等。

失败反馈

样式提示失败反馈:利用反馈文本让用户知道为什么存在问题。确保反馈文本清晰WCAG标准(AAA标准)。我建议使用图标来指示哪些字段不正确,因为色盲人可能无法区分红色。

 

正面反馈

正面反馈不如负面反馈那么频繁。但是我们希望大多数用户能够正确填写他们的详细信息,出现错误应该只是个例外。所以你可以考虑给表单添加正向反馈,让用户知道这条信息是正确的,那么就会更容易完成其余部分。


成功/积极反馈

设计正面反馈的提示:使用图标时,因为色盲人士可能无法区分绿色。你应在填写表格时看到正面反馈,而不是在提交时看到。

 

无效的电子邮件地址反馈(注册)

当用户注册时,系统必须确保电子邮件是有效的。我们希望用户输入正确的邮箱地址,这样我们就可以联系他们,也方便他们以后可以登录。这对于任何注册过程都是至关重要的。

 

非可选:检查电子邮件是否遵循模式

每个电子邮件地址都遵循一种模式,即“本地部分”后跟@符号,然后是“域”。检查输入字段是否可以运行以确保模式正确。

无效的电子邮件地址反馈

可选:使用确认字段重新检查电子邮件地址
虽然我们并不经常看到这种情况,但有些表单要求你确认电子邮件地址,以免输入错误。

电子邮件地址与反馈不匹配

毕竟,如果用户在注册表单中输入电子邮件时出错,则很难再重置它。

 

可选:发送验证电子邮件以确认地址
这种确认方法正变得越来越流行,原因很明显:你可以知道地址是否真实,因为用户能够回复你发送给他们的电子邮件。以下是电子邮件确认验证的标准流程。用户注册并输入他们的电子邮件地址。他们看到的下一页告诉他们遵循通过电子邮件发送给他们的链接。他们打开他们的电子邮件帐户并打开电子邮件。他们按照电子邮件中的链接打开浏览器页面,并提醒他们电子邮件已通过验证。他们现在可以继续访问该网站的其余部分。

 

错误的电子邮件地址反馈(登录)

如果用户输入了错误的电子邮件地址,或者它不在数据库中,则你的系统必须让他们知道。输入错误的电子邮件没有惩罚(例如尝试次数有限)。在某些用户输入了错误的电子邮件地址,你可能会建议他们重新注册该地址。
错误的电子邮件地址反馈 

 

用户名反馈不可用(注册)

创建用户名是最糟糕的,因为有人总是先得到它,而所有很酷的名字都已经占用了。我想使用一个叫“croft”的用户名但失败了。因此,你尝试各种随机组合,直到其中一种可用为止。(croft,lcroft,laracroft,1aracroft,14racroft,14racr0ft-成功!等等,为什么我叫14racr0ft?)

注册用户名反馈

 

错误的用户名反馈(登录)

用户必须在此处输入其用户名才能登录其帐户。如果用户忘记了用户名,建议他们使用电子邮件地址进行检索。

用户名反馈错误

 

弱密码反馈(注册)

如果用户提供的密码不够强,则界面必须告诉他们。它还必须告诉他们为什么它不够强大以及如何使其更强大。

根据您的行业或业务要求,您可能具有特定的密码规则。例如,由于银行所包含信息的重要性,银行应具有比在线论坛更强的密码。但是,标准密码格式为:8个字符长,至少有一个大写字母、一个小写字母、一个特殊字符和一个数字。如果太过于复杂不容易记忆,你的用户会感到烦恼。毕竟,每个人都只使用一个密码对吧?

向用户显示如何改进密码的反馈

如果你的用户正在努力改善其密码,你应该非常清楚地告诉他们如何加强。有些在帮助文本中这样做,有些在工具提示中这样做-不管解决方案如何,都要让用户知道。
密码强度指示器

有些网站向用户表明密码的强弱取决于密码的复杂性。如果想要一个很酷的方法,可以在下面的名人堂部分查看Dropbox的解决方案。

允许用户检查其密码的文本字段

当看到密码被隐藏时你的用户可能还想确认他们的密码。一种方法是添加显示/隐藏符号。另一种方法是让他们写两次密码。尽管确保密码正确很重要,我个人认为更重要的是要确保电子邮件地址是正确的,因为你始终可以重置密码,而对于错误的电子邮件地址则无法做任何事情。

错误的密码反馈(登录)

密码字段通常将输入的文本显示为非字母数字符号。

登录密码只应在用户单击“提交”后显示它是错误的。你不想在此之前告诉某人密码错误,因为这样只会使坏人更容易获得密码。

密码输入错误的反馈

你可能希望限制用户可以输入的错误尝试次数,尤其是在信息敏感的网站上。

 

8.自动格式化 

自动格式化文本框可帮助用户输入正确的值,并通过正确分组字符来帮助他们检查输入的内容是否正确。

货币

根据你的货币和国家/地区,你可能会以不同的方式写出长数字(1 000.00与1,000.00与1000,00),因此创建标准化长数字格式的输入很有用-特别是在处理货币时。

动格式化货币的文本字段

这些输入字段还应阻止你使用字母和标点符号。

 

电话号码

根据你来自何处,你可能会以不同的方式设置电话号码的格式—即使你的所有用户都来自同一个国家,用户也可能不确定是否要添加国际或区号—因此使用自动格式的电话号码确实有帮助。

动格式化电话号码的文本字段

对于电话号码之类的内容,你也可以使用单独的字段来强制用户以正确的格式输入该号码。

 

日期

不同的国家以不同的方式写日期(DD / MM / YYYY与MM / DD / YYYY与YYYY / MM / DD),因此在下面的示例中,将模式写入焦点占位符文本确实有帮助。

有自动格式设置和焦点提示文本的文本字段

 

文字屏蔽

文本屏蔽与自动格式化类似,它不仅能正确格式化值,还能指示需要输入的内容。

带有文本遮罩的字段

根据你的需要,你可能需要不同的自动格式化的文本,如信用卡号、许可证代码等。有这些自动格式化让这一切变的更容易。

 

9.触摸目标 

触摸屏的输入字段大小(点击)

一个MIT触摸实验室研究表明,用于触摸屏的手指的部分是8-10mm的,所以最低目标尺寸需要10mm以上,如果你想避免用户操作失误。Material Design建议触摸目标应为48dp x 48dp,并且在不同接触点之间间距应为8dp。虽然我找不到有关iOS设计系统目标尺寸的任何文档,但一般的理解是它的最小目标尺寸为44 x 44pt。

 

桌面的输入字段大小(单击)

因为桌面上的光标比触摸屏上的手指小,因此可以使触摸目标小很多。但是你想吗?

 

10.辅助功能清单 

你做到了!你已经完成了文本字段的设计,现在是时候将其交付给开发人员了。但是等等!…你是否已检查文本字段是否可以首先访问?

  • 你的文本字段是否符合WCAG AAA色彩对比标准?有些设计师更喜欢使用AA标准,但对此我却过于偏执。我现在最喜欢的对比度检查器是webaim。
  • 触摸屏的文本字段(包括标签)是否大于44像素?我喜欢将标签作为触摸区域的一部分,因为如果你点击标签,则容器仍应切换到焦点状态。
  • 标签始终可见吗?
  • 相关字段是否有有用的反馈文本(“错误”与“您的电子邮件格式不正确”)?
  • 如果你对开发感兴趣,那么最好了解屏幕阅读器的工作原理。在这里了解更多。(https://webaim.org/techniques/forms/controls)

 

11.文字领域的名人堂

 推特

我喜欢这个最大字符限制字段。它以图形方式显示你与极限的接近程度-然后以递减计数直到达到极限-然后突出显示超过的字符数。

Twitter的最大字符数限制输入

 

Material Design的浮动标签
Material Design的浮动标签看起来非常好。它不仅可以始终保留标签,而且还可以播放出如此精美的动画。

带有浮动标签的Material Design的输入字段

Dropbox
Dropbox的“创建密码”字段为用户提供了密码安全性的指示器。而且,作为这个故事的亲爱的读者,他们还对它进行了组织,以便色盲的人仍然可以阅读它。我也喜欢他们如何为用户提供一个不太安全的密码(如果他们想要的话)的机会。这样简单而人性化的解决方案。
Dropbox的密码字段

 

12.结束语 

谢谢你看这个-我知道它很长。但是希望对你有帮助!

 

原文地址:水手哥学设计(公众号)
作者:水手哥

转载请注明:学UI网 » UI备忘单:文本字段

登录收藏
 
你可能喜欢的:
设计沉思录|美事升级,不止于改版设计沉思录|美事升级,不止于改版
这篇“点9”文,欠大家两年了!这篇“点9”文,欠大家两年了!
案例:如何优雅地用卡片分类法,搞定烦人的用户需求???案例:如何优雅地用卡片分类法,搞定烦人的用户需求???
抖音VS快手,产品模式是如何影响交互模式的?抖音VS快手,产品模式是如何影响交互模式的?
如何更好的使用弹窗?如何更好的使用弹窗?
一款APP的交互文档从撰写到交付③一款APP的交互文档从撰写到交付③
关于评分功能的一些思考关于评分功能的一些思考
一款APP的交互文档从撰写到交付②一款APP的交互文档从撰写到交付②
Material Design Layout Spacing methods 间距规范Material Design Layout Spacing methods 间距规范
设计沉思录|设计师应该了解的响应式知识设计沉思录|设计师应该了解的响应式知识