网站首页 > 平面设计> 文章内容

平面设计课堂:平面设计的网格系统的知识和历史

※发布时间:2019-11-4 16:59:34   ※发布作者:habao   ※出自何处: 

  梦到房子着火【摘要】大家周五好~今天环球网校小编为大家带来的是,平面设计的网格系统的基础知识。平面设计的网格系统的框架也常的庞大,从平面设计的网格系统的历史,规则、解构网格等,都是需要去学习的知识。小编今天就先为大家一下,平面设计的网格系统的概念:

  网格系统是由页边距、栏、栏距、字体、图片、元素间距组成的,它们之间的比例关系与布局划分,构成了一个基本的网格系统。基本的网格尺寸必须满足易读性的要求,要让观众可以阅读并容易阅读。网格中所有元素的尺寸和都是由心理学以及美学所决定的,字体的大小是由不同层级的标题和正文决定的。

  通常一列的宽度的不会超过9个英文单词(具体需求具体分析),虽然说将这些词组归纳成组块太过规整,但为了确保单词的可读性,就有必要这么做了。

  对于设计师来说,网格系统十分复杂且很难把控,尽管如此大多数设计师还是很偏爱它的。设计是个偏灵感且随意性强的工作,设计师们使用它时很容易被住,并使设计作品太过规整从而失去设计感,因此设计师对网格系统也是爱恨交加。

  不管对于平面设计师、网页设计师、还是UI用户界面设计师,网格系统都有它存在的价值的。而网格系统的核心价值就是在“混沌中建立规则”,在空间中约束元素和要素,使他们具有关联性。

  如果不去制定网格系统,整个空间会变得杂乱无章,混沌不堪,元素和要素之间无法产生关联,失去了统一性并影响美感与视觉感官的判断。

  网格与栅格的本质其实是相同的,都以英文单词“Grid”来表示。但我理解的,它们之间的差别在于“规格”上的不同。一般我在平面设计中把它称为“网格”。在网页端或移动端中称它为“栅格”。网格与栅格从汉字上来理解就是“网”和“删”的差别,大家也可以用联想式记忆法来记一下。

  我们先理解一下平面设计和网页或App的差别。平面设计一般用到的纸张规格(尺寸),不管是英国、美国、日本或ISO采用的DIN纸张规格标准,只要是纸张全部都是固定的尺寸,宽度和高度都是固定的,也就是绝对的。而网页或App的设备尺寸不是固定的,宽度是根据设备的宽度决定的,高度则是随着内容的多少来决定的,也就是相对的。

  在平面设计中,当我们画好格子后,把文本和图片填入到固定的格子当中就可以了。而网页或移动端的栅格系统,高度无法确定,就导致无法给格子配置高度值。所以网格与栅格本质上是相同的,重点就差在一个可以确定格子高度。

  下图中所示,如果采用网格系统来制定网页,图中红色模块的高度一旦发生变化,所有高度都对不上,网格没什么意义了。

  栅格的宽度可以随着不同设备的宽度来配置不同的数值。例如网页常用设备宽度为1920px,栅格的总宽度可以设置不同的固定宽度,如:960px、980px;1000px;1120px等,这些宽度都是固定的。而栅格的高度无法确定,就没法绘制格子并布置要素。

  平面设计的网格系统是由前辈们的思想结合体,由前辈们不断完善并总结形成的一套体系,并影响至今。从平面设计到网页设计,再到移动端设计的演变,现已成为设计师日常工作中的一部分。网格系统能使设计作品具有较强的关联性,隐性的逻辑使页面更具美感,让作品更灵动也更具有条和统一性,使要素归一。好啦,今天的内容就到这里了,更多精彩请持续关注本网站。