浮动式表单标签(Label)的设计模式

浮动式表单标签(Label)的设计模式

这是一篇准备在一周中间的时间里发布的短文。其实每周会汇总到不少文章和资源一类，固定的周末更新基本就是一篇译文，总是有些，浪费的赶脚。那么平日略微有些碎片时间可以用的话，做些小更新也还不坏。

正在听滚石的Miss You，够骚的歌；Slash有句名言，好歌要么让你想fight，要么让你想fuck；必须的啊。

有点闹了，说正经的了。简短的一篇小文，介绍了一种有点意思的表单标签设计模式。

这里进入译文。表单当中比较常见的内联标签(inline label，将label直接置于输入框中的模式)容易引起不少麻烦，但与此同时，移动设备屏幕的局限又迫使设计师不得不紧缩空间。这种局面比较尴尬。我们首先来分析一下传统内联标签的优缺点：

内联标签的优点

• 节省空间。这是内联标签最大的优势了。使用内联标签，设计师可以让标签与输入框保持在同一行，极大的节省空间，尽可能减少用户必须滚屏的次数。
• 交互暗示。内联标签使输入框看上去更像是按钮一类的对象，有助于用户在进行触控操作时产生更直观的认知。
• 更简洁。过去几年当中，我和很多设计师就内联标签的可访问性问题产生过争执。他们认为内联标签可以创造出一种更简洁的体验。

内联标签的缺点

• 用户会失去上下文。内联标签最大的问题就是，一旦用户通过触摸或点击来聚焦到某个输入框上，那么内联标签就会消失，或是在用户进行输入之后消失，从而无法继续为用户提供上下文。
• 占位符(Placeholder)并不能作为标签的替代品。从表现上看，内联形式的标签占用了本该属于占位符的位置，有些demo甚至为此而去掉了label标签，直接使用placeholder作为标签提示。这会引起极大的可用性问题。
• 无法同时使用label和placeholder元素。与上一条的情况类似，当使用内联标签时，你便无法再使用placeholder，而placeholder原本的作用是为用户提供更多的提示信息。对于“姓名”这类字段来说，这不会产生什么问题，但对于那些需要特定格式的信息，例如日期或电话号码来说，无法使用placeholder便是一种损失。

浮动式标签的设计模式

设计师Matt D Smith分享了一种新颖的表单交互模式，也就是我们所说的浮动式标签。在这种模式中，当用户聚焦于某个输入框并输入内容之后，原有的内联标签就会“浮”到已输入的内容之上。见下图的演示：

浮动标签的优点

• 保持用户所处的上下文。这种模式最主要的优点就是当用户聚焦于字段并输入内容之后，仍可保持上下文信息可见。这带来了更好的可访问性，减少用户的负面体验。
• 默认情况下可以保持简洁，便于视线扫描。这种模式在默认情况下就是原来的内联标签，只有当用户产生交互行为后才会成为浮动样式。
• 优雅。这种模式很性感。这很难用语言描述，但它看上去很棒，动效也很细腻。

浮动标签的缺点

• 仍然没有足够的空间来同时输出label与placeholder。因为在默认状态下，label仍然处于placeholder的位置，且没有额外的空间来放置placeholder了。
• 浮动状态时的字号。标签处于浮动状态时，字号比较小，有时会难以阅读，不过从另外一个角度讲这也不算是问题，因为一旦用户开始与输入框进行交互，标签本身更多的是提供参考作用，而不是默认状态时的介绍引导作用。
• 代码滥用。到目前为止，我所见过的一些demo当中，与浮动标签相关的代码对原有代码的可访问性和语义化都有一定程度的损害。

进一步考虑

• 渐进增强。浮动标签的模式看上去不错，不过在编写HTML代码时，记得要保证默认状态时的可访问性和可用性，例如在label的代码中使用for和tabindex一类属性，并注意其他所有的表单设计最佳实践。另外还可以使用Modernizr这样的工具来探测用户浏览器环境对于JS、动效和其他特性的支持程度，基于探测结果进行必要的渐进增强。
• 可用性胜于简洁。placeholder属性的缺失会造成一种模棱两可的体验。需要记住的是，我们设计表单的目的是让人们尽可能轻松的填写信息。很多时候，设计师会为了追求简洁而牺牲掉必要的提示信息(想想看有多少次你在输入密码之后才知道它需要包含三个数字、两个惊叹号、12个大写字母...)；有时提示是非常必要的。
• 留意空间和尺寸。我见过的一些页面demo在移动设备上表现的很不好，因为输入框以及其中的标签、内容距离太近了。一定要考虑到手指触摸操作时的情况。
• 易读性。浮动标签的字号较小，一定要确保用户可以读到。同时，要为默认状态时的内联标签提供适当的对比度。设计师们很喜欢白色背景上的浅灰色文字，如果过浅的话确实会引起问题。

最后，我个人觉得浮动标签是一种很棒的模式，它可以克服内联标签的诸多缺点；我等不及想看看这个概念会如何发展下去了。