基于网格设计方法将改善版面设计的15个理由

2018-03-01

在图形设计师的“工具箱”里,网格被认为是基本的基本要素之一。

这是为什么呢?为什么在你的版面上有一些网格线对设计项目如此重要?每个设计师都有自己的理由来解释为什么网格对他们来说很重要,但是简单地说,它们可以帮助你把本来是一种很难、耗时和麻烦的图文信息设计问题,通过网格构造,使你的设计实现有序、整齐、易于导航等功能。

所以,如果你要对基于网格设计的世界进行了深入的研究,让我们来讨论一下为什么简单地将网格添加到你的设计中,可以显着改善你的设计的15个理由。

01.网格使你的内容有条理

网格的主要用途之一是保持设计元素对齐和排序,并且使你的页面设计干净整洁。

这是因为网格有利于实现对齐,这实际上是它们在设计中起得最重要的作用。通过建立一个网格系统,你可以为自己创建一个结构来对齐元素,由此你可以为自己创建一个整洁,整齐和有组织的版面布局。

例如,看一下这种基于网格的布局,以及如何整齐排列每个元素以形成干净的最终效果。

在使用网格时,找到一个想象可以把元素对齐的网格,是你的文字、图像、图形或任何其他元素。先从你想要达到的目标开始,然后建立你的网格。

02.它会使你的工作更快

在一个我们总是希望更快更好地完成任务的世界里,“提高效率”这个词对很多人来说都像是音乐,所以这一点听起来应该像一首交响乐。

网格可以大大加快和改进你的设计时间,因为它们可以作为一个向导,在哪里放置是最好位置以及比例元素。网格应该帮助引导你找到一个自然的解决方案,而不是随机地定位元素,直到你找到一个好看的构图。

“网格通过帮助设计师决定内容应该放置在哪里,从而加快了设计过程。”

把你的网格想象成房子的基础,它是你首先要考虑设计的问题之一,然后你用这个基础上来创建版面。

03.你的文字会感谢你的

如果没有其他的东西,网格和文字是两个非常愉快地相随而来的设计元素。一个强大的网格,可以实现使文字多的布局看起来更整洁、更有组织,并有助于增强正文副本的可读性。

网格有助于提高文字的易读性,这是通过所谓的“基线网格”实现的,它们都是狭窄的横行线,在设计中你的每一行都在你的设计上,有点像笔记本上的规定线条。这些网格线帮助你做的是调整文本的位置,使它们处在同一水平线上。

否则虽然很多人可能没有特别注意到你的文字是否对齐,但他们会下意识地注意到,你的设计看起来更凌乱。

下面是一个基线网格的例子。注意每行是如何完美对齐的,由此创建一个干净整洁的排字效果。

04.与其他设计师合作将更容易

你曾经和其他设计师合作过吗?如果是这样的话,网格可能是缓解沟通不畅的部分压力和挫折的答案。

正如前面提到的,网格在许多方面帮助你为你的设计提供一个底层结构,并提供了一个向导,以确定应该放置哪些元素。因此,如果你的设计中设置了一个坚固的网格,并且有一个新的设计人员加入,他们将(希望)能够看到你是如何设置的,以及你打算如何定位元素。

举个例子,如果你设计一个像下面这样的设计作品,需要另一个设计师把文档上加进去,然后放置第三段。

由于有了网格系统,它们不能够正确地排列和对齐的几率就更小了。此外,关于诸如“列应该有多宽”之类的信息,从上一列的文本中,我应该把它放在哪里?因为所有的答案都已经被网格回答了。

在与其他设计师合作时,建立一个自我解释的网格系统,适合你的最终产品。

05.平衡你的设计将变得更加容易

网格的美妙之处在于它们是一致的,当你将设计分成一定数量的列时,你将从一个对称的布局开始。从这里开始,判断你的设计的哪个方面在压倒另一方面应该容易得多。

请查看下面的网站设计,以及如何通过使用锐利对称的网格和均匀大小的信息和图像来避免不平衡的布局。

同样,这个设计使用三列网格和集中的图形来保持设计的对称性和完美平衡。即使设计是相当强大的,可以很容易地被认为是压倒性的,因为整齐排列和完美平衡的网格,使其设计保持冷静,而不是混乱。

06.提高多页布局的内聚性

网格是多页布局的可取之处。通过为你的版面布局建立一个强大的网格,这个网格将从一个页面转移到另一个页面、使你在整体版面布局中更容易保持内聚性。

想想一个像滚石这样的网站,它有很多不同的页面,每个页面都有不同的结构和内容组成。如何使每一个页面都能以最好的方式展示,同时始终保持一个连贯一致的布局?

看看下面的图片,将滚石乐队的音乐页面与他们的首页进行比较。通过在网站设计中使用一个四栏的网格结构,每个页面看起来都很有凝聚力、干净和熟悉。

