原文作者:Adam Silver
翻译原文链接:Floating labels are problematic
有很多人建议以浮动标签的形式替代占位符的形式
我们经常被新颖的模式所吸引,这种模式可以节省空间,但是这种模式是有问题的。以下它到底有什么问题:
1、没有暗示的空间
浮动标签从文本框内开始,没有空间用于额外的提示
2、不易阅读
浮动标签通常有小文本,因此当它浮动时,占用了少量的空间。但是小文本很难读懂。
3、他们需要空间进入
浮动标签需要移动的空间,如果是友好的标签文案,只有空白空间足够大,才能保存该文案。
或者在标签移动到位之后,我们在扩充空间,但是这会使得页面出现抖动,使得用户在输入的时候出现一个混乱的输入体验。
4、浮动动效是有问题的
动效,即使做得好,也可能会引起用户注意力分散和方向迷失,特别是对于低信度或视力障碍的用户而言。 而且,当放大时,标签可能会从屏幕上消失。
5、他们的对比度很差
像占位符文本一样,浮动标签的对比度很低,但是对比度低的文本很难阅读。
根据设计,当标签浮动的离开该区域时,其颜色将需要改变。否则文本将在背景颜色下丢失。
用户可能会跳过这个场景,认为它已经完成了。 当用户提交时,会看到一个需要修复的错误。 这是令人沮丧并且耗时的。
7、他们是不一致的
单选按钮、复选框和选择框有静态标签和图例。当文本框有浮动标签时。这造成了不一致的体验。
例如,当查看文本框时,用户必须查看控件内部的内容。对于一个选择框,他们必须向外看。
8、标签可能会被裁剪
如果浮动标签的长度大于字段的大小,它将被字段截断。我们应该为内容而设计,我们不应该让内容适合设计。
9、他们忽视标准
我们知道占位符有问题。 但是,如果我们要把文本放在一个文本框中,它应该是一个提示,而不是一个标签。
总结
表格不是娱乐的来源。 浮动标签不会让用户喜欢使用表单。 用户不关心 他们只是想要结果。
静态标签和图例定位在外部创建熟悉和一致的经验。在精心设计的接口中经常发现的两个特性。
必定有更好更有效的方案来改进这个设计,我们应该花更多的时间和精力来替代这个方案
——————————————分割线——————————————————
第一次翻译设计文章,翻译这篇文章的主要是因为我们团队设计的登录的实现方式正是这种浮动标签的设计方案,其他也有很多产品的登录的设计是采取这种方案的,单纯以登录这个界面的设计来说,用户在正常输入时不会有任何问题,无论是有无浮动标签,用户绝大部分情况都能很好的完成这项任务,但是当用户输入错误时,使用浮动标签的情况下,如果进行错误引导提示时,就显得比较局限,就如第一点所说的没有暗示的空间,用户操作失误时不能更为友好的告知用户,另外,置于作者所说的空间显示文本超限制等问题,在登录表单是上不易出现问题。
最后作者总结的“表格不是娱乐的来源。 浮动标签不会让用户喜欢使用表单。 用户不关心 他们只是想要结果”,以个人观点来讲,登录是用户深入了解产品、体验产品的第一步,看似简单,但是不同的产品在表现上、逻辑上有着很多的差别,所以依然需要在用户使用的场景下,深入思考并设计。