教程 | 版面網格的分類和設置方法 平面設計排版基礎技法
時間：2023-09-27 22:30:02 | 來源：網站運營
時間：2023-09-27 22:30:02 來源：網站運營
教程 | 版面網格的分類和設置方法 平面設計排版基礎技法：?在版面設計中，我們常用構建網格系統(tǒng)（Grids System）的方式來安排圖文排布，以使得
信息傳達清晰、布局美觀、閱讀節(jié)奏合理。在實際操作的過程中，我們要根據具體的工作內容來選擇合適的網格類型，并設置合理的參數。不少同學反應，在這一過程經常遇到疑問，在本期教程中逸藝君就詳細的為大家介紹一下版面網格的分類和具體的設置方法，同學們做好筆記哦~
網格系統(tǒng)的分類
第一類：手稿網格/單欄網格 Manuscript Grid/Single Grid/Single Column Grid 單欄網格是所有網格的最基礎形式，多用于以文字為主版面，我們在日常生活中看到的各種書籍通常應用單欄網格。單欄網格分隔出頁面的頁眉（header）、頁腳（footer）和邊距（margins），以一個方框的形式呈現，框內是版心部分，因此是其他各種網格的基礎。各種編輯軟件的默認網格也是單欄網格，如Word，Keynote等，只不過它的方框線通常是隱藏的，所以容易被忽略。
Manuscript Grid第二類： 分欄網格 Column Grid 分欄網格適用于圖文混排的版面，我們看到的雜志、網站、報紙等媒體多用分欄網格來系統(tǒng)性地排布大量文字與圖片結合的版面。雜志排版以三欄最為普遍，分欄可以是等寬，也可以按比例設置差異化欄寬。傳統(tǒng)報紙常見六欄，而桌面網頁設計目前以十二欄為主。
三欄Column Grid三欄雜志版面不等寬三欄雜志版面十二欄網頁十二欄網頁在app的UI設計方面，也可以通過分欄網格的方式來規(guī)劃圖文第三類： 模塊網格 Modular Grid 模塊網格在分欄的基礎上進一步分行（row），在版面上形成規(guī)律排列的方格。
網格模塊非常適合用來布置復雜多變的內容，規(guī)律化的方形網格為內容的排列方式提供了更多的可能性，靈活性很強。當單純的分欄網格無法滿足需求的時候，模塊網格則可以給予設計師很好的幫助。
一個21格的模塊網格使用模塊網格排布的單純文本內容，與Single Grid和Column Grid相比節(jié)奏感更強，具有靈活的閱讀體驗。設計師可以更好的掌控閱讀節(jié)奏。
在圖文結合排版方面，如上圖，模塊網格能夠為圖文的位置、面積提供更多變化的空間，這是與分欄網格最大的區(qū)別。
第四種：基線網格 Baseline Grid 基線網格并不是一種獨立的形式，上述三種網格設置了基線之后都可以成為基線網格。使用基線網格主要是為了方便大面積的文本排版，使得閱讀的流暢感更強。但是要注意的是，基線并不是必須顯示的，因為像模塊網格這樣的系統(tǒng)本身在設置的時候就是根據文字的行數關聯(lián)設置了尺寸，所以即使沒有設置為基線網格，文本的基線也是存在的。
基線模塊網格基線模塊網格的應用第五種：層級網格 Hierarchical Grid 層級網格主要用于web相關的設計，它的邏輯是
按照重要性來組織頁面元素，使得用戶能夠按照主次順序來接收到信息。由于web界面信息的多樣性而基于以上傳統(tǒng)的網格形式發(fā)展出了層級網格。同時，網頁的特點是內容的分類、位置、面積、重要性是相對固定的，而內容本身是一直在更新的，所以層級網格應運而生。層級網格的設置是比較自由的，大多數是基于模塊網格再結合網頁的內容來確定。
典型的web層級網格
網格系統(tǒng)的設置方法
接下來我們就進入實戰(zhàn)的部分，用InDesign來演示一下手動設置模塊網格的方法。
第一步：設置版心和分欄 首先在新建文檔的時候，我們就可以在邊距和分欄對話框中設置好版心和分欄的數據。大家可以根據自己的偏好來設置邊距，逸藝君這里設置的參數為上15mm/下30mm/內15mm/外30mm的雙倍比例，當然邊距的比例還有很多種可以自行選擇。
因為這里我們打算做一個A4的圖文混排的頁面，所以逸藝君打算制作一個18格的模塊網格，所以這里先把頁面劃分為三欄。在InDesign的預設中，三欄的欄間距默認為5mm，是軟件設計師預先為大家調好的一個非常合適的數值，我們使用默認即可。
經過設置，我們得到的頁面基本框架如下：
第二步：預設字號并計算行數接下來我們選擇字號為常用的8點，行高15點。那么下一步就需要計算一下版心一共能裝下多少行正文。InDesign的字號單位是點，這是常規(guī)的印刷品單位，
1pt≈0.35mm，因此我們可以得出版心的高度是252mm÷0.35mm/pt=
720點，由此我們把版心的高度由毫米換算為點數。而我們預設的文字行高為15點，那么版心能夠盛放的正文行數為
48行。
第三步：設置網格水平參考線下面我們需要把版心橫向劃分為6份，那么經過計算每一份容納的正文為48÷6=
8行。所以我們可以手動
每數過8行拉一根參考線，如下圖：
第四步：設置網格垂直間隔最后一步則是設置每一行橫向網格之間的垂直間隔（Gutter），用來放標注信息等文字。需要注意的是，橫向的間隔通常要是正文行高的倍數，這樣在文本進行跨模塊布置的時候才不會出現行位混亂。在這里我們設置間隔為單行高度，也就是每個模塊的第八行用來作為Gutter，所以我們再拉出對應的橫向參考線如下圖：
我們就得到了這個18格的版面網格系統(tǒng)：
同學們可以自己設置好常用的網格系統(tǒng)文件，把各種參數和字號等信息都預設好
儲存成模板文件，這樣就方便直接調用，而不需要反復的計算設定。
軟件自動生成網格如何操作？
看過了手動計算并建立參考線之后，你可能還是會感嘆有點麻煩，所以最后我們來看一下用Adobe軟件們如何通過輸入參數來自動生成版面網格系統(tǒng)。
在排版一哥
InDesign中，我們可以通過
版面→創(chuàng)建參考線來設置網格：
Illustrator中，常用的方法是先創(chuàng)建一個與版心等大的矩形框，然后通過點擊
對象→路徑→分割為網格，來建立：
最后，還有不少同學用
Photoshop排版，那么你可以通過
視圖→新建參考線版面來建立網格：
本期的分享都到這里，同學們有問題歡迎聯(lián)系老師哦~
關鍵詞：平面,方法,設計,排版,技法,基礎,設置,版面
在線咨詢
