掌握這套網格排版技巧，版式不高級都難

很多人想學習些關于網格設計的詳細經驗及方法。

在準備了大量素材及資料后，今天咱們的這篇關于網格的方法文章，終于來啦。本文過于干貨，SO，記筆記的小本本，準備起來~~

第一：什么是網格？

在掌握網格的設計方法之前，咱們得先知道，到底什么是網格？為什么會有網格系統這一說？網格系統的存在，是為了解決設計什么樣的問題？

實際上，說到網格的歷史，得追溯到文藝復興時期。為了達到美的極致，藝術家從繪畫中找到了完美的比例分布圖，并嘗試以輔助線來實現 「完美」 構圖的方法。

△ Masaccio, 'The Tribute Money,' Brancacci Chapel, 1425.

在13世紀，法國的建筑設計師 Villard de Honnecourt 將網格系統及黃金比例進行了結合，創建了一個這樣的圖表，固定版面中內容的結構及邊距，來實現完美的布局。而這套方法，直到至今都仍在使用，大量的雜志排版、書籍排版都能看到這套方法的影子。

所以，網格的存在，最主要就是為了解決設計美感的問題，通過網格讓雜亂無章的信息能通過一個較好的結構來進行約束，保障信息高效傳達的同時，充分提升版面設計的美感。

1. 網格的結構

網格實際上，是一種結構，通過線的垂直或者相交，來構建一個參考界線。通過這個參考界線，我們可以在一個單一的容器中，把容器里的內容，以參考線進行對齊，來有秩序的布局組織并羅列分布。從而實現一個較好的視覺秩序感，提升閱讀效率的同時增加美感。

因為網格是一種結構，所以網格本身是不一定可見（少部分作品會使用網格做裝飾），但這種結構會映射到內容元素的布局，影響信息的排列美感及閱讀效率。所有在有確定了網格的邊界和約束后，設計師就可以根據網格，來對內容的位置比例，進行調整約束元素的坐標，達到一個比較理想的版式設計。

環顧我們的生活周圍，實際上也能看到很多網格的運用場景。比如我很喜歡的這套宜家網格柜子~

不過網格目前運用的最為廣泛的場景，還是在書籍、雜志的版式設計中。實際上，網格系統誕生的初衷也是為了解決印刷制版的問題。所以從印刷術的興起，網格就開始誕生了 ，并演繹的越來越豐富，越來越系統。

2. 網格的制版

在平面設計中，網格系統更常見，特別是用于書籍的裝幀及印刷場景。所以如果有從事平面設計或者是從事視覺相關行業的同學，我推薦有機會也可以讀讀下面這本書。

這本書是由瑞士的設計師約瑟夫·米勒–布羅克曼 編寫的《平面設計中的網格系統》，文中主要介紹了在平面設計中，網格的功能和使用方法，旨在為平面和空間的設計師們提供一個實際的工具，讓他們可以從概念、組織結構和設計上更有效、 自信地處理和解決視覺問題。

書中很多方法及版式，基本上可以現學現用，掌握起來也非常方便。

「事實上，絕大多數的設計師都不知道、也不理解為什么要建立這樣的一個秩序系統。所以，如果想要合理、功能地運用網格系統，那就必須仔細地研究網格的所有原理。只要不嫌麻煩，任何研究網格的人都會發現，在網格系統的幫助下，他都能更快地解決設計中的問題，并讓設計更具功能性、邏輯性和視覺美感。
——約瑟夫·米勒－布羅克曼 」

當然，我更推薦大家閱讀瀏覽紙質版本，更利于查閱。而且這本書的紙質版，手感相當不錯，我自己也在某東上買了本，日常沒事的時候翻翻看，提升審美的同時，順便提升自己的版式能力。這里也給大家附上我的購買地址，貼心吧~~

第二：網格的組成部分

講了網格的歷史，接下來咱們就開始講正式的網格使用方法啦。

