第4章版式設計的網格系統

4.1網格在版式設計中的重要性4.2網格的類型4.3網格在版式設計中的應用課題概述：本章主要介紹了版式設計的網格系統。其中，通過網格在版式設計中的重要性進行分析，了解網格的類型與網格在版式設計中的具體運用分析。教學目標：通過學習，對網格的類型及應用進行了解，學習網格在版式中的主要表形類型，并對其進行分析，應用到實際版式設計中。章節重點：了解版式中網格的重要性，并熟知網格的根本類型，以及網格在版式設計中的具體運用。網格在版式設計中的重要性網格構成是現代版式設計最重要的根底構成之一。作為一種行之有效的版面設計形式法那么，將版面中的構成元素，點、線、面協調一致地編排在版面上。4.1.1什么是網格圖1網格網格是用來設計版面元素的一種方法，主要目的是方便設計師在設計的時候有明確的設計思路，構建完整的設計決策。在版式設計中，將版面分為一欄、二欄、三欄以及更多的欄，再將文字與圖片編排在其中，給人視覺上的美感。網格設計在是實際版式運用中具有嚴肅的、規那么的、簡潔的、樸實的等版面藝術表現風格。〔見圖1〕圖2網格的排列網格在版式設計中有著約束版面的作用，其設計特點主要強調了比例感、秩序感、整體感、時代感與嚴肅感，使整個版面具有簡潔、樸實的版面藝術表現風格，在版式設計中成為主要的構成元素。

4.1.2網格的重要性圖3雜志版式網格作為版式設計中的重要根底要素之一，構建出良好的骨架是很重要的。在版式設計中，一個好的網格結構可以幫助人們在設計的時候根據網格的結構進行版式設計。在編排的過程中有明確的版面結構。〔見圖2～圖3〕使用網格表達理性化、穩定的視覺效果，沿著版面上的網格設計，固定版面的四個角形成中心點，起到穩定畫面的作用，同時網格版面給人穩定、信賴的感覺。以下是網格對于信息編排與版面結構進行分析，了解網格的重要性特征。圖4三欄網格版面如圖4中，設計師使用了簡單、對稱的三欄網格以及較寬的頁面留白，整個版面使用了有力的網格，使版面具有穩定感。〔1〕網格具有版面需求性網格作為版式設計中重要構成元素，為版面設計提供了一個結構，使整個設計過程更加輕松，也讓設計師對于版面風格決策更簡單化。〔2〕網格具有信息組織的功能性組織頁面信息是網格的根本功能性表達。在現代版面編排中，網格的這種運用方式變得更加進步、精確，從以前簡單的文字編排到現在的圖文混排，網格的運用使整個版面中圖文編排具有規律性特征。〔見圖5〕圖5圖文編排的網格結構〔3〕網格具有閱讀的關聯性在版面編排中設計師有很大的自由空間，進行版面元素編排，但是人們在閱讀版面中圖片與文字信息的方式就意味著在一個版面中，必定存在著有一局部類容更吸引人們注意，表現更突出。〔見圖6〕圖6網格版面網格的類型版式設計中網格的構成主要表現為對稱式網格與非對稱式網格設計兩種。在版式設計中起著約束版面結構的作用，在約束的同時表達出整個版面的協調與統一性。圖7雜志版式4.2.1對稱式網格圖8對稱網格所謂對稱式網格，就是在版面設計中，左右兩個頁面結構完全相同。它們之間產生了相同的內頁邊距和外頁邊距，外頁邊距由于要寫一些旁注的原因所以要比內頁邊距多出一些。對稱式網格設計式根據比例而創立的，而不是根據測量創立的。〔見圖7〕對稱式網格的目的主要是組織信息，平衡左右版面的作用。〔見圖8〕通過對對稱網格的建立的了解與學習，下面我們來學習怎么區分對稱式欄狀網格與對稱式單元網格。它們在版式設計中分別又起著什么樣的作用。圖9書籍內頁版面欄的寬窄直接影響文字的編排，欄可以使文字編排更有秩序，使版面更嚴謹。但是欄也有一些缺乏之處，如果標題變化不大將會影響著整個版面文字缺乏活力，使版面顯得單調。〔見圖9〕〔1〕對稱式欄狀網格對稱欄狀網格的主要目的是組織信息以及平衡左右頁面的設計，根據欄的位置和版式的寬度，左右頁面的版式結構完全相同。對稱式欄狀網格中的欄指的是印刷文字的區域，可以使文字按照一種方式編排。對稱式欄狀網格分為單欄網格、雙欄網格、三欄、四欄、甚至多欄網格等。下面我們來了解一下對稱式欄狀網格的不同版式對版面產生什么樣的影響。圖10單欄網格1〕單欄網格，在單欄式網格版式中，文字的編排過于單調，容易使人產生閱讀疲憊的感覺。單欄網格一般用于文字性書籍，如小說、文學著者等。因此在單欄式網格中文字的長度一般不要超過60字。〔見圖10〕2〕雙欄對稱式網格，主要表現為能更好的實現版面平衡，使閱讀更流暢。雙欄網格在雜志版面中運用十分廣泛，但是雙欄對稱式網格的版面缺乏變化，文字的編排比較密集，畫面顯得有些單調。〔見圖11〕圖11雙欄對稱網格圖12三欄對稱網格3〕三欄對稱網格，將版面左右頁面分為三欄，適合版面信息文字較多版面，可以防止行字數過多造成閱讀時候的視覺疲勞感。三欄網格的運用使版面具有活潑性，打破了單欄的嚴肅感。〔見圖12〕4〕多欄網格，這中版式設計適合于編排一些有關表格形式的文字，比方說聯系方式、術語表、數據目錄等信息。這種版式的單欄太窄式不適合編排正文的。〔見圖13〕圖13五欄對稱網格對稱式單元網格在版面編排中，將版面分成同等大小的網格，再根據版式的需要編排文字與圖片。這樣的版式具有很大的靈活性，可以隨意編排文字和圖片。在編排過程中，單元格之間的間隔距離可以自由放大或者縮小，但是每個單元格四周的空間距離必須相等。

