网格的基础

概念来自于嘉文·安布罗斯和保罗·哈里斯的《网格设计》。

1.网格的概念

这里我引用蒂莫西·萨马拉和德里克·博德萨尔这两位大师对网格系统的理解,来让大家理解网格的基础概念。蒂莫西·萨马拉认为 -“在文字问题全部解决之后,网格真正的成功取决于设计师是否超越网格结构所蕴涵的整体性,然后用它来创造一部分动态的视觉表述,这些部分可以让读者保持对整本书中每一页的兴趣”。德里克·博德萨尔认为 – “在版式设计中,网格是最容易引起误解和误用的元素。网格只有在你想用的素材上时才会有用”。

01df655d4e3de3a80120695ca01abe

另外在了解一下罗伯特·劳森伯格先生对网格的理解 – 网格是用来给读者组织空间和信息的,它给整部作品提供了规划。网格给信息提供了围栏,同时也是规定和维持秩序的一种方法。虽然网格已经使用了许多个世纪,但是很多图表设计师还是把网格与瑞士人联系在一起。在20世纪40年代的时候,人们热切希望维持秩序,因而创造了种可以提供视觉信息并且更加系统化的方法。几十年后,网格设计被认为既单调又乏味。而如今,网络设计再次被看作是基础性的工具,无论是行业新手还是具备几十年经验的老手都依赖此种工具。

01cb6e5d468887a80120695c5b61eb

我这里再引用一下《秩序之美 – 网页中的网格设计》这本书中所阐述的对网格系统的观点,网格就是在混沌中建立规则。再引用《塑造和突破网格》书中的观点根据以上观点做结合得出 -“在混沌中建立规则,突破网格结构并打破规则”,就是网格系统的核心概念。这些观点结合起来,这就是我理解的网格系统的概念。

2.网格的构成

网格构成的概念:网格包括一套独特的对齐关系的原则,用于指导如何在一个版面中分配各个组成部分。版面中包含若干个不同的部分和构成,每个部分都有着不同的用途和功能。设计师也可以根据自身喜好,将某些部分从整体结构中去掉,这一切也取决于设计师如何理解材料、市场和读者的需求。网格的构成 – 大体结构:版面、版心、外缘留白 / 外页边距、订口、栏目、栏间空白、底部留白 / 底页边距。

网格的构成 – 大体结构 :

– 版面:版面是页面中所有构成部分的总和;

– 版心:版心是页面中主要内容的所在区域;

– 外缘留白 / 外页边距:外缘留白或外页边距有助于讲文本框纳入整体的设计中;

– 订口:订口是装订时所需要的留白,通常存在于两个页面之间的折叠部分;

– 栏间空白:两个栏目之间的分隔区域;

– 底部留白 / 底页边距:页面底部的留白区域;

0171e05d512687a8012187f4f9aa60

网格的构成 – 局部结构 :

– 空白:空白可以提供如注释和说明文字等二级信息。

– 基线:基线是网格的基本结构,用来引导文本和其他元素在设计中的布局。

– 栏目:栏目是有组织的放置正文的地方,并让读者容易阅读;

– 空间区:空间区可以为文字、广告、图像或其他信息构成特定区域的模块组或栏目组。

– 模块:模块是给网格内图像元素留出的空间,相连接的网格可以建议建立不同的行列模块。

– 标志:标志能标明出现在同一位置的素材的方位,包括页数、页首标题和页脚(标头、页脚),以及图标;

0136615d51268fa80120695c276cc8

3.网格的度量

在网格系统的中有两种度量:绝对度量和相对度量。网格系统本身有自己的绝对度量单位,例如英寸(inch)或磅(Pt,印刷字体大小的一种单位,1pt等于0.01384英寸,约1/72英寸)。在网格内部中很多元素可能会使用相对度量,来表示它们的大小和其他元素之间的关系。

01ff8d5d512697a80120695c3f4d12

运用网格系统时,可以从起始点就开始使用坐标。红色的线条是基线,它们之间的间隔为12p磅。首行、分栏一起构成一个坐标。一个模块单位有13条基线,每条间隔为12磅,因此版心高度是156磅(13×12)。

 

3.1 网格的度量 – 文字

文字经常以绝对单位磅来计算的。对于确定的长度,绝对单位能提供一个固定值,这便意味着设计师能有效的控制文字和基线之间的关系。文字和基线通常使用磅值(pt)来进行计算的,用毫米算也行,但要注意的是将文字和基线放在同一个度量单位下进行计算,这样会好做计算。

0109505d51269fa8012187f406a201

上图中就有一个两栏文本块。在这个例子中,一旦建立起网格系统,说明元素的度量可变性更强了,绝对度量单位便不是那么重要了。

3.2 网格的度量 – 图像

数码图像被用于设计时,通常是按照百分比缩小的,或者可以在程序中重设尺寸以适应特殊的空间要求。尽管如此,为了保证良好的印刷质量,印刷时图像的分辨率至少要保持在300dpi。而在屏幕上显示,其分辨率则至少要保持72dpi。

01dae65d5126a7a80120695c7f5fe2

就像上图所表现的这样,图像也能占据单个模块或覆盖一组模块。

 

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/2277.html

发表评论

登录后才能评论

评论列表(1条)