设计网格的历史History of the design grid

你注意过我们生活在网格之中吗?从屏幕上你能看到的像素排列,到多数人居住的城市规划,你无法想象这些有趣横纵线的视觉系统决定了多少形式。

难怪我们觉得自己如此被网格控制,因为我们的设计也是如此。在早期印刷设计——那个百年后「平面设计」才出现的年代,网格辅助印刷师安排页面布局。现在,我们使用网格来组织软件布白和网页形式。虽然网格隐藏于页面后,但我们能感受到它的存在。

作为设计师,理解我们继承的系统很重要——他们看起来很基础。因此我们整理了从(相关)过去到现在艺术与设计中的网格简史。在第一部分中,我们讨论早期文艺复兴时期的网格使用、现代网格设计的诞生以及所有致力于印刷设计的人——比如图书封面——都知道的东西。

过去的日子:「平面设计」前的网格

文艺复兴时期,为了建立透视法则,数学\建筑的原则伴随油画艺术诞生——这种方法能传达深度真实感,与空间的水平线、消失点有关。

文艺复兴油画用数学原则来创建直线透视,正如叠印直线显示的这样

文艺复兴时期油画看似和页面布局迥乎不同,但正是建筑和视觉表达的结合首次产生了网格(虽然当时它并不这么叫)。你会发现,正是「完美几何体」的准则导致了居中对称的页面布局——和现在我们使用的不完全一样。但是,类似「黄金矩形」的观念——比例为1:1.618的矩形,当你从中减去一个正方形又会得到相同比例的矩形——仍是有深远影响的设计概念。

对黄金矩形的描述,来自Thinking With Type

13世纪,建筑师Villard De Honnecourt设计出一个非常有名的图表,用以在固定比例空白上产生页面布局——这被我们认为是「和谐」的设计。这在现在仍是在诸如书籍封面等印刷物设计的指导原则。

Villard的图表确定了从文艺复兴到现在书籍的比例,正如retinart显示的这样

瑞士秩序:现代网格起源

随着资本主义在十九世纪日趋成熟,人们开始把平面设计当做职业,第一批人开始自称设计师,例如工艺美术运动中的William  Morris,开始寻找描述他们工作的名词。

直到大致一战时期,网格在瑞士才进入平面设计的字典。瑞士是当时极少的中立国之一,它成为了全欧洲智慧难民的交流地。这也是极少的诸如纸墨印刷没有定量供给之地。这种情况导致很多智者印刷大量多语言文档,通常带有法语,意大利语,德语还有英语的纵列。诸如Herbert Bayer和Jan Tschichold的排版师着手解决这种情况出现的设计问题。

这些设计师放弃了居中文字布局,而使用更「不对称」的方法适配人们从左至右的阅读顺序。这种方法将文本左侧对齐、右侧不对齐,时常将文本主体稍向左或向右偏移,为笔记留更多空间。

这页内容就是典型的现代不对称页面布局:左侧对齐,右侧不对齐,文本稍向一边靠拢——在这个例子中是向右

三分法是另一个你可能很熟悉的网格原则,这个原则基于类似的假设,即一个图片的重点如果不在正中心,可能会看起来更生动活泼。

摄影中的三分法也反映了不对称设计更加自然生动的原则。

一些页面布局元素也从这些尝试中产生。你应该对他们都很熟悉:

gutter:文字列间的空间

column inch栏寸:文字栏垂直高度的量度

jump:文字流从一�栏底部到另一栏顶部,或到下一栏的延续

rail:在页面最左或最右处的一个窄栏(很可能是其他栏的一半宽度),在比如报纸上提供目录信息

hang line:有点像水平rail,这是分割页面顶部信息(比如图片)的水平线,从下部文字而来,看起来�像在「撑起」这条线

single column grid单栏网格:就像经典书籍页面的样子

multi-column(vertical)grid多栏(垂直)网格:就像传统报纸的样子

modular gird模块网格:一个横纵相同分割的网格,形成一个特别灵活的图文排版

(从上至下):多栏网格,一张主要运用纵向网格的报纸;模块网格,展示这种做法的额外灵活性

当三分法一建立,设计师就寻求突破它。网页设计中网格的出现将是网格简史的第二部分。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容

  • 在「设计网格的历史」中,我们概括了文艺复兴起源及20世纪设计网格的发展,探索有700年历史的和谐比例原则是如何继续...
    王小其阅读 897评论 0 4
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,156评论 2 237
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,751评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,111评论 25 707
  • 我们重新开始吧 在哪里 不如就在这个醉生梦死的地方 太平盛世 我们喝完酒 背影摇晃 我们都不敢看对方的 眼 我们都...
    留子尧阅读 258评论 4 9