UI设计中的排版设计-行高

  • By 本站 - 2022-10-02 23:10
  • Read:832

最佳行高确保文本行之间有足够的间距,以达到良好的可读性水平。这越来越被认为是一种“标准”;谷歌的Lighthouse Audit工具甚至建议将其作为手动检查(如果文本中包含的链接可能由于行高不理想而过于紧密,甚至可以作为标志)。

WCAG再次帮助我们解决这个问题,声明行高应该是字体大小的1.5倍。所以,在你的UI设计工具'Line'(或类似的)下,简单地乘以字体大小——至少——1.5。例如,如果主体文本是18px,那么行高将是27px(18*1.5 -你也可以直接在检查器中执行数学操作)。不过,还是要注意——如果1.6x感觉更合适,那就用1.6x。记住,不同的字体会输出不同的结果。

现在考虑在我们的UI设计中使用真实的数据还为时过早,但至少,我们仍然应该使用一些真实的数据(甚至lorem ipsum)。InVision Studio有一个原生的真实数据应用程序,可以帮助我们看到我们的排版可能是什么样子的。

UI设计

UI设计中的段落间距

段落间距不是我们可以使用InVision Studio的检查器来声明的样式。相反,我们需要使用智能参考线(Smart Guides)手动对齐图层。与行高类似,魔法倍增器是2倍(字体大小的两倍)。

例如,如果字体大小是18px,那么在进入下一个文本块之前至少应该有一个36px的空间。字母间距应该至少为0.12。然而,在开始创建组件之前,我们不需要担心这一点。

UI设计

共享的UI设计风格

如果你的UI设计工具支持它(InVision Studio还不支持),考虑将这些排版样式转换为“共享样式”,在确保视觉一致性的同时快速重用它们。这通常是通过检查器完成的。


转载请保留出处及原文地址:https://www.shishangjue.com/article/415.html

上一篇:UI设计方法集合     下一篇:为UI设计选择正确的配色

直线

设计总监
138-0225-7571

微信
WhatsApp

WhatsApp
+8613802257571