UI设计中的排版设计-行高
- By 本站 - 2022-10-02 23:10
- Read:924
最佳行高确保文本行之间有足够的间距,以达到良好的可读性水平。这越来越被认为是一种“标准”;谷歌的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