排版——网格

您可能会有错误的印象，认为一旦找到正确的字体组合，就可以完成最具挑战性的任务。但是，正确放置文本以便用户可以扫描并轻松找到必要的信息，这与选择字体一样重要。内容的逻辑组织提高了可读性并增强了品牌的可信度。

网格帮助设计师设定节奏并计划他们想要放置的内容以及他们希望用户看到的顺序。您可以选择阻力最小的路径，并选择大多数设计软件（如 Figma 或 Sketch）提供的预定义网格。或者，您可以创建适合您项目需求的自己的网格。为此，您可能会问自己以下问题：

我希望正文跨越多少列？

如何设置垂直和水平节奏（这意味着应用排水沟和边距）？

我要为什么设备设计，或者网格应该有多灵活？

找出这些问题的答案将帮助您找出适合您项目的网格。

什么是排版网格

网格 是指不可见线（垂直或水平）的组合，将页面划分为多个部分并帮助组织内容，包括类型、图像和 UI 元素。本质上，网格管理空间和信息，鼓励一致性和视觉层次。

标题、副标题、正文、图像和其他内容的清晰和合乎逻辑的组织使用户更容易阅读和理解信息，而不会影响他们的记忆。此外，这种有序性可确保数据的可信度并增强信心。

网格被错误地认为必须是刚性和对称的。在设置网格时，保持平衡与和谐的原则更为重要。毕竟，自然界中最美好的事物并不是完全对称的。

网格的解剖

本质上，网格的解剖结构由两个基本的垂直组件组成——列和排水沟。列定义了在网格中容纳内容的最宽区域，而装订线是指列之间的空间。从技术上讲，每个网格也有边距——内容外边缘的排水沟。

列数越多，布局就越灵活。另一方面，它变得更难管理。您可以让您的内容决定列数或坚持传统数字——台式机 12、平板电脑 8 和移动设备 4。

为了在水平和垂直元素之间实现良好的平衡，建议保持间距宽度与基线高度（台式机和平板电脑）或行高（移动设备）的一半相同。

内容优先设计

本质上，网格只是一种工具，在设计时应牢记这一点。网格应 该围绕 内容构建，而不是相反。[6] 否则，您可能会限制自己和您的设计，而不是为您的产品创造独特和量身定制的东西。

确立你的目标

想想你的品牌个性、你想要唤起的情感，以及你认为你的产品将涵盖的用户需求。

选择和组合字体

根据前面的步骤，您可以选择能够传达正确情绪并帮助您的用户轻松浏览产品的字体。

优先考虑您的内容

根据内容组及其优先级，设置您的网格：选择列数并定义垂直和水平节奏。

基线网格

基线网格 是在您的设计中均匀分布的水平线（基线），可用于水平对齐内容和排版。设计师还使用基线网格来确保元素之间有足够的垂直间距。Material Design指南使用基线网格来确定字体大小和行高配对，以及边距和填充。

虽然基线网格可能是静态网站的一个很好的解决方案，但它们并不总是对用户不断添加新媒体或内容的动态用户界面有所帮助。这里最好的方法是专注于在页面上保持清晰、一致的垂直节奏（行间距和文本框之间的间距）。

多列布局

多列布局 是指一个或多个由排水沟分隔的垂直内容块。您更有可能在报纸和杂志中遇到这些传统的排版安排。他们使用栏来分解故事中复杂的长文本段落，以提高可读性和可浏览性。

但是，多列布局并不是破坏文本内容的最佳匹配。一篇文章分成多列需要大量的上下滚动，使得用户很难关注主题。

一个更好的解决方案是对单个文章使用单列布局。为了提高其可读性，您可以将文本分成段落，确保它们之间有足够的间距。有了更多的列，布局变得更加灵活，可以安排不同的内容。例如，一些杂志使用两栏布局，将文本放在左侧，将图像放在右侧。

模块化网格

柱状网格将页面分解为垂直部分，而模块化网格则添加了水平细分。相交的列、行和排水沟形成了一个单元矩阵——或者设计师所说的模块。

模块化网格比基线网格提供更多的灵活性，允许设计师将布局元素和排版锚定到特定的节奏。您可以根据需要以多种方式排列文本，将其扩展为一个或多个模块并按照您喜欢的方式对齐它，并且不一定必须将其设置为左对齐。

打破网格

荷兰平面设计师、字体设计师和排版师 Willem Hendrik Crouwel 曾经说过：“网格就像足球场上的线条。你可以在网格中玩一场精彩的比赛，也可以踢一场糟糕的比赛。” 不可否认，网格是设计师绘制布局计划的绝佳工具。但是，您的眼睛和常识应该是安排内容时的主要工具。

在设计产品时，不应该受到网格的限制。始终牢记就近原则，如果您需要分隔不相关的项目或减少相关组之间的空间，请随意打破网格。您还可以使用非常规的文本对齐方式或不跨越所有列的主图来创造一种意想不到的扭曲，从而吸引用户的注意力。

以上内容为转载