听起来不太鼓舞人心，不是吗？
听起来不太鼓舞人心，不是吗？基于2+3复合网格的示例 2+3复合网格。（大预览） 将其与式的节奏进行比较，您应该了解使用复合网格如何改变您的心理模型和您创建的布局。在我的第一个布局中使用这个 2|1|1|2 模式。我将内容的主体（包括标题、第一段和运行文本）放入两列网格的第一列中。我使用三列网格中的一列来放置有关捷豹 E-Type 系列的支持信息，毫无疑问，这是有史以来最漂亮的汽车。 那辆令人惊叹的汽车的蓝图图像穿过剩余的空间，在两个内容区域之间建立了视觉联系。 基于2+3复合网格的示例 2+3复合网格。（大预览） 对于完全不同的设计（上图）——同时使用布局和斜体来暗示 E-Type 的移动和速度——我使用两列和三列的网格线错开我的第一段和运行文本网格。 将复合形式更改为组合三列和四列网格 (3+4)，创建完全不同的节奏模式 基于3+4复合网格的示例 3+4复合网格。（大预览） 对于两个网格的复合（上图），您可以使用其中一个的宽度。或者您可以将两者的宽度组合起来形成不符合两者的列。您可以使用这些新宽度来确定图像和文本的大小。
第一个段落从三列网格开始，而后面的运行文本则从四列网格开始。 基于3+4复合网格 电子邮件数据 的示例 3+4复合网格。（大预览） 通过组合两个网格的列宽度来告知运行文本列的宽度，相同的网格组合（上图）可以产生非常不同的印象。此列与我的大型垂直图像的宽度相匹配，以平衡此设计的两侧。 基于4+5复合网格的示例 4+5复合网格。（大预览） 这次，我设置了跨两列运行文本的主要块，并通过组合 4 和 3 的列单位得出了它们的宽度。 至于那些非常窄的列，其宽度只有 1 个单位，它们非常适合告知印刷元素的大小，包括这个大胆的首字下沉。 基于4+5复合网格的示例 4+5复合网格。（大预览） 将四列与五列重叠（上图）会产生一种极不寻常的节奏模式：对于这种替代设计，我通过在三列上运行文本来以不同的方式使用相同的模式。 我使用五列网格的宽度来告知我的支持信息的宽度以及该 E-Type 弯曲后端的图像。 基于4+6复合网格的示例 4+6复合网格。（大预览） 在这个版本的设计（上图）中，一张大图像展示了 E-Type 车身的标志性形状，并且几乎填满了我页面的所有宽度。 运行文本的实心块位于捷豹车轮的正下方，其宽度来自四列和六列网格。
http://zh-cn.phonelead.me/wp-content/uploads/2023/12/Add-a-heading-7.png
在 Smashing 杂志上做广告 我的下一个设计（如下）实际上将 E-Type 置于操作的中心，文本环绕在其两侧。请记住，没有必要用内容填充每个网格模块。通过限制我的第一段的宽度并在布局中的其他地方留出空间，我创建了一个动态对角线，为这个设计增添了能量和动感。 基于4+6复合网格的示例 4+6复合网格。（大预览） 在所有可能的网格组合中，四列和六列网格的组合是我在工作中最常使用的一种。
頁:
[1]