第一個(gè)系列我打算先寫網(wǎng)格，國內(nèi)也很缺乏這塊的知識(shí)，現(xiàn)在能找到的關(guān)于網(wǎng)格的文獻(xiàn)，大多數(shù)都是從國外網(wǎng)站直接翻譯過來的，對(duì)此我感到很遺憾。正因如此，我才想把這塊的知識(shí)分享出來供大家學(xué)習(xí)。另外網(wǎng)格系統(tǒng)的框架也是非常的龐大，從網(wǎng)格的歷史，規(guī)則、解構(gòu)網(wǎng)格等，都是需要去學(xué)習(xí)的知識(shí)， 也請(qǐng)大家認(rèn)真學(xué)習(xí)吧。

另外這篇文章參考了眾多文獻(xiàn)，參考最多的是只印了一版的《網(wǎng)格模板實(shí)用攻略》，編著是RotoVision出版社。也已經(jīng)絕版了。這本書翻譯的很糟糕，里面很多句子都不太通順，不過它傳達(dá)的思想是值得我們學(xué)習(xí)的。

目錄

 

1、什么是網(wǎng)格

2、把控好網(wǎng)格

3、網(wǎng)格的價(jià)值

4、網(wǎng)格與柵格

5、網(wǎng)格的歷史

6、風(fēng)格派與包豪斯

7、網(wǎng)格與瑞士風(fēng)格

8、網(wǎng)格與數(shù)學(xué)

9、可視網(wǎng)格

1.什么是網(wǎng)格

網(wǎng)格系統(tǒng)是由頁邊距、欄、欄距、字體、圖片、元素間距組成的，它們之間的比例關(guān)系與布局劃分，構(gòu)成了一個(gè)基本的網(wǎng)格系統(tǒng)?；镜木W(wǎng)格尺寸必須滿足易讀性的要求，要讓觀眾可以閱讀并容易閱讀。網(wǎng)格中所有元素的尺寸和位置都是由心理學(xué)以及美學(xué)所決定的，字體的大小是由不同層級(jí)的標(biāo)題和正文決定的。

通常一列的寬度的不會(huì)超過9個(gè)英文單詞（具體需求具體分析），雖然說將這些詞組歸納成組塊太過規(guī)整，但為了確保單詞的可讀性，就有必要這么做了。

2.把控好網(wǎng)格

對(duì)于設(shè)計(jì)師來說，網(wǎng)格系統(tǒng)十分復(fù)雜且很難把控，盡管如此大多數(shù)設(shè)計(jì)師還是很偏愛它的。設(shè)計(jì)是個(gè)偏靈感且隨意性強(qiáng)的工作，設(shè)計(jì)師們使用它時(shí)很容易被限制住，并使設(shè)計(jì)作品太過規(guī)整從而失去設(shè)計(jì)感，因此設(shè)計(jì)師對(duì)網(wǎng)格系統(tǒng)也是愛恨交加。

設(shè)計(jì)師要把控好網(wǎng)格系統(tǒng)，提煉出要素的靈動(dòng)性，保持要素的規(guī)整性。要做到亂中有序并簡中求精。

3.網(wǎng)格的價(jià)值

不管對(duì)于平面設(shè)計(jì)師、網(wǎng)頁設(shè)計(jì)師、還是UI用戶界面設(shè)計(jì)師，網(wǎng)格系統(tǒng)都有它存在的價(jià)值的。而網(wǎng)格系統(tǒng)的核心價(jià)值就是在“混沌中建立規(guī)則”，在空間中約束元素和要素，使他們具有關(guān)聯(lián)性。

如果不去制定網(wǎng)格系統(tǒng)，整個(gè)空間會(huì)變得雜亂無章，混沌不堪，元素和要素之間無法產(chǎn)生關(guān)聯(lián)，失去了統(tǒng)一性并影響美感與視覺感官的判斷。

4.網(wǎng)格與柵格

網(wǎng)格與柵格的本質(zhì)其實(shí)是相同的，都以英文單詞“Grid”來表示。但我理解的，它們之間的差別在于“規(guī)格”上的不同。一般我在平面設(shè)計(jì)中把它稱為“網(wǎng)格”。在網(wǎng)頁端或移動(dòng)端中稱它為“柵格”。網(wǎng)格與柵格從漢字上來理解就是“網(wǎng)”和“刪”的差別，大家也可以用聯(lián)想式記憶法來記一下。