圖14單元格對稱網格版式設計中單元格的劃分，保證了頁面的空間感，也使版式排列具有規律性。整個版面給人規那么、整潔、規律的視覺效果。〔見圖14〕〔2〕對稱式單元網格圖15非對稱欄狀網格4.2.2非對稱形式非對稱網格是指左右版面采用同一種編排方式，但是在編排的過程中并不像對稱網格那樣絕對。非對稱網格形式在編排的過程中，根據版面需要調整版面的網格欄的大小比例。使整個版面更靈活，更具有生氣。

非對稱網格一般適用于設計散頁，散頁中也許有一個相對于其他寬較窄的欄，便于插入旁注，為設計的創造性提供了時機，同時保持了設計的整體風格。〔見圖15〕非對稱網格主要分為非對稱欄狀網格與非對稱單元網格兩種。

圖16非對稱欄狀網格所謂非對稱欄狀網格是指在版式設計中，雖然左右兩頁的網格欄數根本相同，但是兩個頁面并不對稱。圖16是單欄網格結構版式，同樣是采用了圖片的形式，使版面具有生趣，由于版面中左右頁面的頁邊距的不同，形成了非對稱欄網格版式結構。〔見圖16〕非對稱單元格在版式設計中屬于比較簡單的版面結構，也是根底的版式輔助網格。非對稱單元格中采用交多的圖平編排形式，使整個版面更生動，避開版面的呆板無趣。〔見圖17〕圖17非對稱單元格網格〔1〕非對成欄狀網格〔2〕非對稱單元網格圖18基線網格4.2.3基線網格基線網格通常是不可見的，但它卻是平面設計師的根底。基線網格提供了一種視覺參考，它可以幫助版面元素的準確編排與對齊頁面，是憑感覺無法到達的版面效果。如圖18中，基線一些水平的直線〔洋紅色〕，為了引導文字信息的編排，也可以幫助圖片的文字編排提供參考。基線網格的大小寬度與文字的大小有著密切關系。版面中藍色線代表網格的分欄，頁面以白色呈現。圖19基線網格基線網格的間距根據字體的大小進行增大或者減小，以滿足不同字體的大小需求。圖19中，基線的間距被增加了，為了方便更大的字體與行距像匹配。

