你注意過我們生活在網(wǎng)格之中嗎垂券？從屏幕上你能看到的像素排列拟淮，到多數(shù)人居住的城市規(guī)劃疯溺，你無法想象這些有趣橫縱線的視覺系統(tǒng)決定了多少形式。

難怪我們覺得自己如此被網(wǎng)格控制非迹，因?yàn)槲覀兊脑O(shè)計(jì)也是如此环鲤。在早期印刷設(shè)計(jì)——那個(gè)百年后「平面設(shè)計(jì)」才出現(xiàn)的年代纯趋，網(wǎng)格輔助印刷師安排頁面布局≡魇蓿現(xiàn)在，我們使用網(wǎng)格來組織軟件布白和網(wǎng)頁形式吵冒。雖然網(wǎng)格隱藏于頁面后纯命，但我們能感受到它的存在。

作為設(shè)計(jì)師痹栖，理解我們繼承的系統(tǒng)很重要——他們看起來很基礎(chǔ)亿汞。因此我們整理了從（相關(guān)）過去到現(xiàn)在藝術(shù)與設(shè)計(jì)中的網(wǎng)格簡史。在第一部分中揪阿，我們討論早期文藝復(fù)興時(shí)期的網(wǎng)格使用疗我、現(xiàn)代網(wǎng)格設(shè)計(jì)的誕生以及所有致力于印刷設(shè)計(jì)的人——比如圖書封面——都知道的東西咆畏。

過去的日子：「平面設(shè)計(jì)」前的網(wǎng)格

文藝復(fù)興時(shí)期，為了建立透視法則吴裤，數(shù)學(xué)\建筑的原則伴隨油畫藝術(shù)誕生——這種方法能傳達(dá)深度真實(shí)感旧找，與空間的水平線、消失點(diǎn)有關(guān)麦牺。

文藝復(fù)興油畫用數(shù)學(xué)原則來創(chuàng)建直線透視钮蛛，正如疊印直線顯示的這樣

文藝復(fù)興時(shí)期油畫看似和頁面布局迥乎不同，但正是建筑和視覺表達(dá)的結(jié)合首次產(chǎn)生了網(wǎng)格（雖然當(dāng)時(shí)它并不這么叫）剖膳。你會發(fā)現(xiàn)魏颓，正是「完美幾何體」的準(zhǔn)則導(dǎo)致了居中對稱的頁面布局——和現(xiàn)在我們使用的不完全一樣。但是吱晒，類似「黃金矩形」的觀念——比例為1：1.618的矩形甸饱，當(dāng)你從中減去一個(gè)正方形又會得到相同比例的矩形——仍是有深遠(yuǎn)影響的設(shè)計(jì)概念。

對黃金矩形的描述仑濒，來自Thinking With Type

13世紀(jì)柜候，建筑師Villard De Honnecourt設(shè)計(jì)出一個(gè)非常有名的圖表，用以在固定比例空白上產(chǎn)生頁面布局——這被我們認(rèn)為是「和諧」的設(shè)計(jì)躏精。這在現(xiàn)在仍是在諸如書籍封面等印刷物設(shè)計(jì)的指導(dǎo)原則渣刷。

Villard的圖表確定了從文藝復(fù)興到現(xiàn)在書籍的比例，正如retinart顯示的這樣

瑞士秩序：現(xiàn)代網(wǎng)格起源

隨著資本主義在十九世紀(jì)日趨成熟矗烛，人們開始把平面設(shè)計(jì)當(dāng)做職業(yè)辅柴，第一批人開始自稱設(shè)計(jì)師，例如工藝美術(shù)運(yùn)動中的William ?Morris瞭吃，開始尋找描述他們工作的名詞碌嘀。

直到大致一戰(zhàn)時(shí)期，網(wǎng)格在瑞士才進(jìn)入平面設(shè)計(jì)的字典歪架。瑞士是當(dāng)時(shí)極少的中立國之一股冗，它成為了全歐洲智慧難民的交流地。這也是極少的諸如紙墨印刷沒有定量供給之地和蚪。這種情況導(dǎo)致很多智者印刷大量多語言文檔止状，通常帶有法語，意大利語攒霹，德語還有英語的縱列怯疤。諸如Herbert Bayer和Jan Tschichold的排版師著手解決這種情況出現(xiàn)的設(shè)計(jì)問題。

這些設(shè)計(jì)師放棄了居中文字布局催束，而使用更「不對稱」的方法適配人們從左至右的閱讀順序集峦。這種方法將文本左側(cè)對齊、右側(cè)不對齊，時(shí)常將文本主體稍向左或向右偏移塔淤，為筆記留更多空間摘昌。

這頁內(nèi)容就是典型的現(xiàn)代不對稱頁面布局：左側(cè)對齊，右側(cè)不對齊高蜂，文本稍向一邊靠攏——在這個(gè)例子中是向右

三分法是另一個(gè)你可能很熟悉的網(wǎng)格原則第焰，這個(gè)原則基于類似的假設(shè)，即一個(gè)圖片的重點(diǎn)如果不在正中心妨马，可能會看起來更生動活潑挺举。

攝影中的三分法也反映了不對稱設(shè)計(jì)更加自然生動的原則。

一些頁面布局元素也從這些嘗試中產(chǎn)生烘跺。你應(yīng)該對他們都很熟悉：

gutter：文字列間的空間

column inch欄寸：文字欄垂直高度的量度

jump：文字流從一?欄底部到另一欄頂部湘纵，或到下一欄的延續(xù)

rail：在頁面最左或最右處的一個(gè)窄欄（很可能是其他欄的一半寬度），在比如報(bào)紙上提供目錄信息

hang line：有點(diǎn)像水平rail滤淳，這是分割頁面頂部信息（比如圖片）的水平線梧喷，從下部文字而來，看起來?像在「撐起」這條線

single column grid單欄網(wǎng)格：就像經(jīng)典書籍頁面的樣子

multi-column（vertical）grid多欄（垂直）網(wǎng)格：就像傳統(tǒng)報(bào)紙的樣子

modular gird模塊網(wǎng)格：一個(gè)橫縱相同分割的網(wǎng)格脖咐，形成一個(gè)特別靈活的圖文排版

（從上至下）：多欄網(wǎng)格铺敌，一張主要運(yùn)用縱向網(wǎng)格的報(bào)紙；模塊網(wǎng)格屁擅，展示這種做法的額外靈活性

當(dāng)三分法一建立偿凭，設(shè)計(jì)師就尋求突破它。網(wǎng)頁設(shè)計(jì)中網(wǎng)格的出現(xiàn)將是網(wǎng)格簡史的第二部分派歌。