目前網格設計主要運用在兩大場景，一個是印刷讀物，比如海報、書籍、封面等，而另外一個就是電子設備的熒幕，比如 iPhone、iPad、Windows 等，常見于 APP 設計、H5設計及 Web 設計中。

在這些不同場景的網格設計中，都會有一些很通用的基礎組件部分，如邊距、列寬、水槽、以及交叉的模塊，正是這些基礎的元素組成了復雜的網格系統。所以在使用網格設計方法做圖之前，我們需要先了解每個元素的具體含義以及其具體用法。

1. 網格邊距

網格邊距指的是內容外部邊緣距離容器的空白距離，在紙質設備中，容器就是紙張的大小，在界面設計里，容器就是設計稿的尺寸分辨率。這個邊距，一方面是為了信息不超出安全距離，二方面也主要是為了讓內容看起來，能更加的聚焦在中心區域，以防信息太過于貼邊導致的不利于閱讀。

在APP設計中，也會用到邊距這個概念。基于@2x尺寸，很多APP內容到屏幕的邊距，都采用的是24px，比如淘寶、支付寶、微博等。但也有不少的APP采用的是32px的邊距，比如微信、QQ、知乎等，這個大家可以截圖，縮到750的寬度，自行量~~當然，文章后面也會詳細講這塊怎么定比較好

2. 列寬及水槽

除去邊距，在內容區域的中心部分，網格主要由列寬及水槽組成，列寬就是每列中間的寬度，水槽就是每兩列的中間預留區域。列決定網格的復雜程度，而水槽決定內容的疏密程度。

3. 交叉模塊

這個指的就是網格中的交叉區域，實際上是一個空間單位。我們可以把固定的圖片或者是段落，直接填充在這個模塊里。當然，后面也有案例來解讀。

所有的網格，基本上都是由上面的基礎元素組成。正是這些，組成了龐大且復雜的網格系統 Gird System

第三：三種常見的網格

在我們的設計當中，目前這三種網格最為常見，且這三種也能滿足我們日常的大部分需要。

1. 單列網格

在咱們目前設計中，其實最常見的，就是這種單列的網格。這種單列的網格大多數以水平，或者是垂直的形態出現。比如你看到的現在咱們發的這篇文章，實際上它就是一種以水平形態的單列網格所組成，文字與文字中間的距離，就組成了水渠，它也是目前最簡單的一種網格。

這種其實我們用文字的行高，就可以控制了，不需要設置特別多的信息。保證每一列的距離是一樣的即可。

2. 多列網格

多列網格，顧名思義就是有多列的網格，會包含交叉關系。實際上，創建的列數越多，你的網格在使用過程中覆蓋面會越廣，能對齊的內容也會越多，不過處理不好的話，信息也會越碎。

咱們根據這個網格，簡單排一些文字，看看效果

再把線去掉，順便加點顏色看看，再修飾一下細節~~

其實還是比較的簡單，當然，我這個只是隨意拼湊，小伙伴們可以在收藏本文后，抽時間自己動手試試~~相信肯定會比我這個好

3. 交叉網格

交叉網格也比較好理解，其實就是基于水平及垂直領域的交叉網格。這種網格的節奏感非常好，適合在海報、雜志、封面版本中使用。包括在部分App以及Web的場景中，也可以使用這種布局方式。

比如：

是不是明白許多啦，再強調一句，光看是不行的，這里我鼓勵各位小伙伴們，多動手進行練習嘗試，只有動手了，這些知識才能轉化成你自己的能力！加油，奧利給！

第四：界面設計中，如何使用網格布局

那么在界面設計當中，如何使用網格來約束版式，讓設計看起來更整齊、更規律、更美觀？其實方法一樣的，無非只是容器的不同。

1. 先定邊距

在規劃網格之前，咱們的第一步實際上是需要先定內容到容器的邊距，這個邊距定好了后，咱們才能開始后面的網格制定。