圖2045°成角網格4.2.4成角網格成角網格在版面中往往很難設置，網格可以設置成任何角度。成角網格發揮作用的原理跟其他網格一樣，但是由于成角網格是傾斜的，設計師在版面編排時，能夠以打破常規的方式展現自己的風格創意。如圖20中，網格與基線成45°角度，這樣的版面編排方式，使頁面內容清晰、均衡具有方向性。

圖21采用了兩個角度的編排形式，這個網格使得文本具有四個編排的方向。圖2145°成角網格從前面兩張對角版面可以看出，在設置對角版面傾斜角度與文字方向性時，應充分考慮到人們閱讀習慣。〔見圖22〕圖22成角網格網格在版式設計中的應用網格設計主要特征是能夠保證版面的統一性，因此在版式設計運用中，設計師根據網格的結構形式，在有效的時間內解決版面結構的編排，從而獲得成功的版式設計。圖23對稱網格4.3.1網格的建立圖24欄狀網格與單元格一套好的網格結構可以幫助設計師明確設計風格，排除設計中隨意編排的可能，使版面統一規整。設計師可以利用兩者的不同風格來編排出靈活性較大，協調統一的版面構成設計。〔見圖23〕如圖24，設計網格采用三欄四單元格的方式建立的。圖26單元格網格建立圖25網格建立比例網格可以利用不同的數學原理，通過以下兩種方式可以實現網格創立。圖26是由34×55的單元網格構成，內緣留白5個單元格，外緣留白8個單元格。在斐波納契數列中，5的后一為數字是8，正好是外緣的留白大小。8后面的數字是13，這是底部留白的單元格數。以這種方式來決定正文的區域的大小，在版面的寬度與高度比上獲得連貫和諧的視覺效果。〔見圖26〕〔1〕比例關系創立網格〔2〕單元格創立網格利用比例關系，能夠確定版面的布局與網格。頁面簡潔，文字段落安排與空間具有十分和諧的關系。對稱式網格不是測量出來的，而是按照比例關系創立的。〔見圖25〕圖28非對稱網格4.3.2網格的編排形式設計的構圖由圖像和文本元素構成，從本質上將是它們構成了頁面的表現形式。網格的構建形式主要是依據版面主題的需要而決定的，文字多圖片少的版面和圖片多文字少的版面之間就有很大區別，下面我們來看看網格在實際版面中的具體編排形式。圖27中，版面分為兩欄的網格結構，將文字與圖片編排在版面中，運用兩欄網格結構使文字信息傳達具有版面空間感，打破一欄的疲勞感。〔見圖27〕圖27兩欄網格運用圖片與文字的比照關系，使網格版面具有活潑的版面氣氛，打破網格過于規整的視覺效果。〔見圖28〕圖30說明式網格編排圖29多語言網格在版式設計中，網格的編排形式主要分為以下幾種：單版面中信息過于復雜，出現了假設干個不同的元素時候，在信息傳達上很容易造成閱讀困擾，閱讀起來也比較困難。此時可以通過網格的形式，對版面信息進行調整。圖30中，版面采用圖片放大，文字編排在下方的網格形式，使整個版面顯得穩定、層次清晰。〔1〕多語言網格編排〔2〕說明式網格編排在版面中出現了多種文字的情況下，通常內容驅動著設計的開展與完善，而不是僅僅憑創造性來編排版面。圖29是一張翻譯的版面，灰色模塊代表可以容納多種語種翻譯的空間。〔見圖29〕網格的主要功能是加強設計的秩序感。在表現數據較多的數據表中，網格的編排運用十分重要。下面以一個記賬薄為例，運用網格結構形式，使左右信息清晰明了。圖31數量信息網格運用

