浮动标签存在问题

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费信用额度!

我觉得所有这些问题都是可以解决的,但最致命的问题是 #3:它们需要空间来移动。 标签不能消失,并且需要始终保持可读性,因此浮动标签模式实际上并不能节省任何空间。 你可以直接将标签放在它们最终浮动的位置。 这仍然是一个很酷的效果,但它不会给你带来任何好处,反而可能会让你付出一些代价。

更新: Matt D. Smith

作为创造了大多数浮动标签热潮的原始设计的人,我觉得有义务分享我对这件事的看法。

Matt 直接回应了关于节省空间的批评

如果您同意浮动标签是一个装饰品,而不是一个指令,那么您可能也同意它的文本大小比标准标签略小是可以接受的。

而且,使用更小的文本大小,例如 12 像素而不是 16 像素,您将有效地节省 4 个或更多像素的空间。 可能甚至节省 8 个像素,因为您不需要在传统意义上在标签下方添加额外的边距。

我们现在已经深入到像素级的细节,但一位优秀的用户界面设计师会非常清楚 4 像素的差异,以及它在合理或不合理使用时对整个设计的影响。

直接链接 →