在多页布局中,网格的常见用途是手册设计,例如样本设计指南。由于这些是用于教育目的的手册,它们应该是线性设计的,所以这意味着使用一个网格系统!以下是博斯普鲁斯海峡风格指南,并注意到它在网格上的一致使用。

07.网格将增强你的视觉层次

基于网格设计的一个常见假设是,使用网格意味着将设计的每个元素划分成大小相等的块,几乎完全覆盖。

我们都知道层次结构对于设计的重要性(如果你不这样做的话,一定要按下面列出的理由来解释为什么每个设计都应该至少有三个层次的层次),而网格可以帮助你加快层次结构的进程,并使它变得更容易。

首先,让我们看看web设计。网站设计中使用了一个强大的四列网格,通过将更重要的图像横跨多个列或行来传达层次结构。请注意引导故事“万圣节天空包括死彗星飞越”跨越两列和两排,使其成为网站设计中最引人注目的部分。其他重要的故事也在多个栏目上展开,也引起了人们的关注。

通过使用网格为你的设计提供基础,你可以通过将其扩展到多个列来吸引对某些元素的关注。下面这个例子通过使用规模和网格对齐,将注意力吸引到23和30这样的点上。

08.告别混乱的版面布局

网格是摆脱可怕的、混乱的效果设计的一个奇妙的工具,特别这不是你想要的效果,通过使用边距来做到这一点。

按照非常基本的定义,边距是设计周围的空间。一般来说,你的边距越小,你的设计看起来更紧张和更杂乱,你的边距越大,你的设计就越干净整洁。

看看下面的图表,边缘用深灰色标记。

因此,通过使用网格,你通常也会使用边距,这将有助于保持你的设计更加开放和干净。

使用网格的另一种方式有助于避免混乱,是通过鼓励使用网格和列之间的空格。因为这些都是可调的,但应保持一致的大小,以保持网格的功能。

让我们来看看采用这两种网格功能的设计,以获得有效的结果。

09.向更讨人喜欢的设计靠近

许多设计师(以及艺术家、摄影师等)使用网格作为他们作品的基础的主要原因之一是,它被认为有助于引导你走向一个更令人满意的设计。让我解释一下:

有几种方法可以让你的设计更讨人喜欢,最常见(也是最容易)使用的方法之一就是“三分法则”。你可能听说过这个规则与摄影,但这个理论的基础是,通过将你的设计划分为一系列甚至是水平和垂直的线条,无论那些线条相交(在下面用圆圈标记),都被认为是焦点,在焦点上设置你的设计元素。

正如前面提到的,这一理论在potography中也被大量使用,以至于许多摄影师会故意将照片框起来,使焦点人物等物体放在这些点上。

10.你可以打破网格以获得额外的影响

坚信你新做好的网格是一个干净的、有组织的、美观的设计,但是偶尔和故意打破这个网格,将给这个干净的网格布局的设计一个独特的、引人注目的效果。

用简单的、整齐的三列网格来检查这个扩展设计,但是在整个扩展和关闭页面的时候,以对角线的方式,打破了这种整洁的线性。这种对既定网格的漠视,创造了一个令人难忘的、有效的设计,而真正的设计就是“以不同的方式思考”。

通过打破网格,你也可以把注意力集中到某些元素上。看看这个网站设计,它把东西整齐地对齐到网格和少数例外,通过将设计的一些部分从网格中突出出来,打破设计的垂直线条,眼睛就会被这些元素所吸引。

11.网格非常灵活

担心网格不适合你的设计?不要害怕,因为所有的网格都是高度功能性和灵活的东西,可以适应你不断变化的设计。

在创建网格时,你可以选择尽可能多的列,这就是网格的灵活性。看下面的图,它演示了一个列网格与两个或三个列网格的不同之处。

当然,根据设计者和设计的需要,网格通常可以达到13列。例如,下面的扩展使用一个完整的页面图像和非常简单的文本,使一个列网格系统使用完美。

鉴于“设计外科”的这种布局设计,即在每一页上使用十三列,因为文章一般都比较长,而且有一些图片需要在不同的点上插入。

在设计时要记住,列的数量完全取决于你,但是越多,你的设计就越灵活,而且越少,它就越简单和越不灵活。

12.网格可以帮助你实现对角线效果

如果你想从一个不同的角度(从字面意义上看)来接近你的设计,网格也会覆盖在那里。网格可以像在水平方向或垂直轴上一样有效地在对角线上发挥作用。

看看这个海报设计,通过将文字和图形沿着对角线网格布局,创造出一种适当的现代和时尚的效果。

对角网格也能使很多图像布局产生奇效。看看这个设计,以及它如何使用对角线构造的框架来镶嵌图像。

值得注意的是,这个设计显然使用了水平/垂直网格和对角线网格,以使版面保持完美的对齐和整洁有序。

13.它们可以在任何地方使用

尽管网格在杂志和编辑布局中是最常见的例子,但并不是网格可以应用的唯一媒介。事实上,它们可以用于任何设计的媒介。

