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

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

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

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

UI设计中的段落间距

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

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

共享的UI设计风格

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

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