基线网格与可读性

平面设计 排版 页面布局 网格
2022-01-14 07:35:13

任何称职的设计师都会谈论网格的重要性,这是理所当然的。然而,随着我继续练习我的交易,我发现基线网格对我来说并不总是很实用。

例如,我使用许多带有项目符号列表的营销表。我的第一个倾向是将所有内容均匀分布并保持基线网格,如下所示:

具有基线网格间距的无序列表

但是很多时候,我们得出的结论是,即使项目符号将项目分开,行之间和列表项之间的均匀间距也使得在视觉上分离点变得更加困难。所以我们最终会得到这样的结果:

无基线网格间距的无序列表

每个列表项都得到了更好的区分,但是现在基线网格消失了,整个事情感觉有点混乱。

在较小的层面上,这是另一个示例:

另一个间距示例

保持适当的基线网格会使两行标题看起来像单独的东西,但更改间距以纠正这会损害流程(如果有些人只有单行标题)。

有可能我仍然不够经验,不知道如何在这里吃蛋糕。但我怀疑这可能是设计规则必须灵活处理不同优先级的场景。

但无论如何我都会问:哪个更重要 - 在这种情况下维护基线网格,还是为了提高可读性而牺牲网格?

4个回答

如果您牢记这条最重要的规则,则基线网格的问题更容易解决:图形设计的唯一目的是促进交流。这就是你被雇用的原因,你得到报酬的原因,以及你被依赖做的事情。网格(或任何其他设计元素)只有在达到该目的时才是有用的。

如果页面上的信息具有良好的视觉层次(标题、副标题、正文、侧边栏)、适当分组(属于一起的事物实际上是一起)并且间隔适当,则页面上的信息更容易接近和吸收,包括边距和其他空白。

布局网格为页面带来秩序,让插图、图形元素(如空白、标题和文本)以有序的方式对齐,从而为页面带来权威或“正确”的感觉。有很多方法可以做到这一点;它们并非都由均匀间隔的行和列组成。

正如 DA01 指出的那样,基线网格在多列布局中效果很好。它在适合非常正式、受控或手术干净的外观的情况下也很有用。在书籍和其他文字繁重的出版物之外,您通常需要不那么正式的外观。

对于任何设计选择,尤其是在排版方面,您可以提出的问题是“这会使交流更容易掌握、更容易找到还是更有效?” 如果答案是“否”,那就错了。

您的示例就是一个很好的例子:将项目符号点强制到基线网格上会破坏文本的可读性。沟通是老板,所以你马上就知道坚持网格是错误的。单个信息项,例如地址或项目符号的文本,也必须是页面上的单个视觉项因此,单独的信息项必须在页面上分开。

因此,为了实现更好的通信而妥协电网不是问题。这是你绝不能妥协的沟通,期间。设计它以进行交流。尽可能多地使用设计的规则和技术,使其出色地沟通。但永远不要让规则或技术妨碍沟通。

“基线网格”的想法往往被滥用......尤其是在网络上。

基线网格实际上是用于多栏出版物。这个想法是在所有列中都有一致的水平“线”。

它应该默认使用,但你也应该知道什么时候不使用它。

您的项目符号列表示例是一个很好的案例,可以打破网格。不过,您仍然可以调整一些东西以在一定程度上遵守网格。

例如,您可能有 12/14 类型。然后,您可以在项目符号 7 之间留出空间。这仍然会坚持网格(半步)。

我建议为只有第一行与基线网格对齐的列表设置段落样式。这样列表就不会变得凌乱,所有带项目符号的行仍将在基线网格上运行,保持对齐的整体外观,而以下行具有不同的间距。产生与您描述的相似的外观,但您通常会选择更多元素与网格对齐。

您可以重新计算基线网格以管理较小的数字和细分,以便您可以执行每个间隔将重合的分数增量。如果您的基线网格单位为 9 pt,则表示自然细分为 3 pt。在设置为 8pt 的文本中,您可以使用 9pt 或 12pt,在设置为 12pt 的文本中,您可以使用 15pt、18pt 的行高……拥有一组相关的尺寸,您可以保持行距的比例。