许多着名的徽标都是在网格系统上构建的,比如下面的标识。正如你所看到的,通过使用网格来构建徽标,每个字母都保持一致、清洁和独立,从而产生标志性徽标。

网格也可以在整个插图中使用,看看这个令人惊叹的文学都市的插图,并注意到每个角度是多么的干净和尖锐,这就说明了这个插图是用一个对角网格的表面来创建的。

所以,无论你的介质是什么,网格都是非常方便的。虽然它们不一定适合每个样式和每个设计,但它们对很多人来说肯定是有用的,所以考虑你在下一个项目中应用网格设计。

14.网格可以鼓励白色空间

你是否正在钻研那些空间颜色太重的设计?网格也可以帮助你。

当你将设计分成所需数量的列时,请放置必要的元素,但保留一些行和列为空,留下空白处填充。

看看这个布局,网格根本不填充的区域使用了大量的空白,这导致了一个时尚、开放和复杂的设计,以及一个功能最小的布局,几乎没有混乱或不必要的元素。

这个海报设计中也有类似的功能。通过仅将文字和图像与中心列对齐,并将外部列留空,设计师创建了一个精美均衡,集中且视觉效果好的海报设计。

15.你的观众会感谢你

网格可以通过鼓励更容易阅读版面来帮助你。你看,对于文本的线条长度来说,眼睛是非常挑剔的。如果线条太长,就会变得越来越难,如果线条太短,它们看起来太破碎了,让我们沉浸其中。一般来说,文本的金线长度是每行最少六个字,每行约50-65个字符(包括空格)的粗略平均值。

通过在文本繁重的布局上使用网格,甚至创建文本的列变得更容易和更快速。而且通过专栏,把握住文本长度。

这就是为什么报纸严重依赖网格布局的原因之一,它帮助编辑们构建更快、更容易的文字段,使其内容更加易读。

无论你是否善用还是不善用网格,毫无疑问,它们真的可以如此多的帮助你设计,网格的使用可以追溯到13世纪并不奇怪。

网格有很多用途,从帮助对齐和平衡你的设计,到帮助你实现对角线排版出酷酷的效果。它们实际上不仅仅是页面上的一些线条,而是以一种可帮助你实现预期的最终结果的方式来构造、指导和塑造你的设计。

在图形设计师的“工具箱”里,网格被认为是基本的基本要素之一。

这是为什么呢?为什么在你的版面上有一些网格线对设计项目如此重要?每个设计师都有自己的理由来解释为什么网格对他们来说很重要,但是简单地说,它们可以帮助你把本来是一种很难、耗时和麻烦的图文信息设计问题,通过网格构造,使你的设计实现有序、整齐、易于导航等功能。

所以,如果你要对基于网格设计的世界进行了深入的研究,让我们来讨论一下为什么简单地将网格添加到你的设计中,可以显着改善你的设计的15个理由。

01.网格使你的内容有条理

网格的主要用途之一是保持设计元素对齐和排序,并且使你的页面设计干净整洁。

这是因为网格有利于实现对齐,这实际上是它们在设计中起得最重要的作用。通过建立一个网格系统,你可以为自己创建一个结构来对齐元素,由此你可以为自己创建一个整洁,整齐和有组织的版面布局。

例如,看一下这种基于网格的布局,以及如何整齐排列每个元素以形成干净的最终效果。

在使用网格时,找到一个想象可以把元素对齐的网格,是你的文字、图像、图形或任何其他元素。先从你想要达到的目标开始,然后建立你的网格。

02.它会使你的工作更快

在一个我们总是希望更快更好地完成任务的世界里,“提高效率”这个词对很多人来说都像是音乐,所以这一点听起来应该像一首交响乐。

网格可以大大加快和改进你的设计时间,因为它们可以作为一个向导,在哪里放置是最好位置以及比例元素。网格应该帮助引导你找到一个自然的解决方案,而不是随机地定位元素,直到你找到一个好看的构图。

“网格通过帮助设计师决定内容应该放置在哪里,从而加快了设计过程。”

把你的网格想象成房子的基础,它是你首先要考虑设计的问题之一,然后你用这个基础上来创建版面。

03.你的文字会感谢你的

如果没有其他的东西,网格和文字是两个非常愉快地相随而来的设计元素。一个强大的网格,可以实现使文字多的布局看起来更整洁、更有组织,并有助于增强正文副本的可读性。

网格有助于提高文字的易读性,这是通过所谓的“基线网格”实现的,它们都是狭窄的横行线,在设计中你的每一行都在你的设计上,有点像笔记本上的规定线条。这些网格线帮助你做的是调整文本的位置,使它们处在同一水平线上。

否则虽然很多人可能没有特别注意到你的文字是否对齐,但他们会下意识地注意到,你的设计看起来更凌乱。

下面是一个基线网格的例子。注意每行是如何完美对齐的,由此创建一个干净整洁的排字效果。

最新更新:

第七城市

栏目导航(关闭)