今天和大家分享一個方法，能讓你提升效率，愛上做設計，那就是網格。

它在我的理解就像一個膠水一樣，把內容和設計結合起來，內容有很多種形式，各不相同，但是通過網格系統我們能將這些隱形的內容連接在一起，網格是設計中很重要的一部分。

那麼什麼是網格，網格的幾種類型，以及移動端如何使用呢？

什麼是網格？

網格是一種對齊工具，它由一些橫向和縱向的線組成，主要用到對齊圖形，文字以及圖片，主要建立這些內容的秩序和規則，最終保證設計一致性的一個基礎框架。這些線也只有設計師看的見，其實網格的運用在生活中很常見。

很多東西都是由於網格組成的，比如這個架子，每個格子放不同的刀具

圖書館的書架，都是由若干網格組成，通過有序的格子來放不同的內容

城市建設，都是建築師使用網格來佈局整個城市的規劃

wrod表格，通過有序的形式來佈局內容，網格其實無處不在

常見的數碼產品宣傳頁，還有優衣庫的衣服貨架等等，可以說網格在我們身邊無處不在，我們需要瞭解和學習網格。

網格的發展歷史

早在文藝復興時期，那時候繪畫對網格發展有了很大影響，藝術家們為了創造一個完美的幾何圖形，從而產生這種對稱的畫布佈局，上圖就是一個典型的案例，能代表那個時候畫家運用網格去畫畫。

包括那個時候的書籍，從印刷開始的，大概在15世紀時候，在每一頁書中間有一一個對齊的空間，保證每一個的內容的完整性。

而後隨著工業時代帶來，各種報紙海報，雜誌，廣告宣傳頁的興起，使得對印刷要求很大，設計師就必須解決不同人群閱讀內容的自然視覺動線，需要讓讀者很好的去閱讀報紙和雜誌內容。

瑞士設計的影響，在第一次世界大戰期間，保持中立的瑞士成為歐洲各地藝術家聚會的地方，由於印刷出版必須滿足多國家的語言，設計師需要一套網格系統來統一實現這個目標，網格系統也是髮端於瑞士的客觀排版設計(Objective Typography and Design)運動的一部分，這就是《平面設計中的網格系統》。該書自問世以來暢銷至今，實屬情理之中。

只要不嫌麻煩，任何研究網格的人都會發現，在網格系統的幫助下，能更快地解決設計中的問題，並讓設計更具功能性、邏輯性和視覺美感。

網格的基本要素

前面說了網格的基礎以及網格的歷史，那麼網格有哪些基礎元素呢？網格主要由單元欄，欄間距(也有叫水槽)，邊距組成。

單元格，主要是設計中用來填充內容的

欄間距，主要在設計中用來區隔內容和內容

網格的幾種類型

1. 手稿型網格

手稿型網格：也是最簡單的網格類型，常用在書籍上面比較多，它本質就是一個大型矩形框，內容占據了大多數空間。

適合場景：傳統書籍雜誌，手稿網格適合於都是文字的設計，但是也不局限於文字，圖片也可以當內容，在互聯網設計中，新聞類產品，偏內容閱讀比較適合手稿型網格。

2. 多列網格

多列網格：顧名思義，多列網格有幾列，大家可以這麼記住它，你創造的列越多，網格就越靈活，多列網格對於很多複雜的，不同的內容佈局非常有用，使用多列網格，可以為不同內容創建趨勢。

適用場景：絕大數產品，網頁，平面設計，這個多列網格也是現在運用比較廣泛的，很多產品都運用到。

3. 模塊化網格

模塊化網格：就是網格垂直和縱向拆分成多個模塊的網格，形成井字形模塊，每一個小模塊形成一個單元格，當我們需要面對比較複雜佈局，模塊化網格為頁面提供了靈活的內容格式。

適用場景：報紙，雜誌，電商設計，表單之類的場景。

4. 基線網格

基線網格：是設計中垂直間距的基礎結構，它主要用於保證頁面水平對齊的層次結構。

適用場景：文本對齊時候，圖片展現類似網站。

運用網格的好處

在移動產品設計中，人們使用的設備越來越多，從智能手錶到手機到iPad到PC，屏幕越來越多，設計師必須創建一套網格系統來組織內容，使得這套網格細節能適應各種場景和分辨率。

更清晰的一致性：網格是設計的基礎，比如頁面節奏，空白，都說影響設計很重要的因素，網格系統能，保證這些元素的一致性，有效的網格能引導我們的眼睛去閱讀，使我們更容易掃描屏幕上面內容，同時一致性也能幫助我們瞭解內容後採取下一步的行動。

提升閱讀性：人們大腦在不到一秒時間做出判斷，設計不合理，排版混亂的商品顯得不那麼值得買，好的排版能強化視覺層次結構。

團隊協作：網格系統本身就能保證團隊設計對齊一致性，好的網格系統能解決頁面中骨架統一性，減少在設計間距，留白上的不一致。

最後

關於網格系統我們會分為兩部分講解，下篇和大家帶來網格如何運用，定義多少列，內容壓住水槽怎麼辦，怎麼設置網格的參數，下篇見。

#專欄作家#

Sky，微信公眾號：我們的設計日記（ID：helloskys），設計交流可加微信：hellosky678，人人都是產品經理專欄作家。原支付寶體驗設計專家，阿裡巴巴天貓設計專家；10年知名互聯網公司設計經驗，對於產品從0到1、品牌定位、金融產品、設計規範、運營規範、大促等有豐富實戰經驗。

本文原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議