您是在使用左对齐还是顶部对齐的表单字段标签?如果是的话,您的用户可能没有获得最佳体验。左对齐和顶部对齐的标签会导致更多的眼睛注视和扫视。换句话说,它们会使信息扫描变得更加缓慢和困难。
将标签放置在内部并进行顶部对齐是一种更好的对齐方式。字段标签与输入之间更紧密的关系创造了更具连贯性的关联。字段边框围绕文本元素,形成更清晰的数据分组。
因此,设计师们必须切换至内部顶部对齐的标签以优化用户扫描。然而,没有任何指导是很难做到的。关于每个字段元素的适当尺寸和间距有许多疑问。本文将为您提供八条规则,使切换变得更加顺畅。
文本字段的最佳高度正好是60px,不多也不少。这个高度允许标签和输入周围有足够的空白空间。如果高度小于60px,标签和输入会显得过于紧凑。
您必须通过在标签和输入之间留出垂直间距来将它们分开。如果不这样做,文本会连在一起,使文本元素难以区分。
字段周围的内部填充应始终是均匀的12px。不均匀的填充会使标签和输入看起来奇怪和不一致。
典型的1px灰色边框会使低视力用户无法访问该字段,而黑色边框对比太强烈。因此,2px灰色边框要好得多,因为它既易于访问又不会分散注意力。
用户的输入比标签更重要,因为当他们需要编辑字段时,他们会专注于这段文本。因此,应该在输入上使用粗体字重,而不是在标签上使用。
您的输入文本的字体大小至少应为16px。如果小于这个值,当用户选择输入时,移动浏览器会放大字段。放大会导致用户只能看到表单的左侧。
当字段标签和输入文本具有相同的字号时,用户很难区分它们。标签应比输入文本小两个字号。
如果文本难以阅读,用户更有可能输入错误。这就是为什么输入文本应具有高对比度,并且应为黑色,而不是灰色。
当您将所有八条规则应用于您的文本字段后,您将注意到内部顶部对齐标签的清晰度有了很大的改善。
-
输入更容易扫描,没有视觉干扰。
-
标签更容易与输入区分。
-
每个文本字段边框更容易看到。
-
每个文本字段更容易选择。
-
每个数据分组都很清晰。
您拥有一切所需,以切换至内部顶部对齐标签,为更好的表单体验。是时候将左对齐和顶部对齐的字段标签留在过去,展望未来了。