通常在APP設計中，常見的邊距有24、32、40，這3個單位，信息比較密集的，通常會使用24這個單位，而信息比較寬松，偏工具型的產品，則會使用40的這個單位。當然，也有很多產品，選擇了比較中立的32。

△ 圖中 ③ 綠色區域為邊距，② 藍色區域為水槽，① 紅色區域為邊距

在Web或者是PPT的封面設計中，由于屏幕本身就是橫向的，所以咱們的邊距可以定的更大一些，通常為100、200、300不等，這個可以根據個人風格喜好來定。

2. 確定列數

在確定了邊距之后，很重要的一步就是需要確定列數了。定義使用多少列，這個直接會影響到頁面的信息疏密以及靈活程度。在APP設計中，比較流行的有 4-6 列，而在Web設計中，10-12 列則是非常的主流

在做PPT或者是網頁的時候，我最喜歡還是使用12列，因為它其實最靈活，而且大小不大不小，剛剛合適~~大家可以對應下面這張圖（基于@1x），來決定自己設計稿中，列數的數量是多少。

3. 設定水槽寬度

邊距及列數都確定下來了后，咱們其實需要定的，就是水槽的寬度了。

在移動端設計中，我建議水槽的距離，最小尺寸為16，其次以4為單位往上遞增，比如16、20、24、28、32、36，可以根據產品的類型來定義這個水槽的寬度。如果你的屏幕信息密度很高，那么我建議使用20、24這種小距離的，如果密度非常低，整個屏幕里都沒什么內容，那么可以使用32、36等大水槽邊距。

在Web或者PPT封面設計中，則是以8為單位整加比較合適，比如16、24、32、40、48、56，這種大寬屏的尺寸，在定義水槽邊距的開放度會更高。

列跟水槽，sketch自帶的工具其實都可以實現，我們用這個工具，能很輕松的達到自己想要的效果。在PS里，可能更多的是需要靠自己繪制矩形量尺寸，然后來拉取輔助線。

4. 按照網格調整設計稿

待網格定好后，我們再根據網格，去制定界面中元素的間距及尺寸即可，盡量保證各個元素的垂直間距是一致的。

網格定義好了之后，其實后面就很簡單了，就是按照網格，咱們來約束內容的邊界了，我們可以通過手動把文字的邊距，或者圖片的尺寸，來控制到跟網格一樣大小，調整整個頁面的和諧程度。

第五：熟練掌握&插件提效

方法掌握了后，實際上就是需要自己日常多收藏一些優秀的網格作品，其次多加練習，尋找網格排版的手感。畢竟只有不斷練習，不斷發現問題、總結問題，你才能牢牢的掌握知識，提升自己的動手能力。

不要完全被網格約束

網格實際上也只是一種參考線，并不是需要完全約束內容，比如有的文字長度會超出網格線，實際上完全參考網格，也會出現問題。所以網格最終只是參照，不要完全刻意約束，避免出現適得其反的效果。

橫向的水槽高度需要保持統一

在APP設計中，不同信息的高度不一致，所以我們很難用等距網格去約束它，更多的時候是去約束模塊與模塊的間距。在那種大模塊與大模塊的間距中，咱們的水槽高度盡量保持統一。

2. 網格插件神器下載

最后為了方便大家制定網格，我這里也給大家推薦一些制定網格的插件神器，非常好用，推薦指數五顆星。

Bootstrap Grid（ Sketch 使用）

用這個插件，可以在 Sketch 里輕松創建自定義網格，不需要那么多繁瑣的設置，簡單兩步就能搞定！

還支持針對不同的尺寸，自定義生成不同的網格參考線~~

flavor（ Sketch 使用）

更多網格設計技巧：

部分文獻參考資料

• 「A Brief History of Grids,」 Lucienne Roberts, Graphics
• 「The Secret Law of Page Harmony,」 Retinart
• 「Responsive layout grid 」Material Design Team
• 「Building Better UI Designs With Layout Grids」

歡迎關注作者的微信公眾號：「UX小學」