我們先理解一下平面設(shè)計(jì)和網(wǎng)頁或App的差別。平面設(shè)計(jì)一般用到的紙張規(guī)格（尺寸），不管是英國、美國、日本或ISO采用的德國DIN紙張規(guī)格標(biāo)準(zhǔn)，只要是紙張全部都是固定的尺寸，寬度和高度都是固定的，也就是絕對(duì)的。而網(wǎng)頁或App的設(shè)備尺寸不是固定的，寬度是根據(jù)設(shè)備的寬度決定的，高度則是隨著內(nèi)容的多少來決定的，也就是相對(duì)的。

在平面設(shè)計(jì)中，當(dāng)我們畫好格子后，把文本和圖片填入到固定的格子當(dāng)中就可以了。而網(wǎng)頁或移動(dòng)端的柵格系統(tǒng)，高度無法確定，就導(dǎo)致無法給格子配置高度值。所以網(wǎng)格與柵格本質(zhì)上是相同的，重點(diǎn)就差在一個(gè)可以確定格子高度。下圖中所示，如果采用網(wǎng)格系統(tǒng)來制定網(wǎng)頁，圖中紅色模塊的高度一旦發(fā)生變化，所有高度都對(duì)不上，網(wǎng)格沒什么意義了。

柵格的寬度可以隨著不同設(shè)備的寬度來配置不同的數(shù)值。例如網(wǎng)頁常用設(shè)備寬度為1920px，柵格的總寬度可以設(shè)置不同的固定寬度，如：960px、980px；1000px；1120px等，這些寬度都是固定的。而柵格的高度無法確定，就沒法繪制格子并布置要素。

5.網(wǎng)格的歷史

最早的網(wǎng)格原型，是13世紀(jì)由建筑設(shè)計(jì)師 Villard de Honnecourt 畫的圖表，其中的比例布局十分和諧，直到現(xiàn)在也依舊應(yīng)用在書籍設(shè)計(jì)當(dāng)中。

到了15世紀(jì)中葉印刷術(shù)的出現(xiàn)，到18世紀(jì)晚期的工業(yè)革命，印刷術(shù)主要用于印刷《圣經(jīng)》。很多設(shè)計(jì)師開始用最完美的幾何劃分方法來確定古典書籍的版心，也就是整個(gè)頁面與留白之間的關(guān)系。如下圖所示，它使用了黃金分割確定了文本的面積，也就是用黃金分割確定了版心，使用斐波那契數(shù)列確定了邊距的比例。

16世紀(jì)晚期的《圣經(jīng)》的手抄本。其中有一頁采用了兩端對(duì)齊的排版方式，文字排成兩欄并以中心軸為對(duì)稱軸，這種左右對(duì)齊（兩端對(duì)齊）的排版規(guī)則持續(xù)了450年，當(dāng)時(shí)還沒有“網(wǎng)格”這個(gè)概念。

從這以后，通過藝術(shù)家、印刷工人、抄寫員等藝術(shù)工作者對(duì)內(nèi)容，形式、比例、空間的不斷摸索，便慢慢形成了網(wǎng)格體系。18世紀(jì)中葉，工業(yè)革命開啟了以資本為基礎(chǔ)的經(jīng)濟(jì)形式，平面設(shè)計(jì)因此而誕生了。平面設(shè)計(jì)的任務(wù)是向有文化的人傳達(dá)越來越多不同的信息，印刷需求也不斷增加，設(shè)計(jì)逐漸注意競爭力。

到了19世紀(jì)末，有人開始把平面設(shè)計(jì)當(dāng)成職業(yè)，并稱自己為設(shè)計(jì)師，代表人物有手工藝美術(shù)的威廉 · 莫里斯，他確信形式和功能是密不可分的。后來因手工藝美術(shù)運(yùn)動(dòng)的影響，設(shè)計(jì)師們嘗試在二維平面上表現(xiàn)三維空間感，并做出了進(jìn)一步的探索。

6.風(fēng)格派與包豪斯

1917年，荷蘭建筑師、設(shè)計(jì)師、畫家提奧·范·杜斯堡創(chuàng)立了風(fēng)格派。對(duì)于網(wǎng)格設(shè)計(jì)而言，這一運(yùn)動(dòng)的重要性在于它探討了功能決定形式，以及功能與形式之間的邏輯關(guān)系。風(fēng)格主義者注重簡約化，認(rèn)為簡單的形式是容易實(shí)現(xiàn)，并容易被大眾接受的。只用直線的形式來表現(xiàn)并去除多余的裝飾。

