松散网格背后的逻辑是什么?

平面设计 页面布局 网格
2022-01-03 22:52:33

我试图了解这些经常用于显示照片的“松散”网格系统背后的逻辑。我尝试解构这些类型的网格,但似乎无法找到关于如何确定图像的定位和比例的连贯解释。请参阅下面的示例。

在此处输入图像描述


在此处输入图像描述


在此处输入图像描述


在此处输入图像描述


在此处输入图像描述

3个回答

第一个示例似乎更多地基于经典布局而不是刚性网格。它似乎是基于黄金分割的“挤压”版本。它被“压扁”的原因可能有很多:

  • 该部分被应用到一个较大的页面,随后被修剪
  • 照片可能会稍微变形
  • 设计师说“这到底是怎么回事”,然后稍微推动了该部分以适合他的页面
  • 编辑原因

在此处输入图像描述

请注意由黄金分割生成的“正方形”(因为我不得不挤压它而变成矩形)如何用作确定复制列的宽度以及照片的宽度和高度的单位。

这些照片似乎是按照与巴洛克对角线平行的对角线的均匀节奏排列的(从左下角到右上角)。这会沿着险恶的对角线(从左上角到右下角)创建一个漂亮的潮汐,将视线引导至副本。

在此处输入图像描述

通常网格用于使相似点和差异更加明显——因此更容易识别。

它还鼓励可访问性,因此观众会自动知道在哪里寻找元素,因为“水平和垂直划分的接合点充当了定位信息的路标”[1]。

也就是说,网格的有趣之处在于它分布和调整其元素,同时有助于对它们进行排序和理解它们以及它们之间的关系,如下图所示(来自en.wikipedia.org) .

来自 en.wikipedia.org 的多列网格插图

正如蒂莫西·萨马拉(Timothy Samara)所说,“每个网格都包含相同的基本部分,无论它变得多么复杂。每个部分都实现了特定的功能”元素可以是

  • 结合成有凝聚力的群体
  • 从整个结构中省略

网格元素如何以及何时组合或省略由设计者自行决定,但应取决于观众对信息的解释。

查看您的示例,也可能发生内容具有自己的结构并且网格作为顺序和解释系统不起作用,因为它澄清了任何事情。有时,内容也可能需要忽略结构来创建一个的结构,从而引起观众的情绪反应——称为松散网格;-)

[1] Timothy Samara制作和打破网格,Rockport Publishers 2005 年 5 月

就定位而言,这些图像中的许多看起来确实与至少一张其他图片的边缘对齐,有些在垂直或水平列中以不同大小的图像居中对齐。我认为这些布局更多的是关于对象之间的关系和平衡,而不是严格的网格。