〔3〕數量信息網格運用圖31中，采用兩欄的網格形式，將文字信息與數字清晰的編排在版面上，比較適合記賬薄的編排形式，讓人一目了然。〔見圖31〕圖32網格與無網格比照版面圖33網格與無網格比照版面打破網格的約束使版面設計更具有自由性，但是很難把握版面的平衡，就算是很優秀的設計師也很難準確的把握畫面的平衡感。如圖32～圖33中，整個版面采用網格與無網格的比照形式進行版面編排。從版面文字的編排版面雖然沒有網格的結構，但是可以看出在版面中，文字編排整齊具有規律性。圖34無網格版面4.3.3打破網格圖34中，文字采用中對齊的文字塊形式，在沒有網格結構的情況下仍然能清晰的傳達信息，使整個版面層次結構清晰可見，表達了不規那么單元格的編排形式。教學實例——網格的不同運用產生怎么視覺效果。1.菜譜版面圖35網格是版式設計的常用的一種版面形式，可以給設計師在編排版面元素的時候提供結構信息，使版面編排整齊，到達信息傳遞的目的。如圖35是西餐廳的菜譜設計，該菜譜在版面編排的時候，根據對版面元素的了解選擇適當的網格結構，使其到達信息傳達明確。在該版面中，采用大小圖片的比照關系，使整個版面具有版面的活潑性，選擇一張滿版出血圖，運用圖片中元素的生動感，能有效地勾起人們的食欲。圖37圖362.畫冊版面網格具有很大的靈活性，在版面運用不同的網格結構，給人不同的視覺效果。如圖36是一張時尚女性品牌宣傳畫冊展開的設計版面，在編排這樣的版面時，注意版面的文字與圖形的編排結構，使版面具有個性新穎的視覺版面效果，符合品牌形象宣傳。如圖37中，版面采用網格結構中的兩欄對稱編排的網格結構，使整個版面左右具有強烈的穩定性。運用圖片的比照編排使版面具有活潑感。文字的大小比照關系，打破對稱網格的沉悶感，在視覺傳達上具有版面的活潑感。設計點評通過對版式設計網格構成及其在實際版式中運用的學習，通過對網格結構版式的學習，下面我們根據所學知識分析下面版式設計中的網格運用及其對整個版式構成的影響及其作用。

圖38點評：本設計為雜志版面設計。該雜志版面采用雙欄網格形式，使版面結構清晰，圖片與文字根據網格結構編排在版面中，使版面具有一定的穩定性。采用不對稱的網格形式，打破了網格設計過分規整的版面布局。文字采用左右均齊的編排形式，配合了圖片的編排，使整個版面具有統一協調感。圖38圖39圖40圖39點評：本設計為雜志內頁版面設計。該版面采用雙欄網格與單元格網格形式的結合，將版面劃分出明確的結構，文字與圖片按照網格的結構編排在版面中，表達了版面的穩定與整潔。該版面層次清晰，文字采用左右均齊的編排形式，表達了版面的整潔與樸實感。圖片運用單元格的形式編排，展現了整個版面的活潑性。圖40點評：該設計為一張DM版面設計。從整個版面結構來看，版面采用了無網格的版面形式，使版面在編排的時候更具有靈活性。在該版面中飾品采用挖圖的形式，使飾品的展示更具有活潑感，圖形大小比例的變化增添了版面的跳躍率。文字的編排起到了說明作用，到達了產品宣傳的目的，采用無網格的版式設計展現版面的自由性，符合DM的宣傳形式。圖42圖41圖41點評：該設計是是一張網頁版面設計。該網頁采用對稱式單元格網格的編排形式，該網頁設計中每個單元格的距離為零，圖片集中編排在版面中心，使整個版面結構更緊湊，更具有規律性。版面的四周空出很大面