表单标签对齐方式如何选?

输入设计和表单设计是产品经理与交互设计师的核心技能,你可以把它们用在各类软件和各种平台上。

一、首先什么是标签?

我们先来复习一下文本输入框的构成。

△文本输入框的构成

  1. 文本容器/Container—可交互的输入区域
  2. 输入文本/Input text—所输入的文本内容
  3. 标签文本/Label Text—告诉用户这个表单字段中要输入的内容属性
  4. 占位符文本/Placeholder text—输入信息的范例,用户后续需要用自己的内容替代它
  5. 帮助和验证(可选)/Helper or Validation text(optional)—提供上下文信息和验证信息
  6. 引导图标(可选)/Leading icon(optional)—描述文本字段所需的输入类型和特征
  7. 后缀图标(可选)/Trailing icon(optional)—对输入内容进行控制,比如显示和隐藏

我们今天要聊的就是第3点:标签文本/Label Text。

标签应该用人们能明白的语言提出简洁问题,以便于回答。

但依旧依赖于表单元素的布局。

二、标签对齐方式

输入框标签应当顶对齐、右对齐还是左对齐?

先来看看这几种对齐方式的优缺点。

1. 顶对齐标签/Top aligned labels

△顶对齐标签

优点:

  • 顶对齐时间最快,由于标签和输入框的位置非常靠近,处理起来毫不费力。清晰的完成路径,只需要往下移动。
  • 提供了大量的横向空间,可以用来扩大或者收缩标签文字,而不会对整个页面布局产生负面影响。
  • 比如说法语德语荷兰语比英语长很多的语言,容易对表单布局产生破坏力。
  • 横向空间的富余,可以以多种方式组合相关输入框

缺点:

  • 占用额外的纵向空间。
  • 如果可供使用的垂直较小,要谨慎使用。

eg: Amazon 寄送地址表单的顶对齐标签提供了充裕空间,可水平分组相关内容.

2. 左对齐标签/Left-aligned labels

△左对齐标签

优点:

  • 容易浏览标签,只要上下浏览表单问题,不会被输入框打断。
  • 垂直空间占用少。

缺点:

  • 标签和相关输入框相邻间距过大,延长完成时间。
  • 根据马泰奥的研究,“典型扫视时间为500毫秒,很长,说明用户经历着沉重的认知压力。”
  • 虽然速度是最慢的,但从辩证的角度来看,完成时间较长并不一定是坏事。
  • 有时候我们需要用户谨慎的对待表单的填写,特别是表单含有大量可选输入框,类似“使用偏好”或者高级设置陌生数据时,就可以使用左对齐标签。

3. 右对齐标签/Right-aligned labels

△右对齐标签

优点:

  • 标签和相关输入框相邻,能快速填完;
  • 垂直空间占用少。

缺点:

  • 右对齐布局造成左侧不齐,可读性降低;
  • 不够灵活,如果标签需要两行文字进行展示,会导致阅读困难。
  • 但如果既要减少表单占用的垂直空间,又要减少填表时间的话,右对齐标签不失为一个较好的选择。

eg: Jira 创建故事表单采用右对齐标签布局

4. 输入框内标签/Label in the input box

优点:

对屏幕的占用空间非常小

缺点:

  • 填写输入框时,输入框的标签会消失,因此用户看不到提示;
  • 填完后,也无法检查对错。
  • 且输入框内的标签要明确的表明自己是标签,而不是已填数据。
  • 输入框内标签更适合用于只有一个问题(比如搜索框)或者几个输入框的表单或者问题非常熟悉的表单(比如通讯录)。

eg:Dribbble 搜索页面为输入框内标签

5. 浮动标签/Float label

当用户在Text field中输入内容以后,内嵌Label会浮动到Text field上方,成为顶端对齐。

优点:兼具内嵌Label和顶端对齐的优点

缺点:输入内容后,标签显示过小,对于小屏幕和视力不佳的用户来说是个挑战。

eg:Yahoo登录页面,输入框为浮动标签

三、总结

  • 顶对齐标签,能减少填写时间,适用于本地化,标签长度可以灵活多变。
  • 右对齐标签,与顶对齐标签类似,但可以减少垂直空间的占用。
  • 左对齐标签,要求人们仔细填写或者回答多个问题中的若干特定问题。
  • 输入框内标签,表单问题少,屏幕空间非常有限
  • 浮动标签,注意场景与使用者视力问题。
  • 注意区分标签与数据。

扩展阅读:

能迅速填完顶对齐标签表单的原因之一,是因为眼球只需要在标签和输入框之间进行单一运动。

事实上,马泰奥·彭佐从2006年7月进行的眼动研究发现,顶对齐标签方式从标签移动到输入框只要50毫秒,比左对齐标签方式快了10倍,后者需要500毫秒;比右对齐标签方式快2倍,后者高达240毫秒。

可能觉得几百毫秒,觉得也没有多少多长时间,但是一旦涉及到需要填写几百个录入项,时间也是成倍的。

所以在标签对齐上要根据场景选择合适的方式。

 

作者:Neko,支付产品经理/UI/UX;公众号:吱了一声

本文作者 @Neko 。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部