跳到主要内容

设计师的网格理论指南

无论您是在网页还是印刷设计中工作,都需要了解网格理论。虽然一些设计师积极地避开网格,转而采用更直观的自由形式布局,但最成功的做法是多年来一直使用网格 - 他们在破坏规则之前理解规则。

对于自学成才的设计师来说,作为设计工具的网格背后的许多理论和合理化并没有被典型的博客文章和会议讨论所覆盖。我们在这里用这个口袋大小的网格指南直接设置,包括一小部分理论。让我们开始吧。

01.网格建立一个仪表和节奏

a grid in black and white

网格将帮助引导观众获得他们想要的信息

网格的最重要目的 - 至少是图形设计 - 是建立一套关于如何在布局中定位元素的指南。有效网格不仅可以为设计提供节奏,还可以定义仪表。

这是使内容可访问的重要部分,并帮助观众了解在布局中找到下一条信息的位置。它设定了期望并定义了规则,音色以及 - 在某些情况下 - 设计的声音。将网格视为提供观众旅行的路线图。

02.网格定义和反映比例

网格的一个关键方面是它有助于确定和定义比例的能力。在印刷品中,比例最常见的是媒体的大小;例如,纸张的形状和方向通常反映在布局内包括的图像的大小和形状中。

这感觉很舒服,因为读者通过诸如纸张之类的输送机构的物理形状和尺寸从根本上理解布局的背景。

在网络上,这种反射的想法并不那么重要,但网格可以以相同的方式用于将内容锚定回屏幕。屏幕可以更流畅,作为设计师,不可能以相同的信心知道将使用什么尺寸和形状的屏幕来查看内容。

无论如何,比例和比例是布局中的重要工具,因此使用网格来确定和实施规则有助于定义使读者能够访问和理解内容的所有重要路标。

03.网格与黄金比例一起工作

the golden ratio

根据黄金比例设计您的设计有助于确保令人愉悦的布局

确定性网格“系统”的整个概念是设计领域中相对较新的发明。从绘图和书写的早期阶段就已经直观地存在网格,但直到最近才以学术的方式考虑布局,因此它从未与其他最佳实践布局规则隔离开来。交叉的一个这样的例子是黄金比例与网格相遇的地方。

黄金比例(也称为中庸之道)确定元素的最令人满意的比例集,并简化为“三分法则”。当与网格结合使用时,这些简单的尺寸,位置和比例规则可以帮助确保布局感觉连贯,但也具有美学吸引力。

这很重要,因为它再一次可以帮助使内容更容易访问。请记住,网格是内容背后隐形的粘合剂 - 在大多数情况下,它应该对观看者透明。

04.网上有一个960网格系统

A 960px grid

960px网格可以通过多种不同方式进行划分,使其成为一种灵活的选择

一旦您了解了网格系统的优势,网页设计师就会采用网格。为了使事情更实用,一些常见的尺寸已成为标准。最常见的是960px网格系统。

960px是一个很好的尺寸,因为它有很多因素(整数可以分为):1,2,3,4,5,6,8,10,12,15,16,20,24,30,32, 40,48,60,64,80,96,120,160等。能够以这种方式划分网格为列宽提供了很大的灵活性,提供了一个多用途,可重复使用的网格系统。

毋庸置疑,众多设计人员一直在忙着将960px网格整合成一组有用的CSS库。一个这样的例子可以在960.gs,但也有其他可用。

05.网格提供了坚实的基础

正如我们所见,网格主要用于帮助确定布局中的定位和平衡。提供这种坚实的基础可以帮助确保以易于理解的顺序呈现内容,但它也可以用于突出显示内容的特定区域,只需将它们从网格中分离出来即可。

观众将自然地识别这些突破并被吸引到他们身边,让设计师有机会玩布局的层次结构并调整一件作品的意义。

06.网格与其他关键设计原则一起使用

12 column grid layout

一旦掌握了基础知识,就可以开始脱离网格

不要忘记,网格只是一个工具,可以用来增强布局的许多基本原则。不要过于严格地使用网格 - 一些最好的设计会破坏网格布局的所有规则,并且这样做会更加成功。

了解如何以及何时使用网格只能来自经验,所以实验。查看下面关于设计理论的其他文章,以获取可用于增强设计的其他方便工具和原则。

本文最初发表于杂志。在这里订阅网

相关文章:



翻译字数超限