UX/UI进阶UI设计Sketch

为什么要大行间距?

2018-03-10  本文已影响1145人  VisualCC

在设计时,行距与字体大小一样重要。行间距不仅影响理解可读性 - 更重要的是影响可访问性。

什么是行距?

行间距是段落内文本行之间的空间量,该属性由HTML代码中的“行高”设置。

行间距表示为数字值或字体大小的因素,例如1.5×或150%。举个例子:1.5×12的文本行高为18。

“行间距与字体大小一样重要。”

为什么行间距很重要?

字体,大小,重量和颜色是排版的重要考虑因素,行间距也是如此。

行距会影响设计的感觉,排版的节奏和可读性。太紧,文字会感到拥挤,变得更难阅读。太大,线条会显得不相关没有空间。

事例

行间距也影响可访问性。有认知障碍或视觉障碍的用户在间隔太近时无法追随文本行。提供正确的行距平衡可以让用户更轻松地下移到下一行文字。

什么是正确的行距?

要符合 W3C辅助功能指南 “行间距至少在段落中是一半半,这是150%。”

许多默认行间距设置都低于此指南。

一个例子:

大多数浏览器的默认引导率是110%到120%

Sketch和Adobe Creative Suite的自动引导默认设置为120%

Bootstrap的段落文本默认行高为1.428(142%)

Foundation段落默认行高为1.5625

只有其中一个默认设置符合可访问性准则。这些默认的引导设置才会进入设计模型,进入网站。

使用默认的尺寸是不可以接受的。设计师做得更好是我们的责任。这也并不意味着将150%设置为默认值并忘记它。行间距应仔细设计,应当考虑行长度,字体大小和其他类型规格。一些设计可能需要更多的引导和其他更适合少引导(谨慎!)

“使用默认引导尺寸是不对的,设计师做的更好是我们的责任”

一般规则:

1.较小的文字大小- 需要较大的行间距。

2.较宽的段落宽度 和 较长的段落 需要更多的行间距。

3.较大的字体大小 (如标题)可以处理较少的行间距。

为什么我喜欢大行间距?

排版网页的样式时,我喜欢更大的行间距(合理的范围内)

更大行距的好处:

1.无障碍

2.用户更容易更快地吸收内容

3.快速扫视

4.可读性

在网页设计中,线条长度会对不同的屏幕尺寸产生影响。在桌面上有两行的段落可能会在移动设备上变成4至6行。更紧密的行距可以在桌面上使用2行,但会导致移动设备出现可读性问题,因为它会成为一大块文本。(当然,行间距可以针对不同的断点进行调整,与字体大小相同,但实际情况大多数情况下不是这样)。

较大的行间距比(适用于较短和较大的段落)不会有这些问题。在印刷设计中,增加10-20%的引导会增加页数,从而导致印刷成本的增加。

每个人都在谈论扫描能力,可访问性,用户如何急躁,以及我们如何不介意网页上的更长页面 - 但却没有什么文章和建议争论更大的行间距。

不要害怕大行间距。 设置印刷字体的大小,颜色,字体和重量时,请 务必花时间设计和检查行间距。你的读者和用户会感谢你。

上一篇 下一篇

猜你喜欢

热点阅读