首页
产品设计正文内容

切换至内部顶部对齐表单标签的 8 条规则

2024年09月03日
阅读时长 2 分钟
阅读量 3
切换至内部顶部对齐表单标签的 8 条规则

您是在使用左对齐还是顶部对齐的表单字段标签?如果是的话,您的用户可能没有获得最佳体验。左对齐和顶部对齐的标签会导致更多的眼睛注视和扫视。换句话说,它们会使信息扫描变得更加缓慢和困难。

将标签放置在内部并进行顶部对齐是一种更好的对齐方式。字段标签与输入之间更紧密的关系创造了更具连贯性的关联。字段边框围绕文本元素,形成更清晰的数据分组。

因此,设计师们必须切换至内部顶部对齐的标签以优化用户扫描。然而,没有任何指导是很难做到的。关于每个字段元素的适当尺寸和间距有许多疑问。本文将为您提供八条规则,使切换变得更加顺畅。

1. 文本字段高度应为60px

文本字段的最佳高度正好是60px,不多也不少。这个高度允许标签和输入周围有足够的空白空间。如果高度小于60px,标签和输入会显得过于紧凑。

2. 文本字段应有12px的垂直间距

您必须通过在标签和输入之间留出垂直间距来将它们分开。如果不这样做,文本会连在一起,使文本元素难以区分。

3. 文本字段应具有均匀的12px填充

字段周围的内部填充应始终是均匀的12px。不均匀的填充会使标签和输入看起来奇怪和不一致。

4. 文本字段边框应为2px灰色

典型的1px灰色边框会使低视力用户无法访问该字段,而黑色边框对比太强烈。因此,2px灰色边框要好得多,因为它既易于访问又不会分散注意力。

5. 输入应为粗体,而不是标签

用户的输入比标签更重要,因为当他们需要编辑字段时,他们会专注于这段文本。因此,应该在输入上使用粗体字重,而不是在标签上使用。

6. 输入文本字体大小应为16px

您的输入文本的字体大小至少应为16px。如果小于这个值,当用户选择输入时,移动浏览器会放大字段。放大会导致用户只能看到表单的左侧。

7. 标签应比输入文本小两个字号

当字段标签和输入文本具有相同的字号时,用户很难区分它们。标签应比输入文本小两个字号。

8. 输入文本应为黑色,标签应为灰色

如果文本难以阅读,用户更有可能输入错误。这就是为什么输入文本应具有高对比度,并且应为黑色,而不是灰色。

字段标签对齐比较

当您将所有八条规则应用于您的文本字段后,您将注意到内部顶部对齐标签的清晰度有了很大的改善。

  • 输入更容易扫描,没有视觉干扰。

  • 标签更容易与输入区分。

  • 每个文本字段边框更容易看到。

  • 每个文本字段更容易选择。

  • 每个数据分组都很清晰。

您拥有一切所需,以切换至内部顶部对齐标签,为更好的表单体验。是时候将左对齐和顶部对齐的字段标签留在过去,展望未来了。

免责声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

相关文章

切换至内部顶部对齐表单标签的 8 条规则
2024年09月03日19:02
本文提供了切换至内部顶部对齐的8条规则,包括文本字段高度、垂直间距、填充、边框颜色、字体大小等方面的建议。通过这些规则,可以优化用户扫描、提高文本字段清晰度和数据分组,改善表单体验。
6 个技巧打造令人印象深刻的落地页
2024年08月21日21:40
本文分享了六个简单技巧,从引人注目的标题到视觉效果,帮助你吸引访问者的注意力。技巧包括使用WHO/WHY/WHAT框架、从CTA到CTV、PAS写作框架、特性告诉好处卖、社会证明和利用视觉讲述故事。
最佳的首页布局
2024年08月09日10:20
首页作为网站的数字前门,是吸引、吸引和转化访问者为客户的关键元素。良好的首页结构包括清晰的导航栏、主要部分介绍、产品特点展示、见证和联系表单。通过构建终极首页布局,讲述一个故事,引导用户采取行动,可以实现高转化率。保持一致性和熟悉度是关键,让网站为企业服务,达到商业目标。
开发一个月收入为2000美元的应用程序经验分享
2024年07月14日20:38
开发一个每月创造$2000的月收入应用程序是许多开发人员和企业家的梦想。这篇文章分享了作者如何从辨识问题、市场研究和验证、确定最小可行产品(MVP)、开发、用户反馈和迭代、营销策略、定价模型、建立社区、扩展规模、持续改进等方面逐步实现这一目标的经验。
13个扼杀转化率设计错误 - 附带视觉示例
2024年05月29日08:59
当一个落地页或销售页面的表现不佳时,人们经常责怪的是文案,但更多时候,他们实际上应该关注设计。本文列举了13个设计错误,包括垂直网格线、文本大小缺乏差异化、社会证明位置不当、按钮位置不合理等。作者强调了设计中的细节对转化率的重要性,提供了视觉示例和解决方案。设计师们可以通过纠正这些错误来提升页面的转化率,让用户更容易购买或注册。
2024年网站设计的5大趋势
2024年05月23日02:17
本文介绍了2024年可能流行的5个重要网站设计趋势,包括暗黑模式网站、Bento网格、人工智能生成的图像、鲜明的渐变色和大字体排版。这些趋势将为网站设计师提供创造出色作品的机会。