1919年，一批杰出的藝術(shù)家和設(shè)計(jì)師，在德國魏瑪（曾經(jīng)德國的文化中心）創(chuàng)建了包豪斯，由建筑師瓦爾特 · 格羅皮烏斯擔(dān)任校長。他認(rèn)為建筑，平面設(shè)計(jì)、工業(yè)設(shè)計(jì)、繪畫、雕塑等都是相關(guān)聯(lián)的，這一認(rèn)識(shí)對(duì)字體和圖形設(shè)計(jì)的發(fā)展產(chǎn)生了深遠(yuǎn)的影響。

20世紀(jì)20年代，揚(yáng) · 奇肖爾德在他的兩本書中《新字體排版》（1928）和《印刷設(shè)計(jì)》（1935）闡述了他的排版原則。他認(rèn)為設(shè)計(jì)師類似工程師，并認(rèn)為強(qiáng)制性的非對(duì)稱是現(xiàn)代主義的核心，他說應(yīng)該使用“自然”而不是“形式主義”的方法來創(chuàng)造新的設(shè)計(jì)，那這里的“自然”我理解的“主觀唯心主義”。他的作品仍然體現(xiàn)的是美學(xué)上的精致與動(dòng)態(tài)化（動(dòng)勢(shì)）。

7.網(wǎng)格與瑞士風(fēng)格

20世紀(jì)中期（第二次世界大戰(zhàn)，1939~1945），瑞士在戰(zhàn)爭期間是中立國，戰(zhàn)亂時(shí)不少流亡的知識(shí)分子在這里避難。那時(shí)的出版物必須使用法語、德語和意大利語三種官方語言，因此官方出版物使用了多欄的結(jié)構(gòu)，采用了模塊化的方法。一些瑞士藝術(shù)家、設(shè)計(jì)師在其繪畫和平面中探尋邏輯與形式，并撰寫關(guān)于網(wǎng)格方面的知識(shí)，并把這些知識(shí)稱為整體性設(shè)計(jì)。如果沒有比例系統(tǒng)，無論作品多么有獨(dú)立性，都會(huì)減弱版面樣式中元素之間的關(guān)系 - 埃米爾 · 魯?shù)隆?

8.網(wǎng)格與數(shù)學(xué)

到了20世紀(jì)末，卡爾 · 格斯納在1962年為雜志《丘比特》設(shè)計(jì)的網(wǎng)格，根據(jù)它的數(shù)學(xué)的精巧性，被認(rèn)為接近完美的。網(wǎng)格和頁面布局的不同取決于創(chuàng)意的靈活性和數(shù)學(xué)的性。要考慮開本，要考慮基線，還要考慮欄數(shù)與頁編輯，線的單位也要細(xì)分的更（1pt或2pt）。通過電腦可以很容易把網(wǎng)格劃分為更小的模塊。網(wǎng)格可以通過很多方法組合，并在設(shè)計(jì)中仍保持凝聚力。

9.可視網(wǎng)格

傳統(tǒng)網(wǎng)格都是隱性的，存在于作品中的邏輯規(guī)則，是不會(huì)顯現(xiàn)出來的。但在20世紀(jì)50年代，模塊化網(wǎng)格系統(tǒng)的先驅(qū)者荷蘭設(shè)計(jì)師維姆 · 克勞威爾。他在1967年在阿姆斯特丹市美術(shù)館舉辦的Vormgevers展覽中，設(shè)計(jì)的海報(bào)和目錄冊(cè)的布局使用了可視的網(wǎng)格，網(wǎng)格也成為了字體設(shè)計(jì)的基礎(chǔ)，并影響至今?，F(xiàn)代很多藝術(shù)作品也依舊采用可視網(wǎng)格進(jìn)行創(chuàng)意設(shè)計(jì)。

至今

網(wǎng)格系統(tǒng)是由前輩們的思想結(jié)合體，由前輩們不斷完善并總結(jié)形成的一套體系，并影響至今。從平面設(shè)計(jì)到網(wǎng)頁設(shè)計(jì)，再到移動(dòng)端設(shè)計(jì)的演變，現(xiàn)已成為設(shè)計(jì)師日常工作中的一部分。網(wǎng)格系統(tǒng)能使設(shè)計(jì)作品具有較強(qiáng)的關(guān)聯(lián)性，隱性的邏輯使頁面更具美感，讓作品更靈動(dòng)也更具有條理性和統(tǒng)一性，使要素歸一。