什么是網格？

網格是頁面的骨架，無論創(chuàng)建像雜志一樣的印刷頁面，還是圖文結合的網站頁面，都需要使用網格來組織設計內容并創(chuàng)造良好的體驗。

使用網格可以消除隨機決策。通過正確地使用網格，能準確知道各類元素應該放在何處，而不是將元素隨意擺放在頁面上，這也有助于加速設計過程。

網格的重要性

網格為設計賦予形狀和層次結構，引導用戶瀏覽頁面并找到需要的內容。

網格有助于提高響應性設計。桌面端通常需要使用多列網格來承載文本和圖像，但設計必須足夠靈活的壓縮列數以便適配不同設備。

網格的五種類型

1. 基線網格

基線網格由文本所在的位置定義。它有助于為讀者創(chuàng)造良好的閱讀體驗，尤其是在有大量文本的地方。

在網頁設計中考慮基線網格至關重要，考慮一下行間距如何影響頁面的可讀性。如果間距太緊，用戶很可能會放棄閱讀并離開網站。

2. 手稿型網格

手稿型網格也稱為單列網格，是最簡單的網格結構之一，適用于大型連續(xù)文本和圖像。本質上它是大型矩形框，內容占據大多數空間。

3. 多列網格

多列網格有助于分解文本、照片和插圖，使用的列數越多，網格的排布就越靈活。

每列之間的空間稱為欄間距，它們的大小應保持一致。

并非所有的多列網格都必須對稱。在很多博客網站中就運用了非對稱的網格形式，主要內容占據頁面三分之二的區(qū)域，其余三分之一可能是包含作者的信息的側邊欄。

4. 模塊化網格

模塊化網格與多列網格相似，不同之處在于行數增多。模塊化網格多用于比較復雜的布局中，為頁面提供靈活的內容格式。

例如 Everlane 網站就使用模塊化網格來組織商品的選擇。

YouTube 主頁是另一個使用模塊化網格的示例。除了左側的邊欄提供常用鏈接外，所有視頻內容都被組織到一個 4 列的模塊化網格中，以最大限度地增加用戶在滾動時可以瀏覽的視頻數量。

5. 分層網格

分層網格在網頁設計中最常見。這些網格的目的是按重要性排列元素。

首先將最重要的對象放在頁面上，然后靈活地圍繞它們使用列、行和模塊來幫助組織內容。

新聞和媒體相關類網站傾向于使用這種類型的網格來吸引用戶對某些文章的關注。例如上圖紐約時報的主頁就使用了分層網格結構。

使用網格的技巧

知道了網格的不同類型后，接下來讓我們來了解一些在設計中更好地使用網格的技巧。

1. 先考慮網格類型

在開始設計之前，請先考慮網格的類型，而不是把它放到最后并試圖讓設計適合網格。

2. 嘗試打破網格

新手設計師在設計時可能會受到網格的限制。創(chuàng)建網格后，在設計決策合理的情況才完全可以打破網格。
網格使用的越多越會意識到它是一個指南，幫助我們更快更好地設計。

3. 不要害怕留白

留白在設計中很重要。沒有必要填滿頁面的每個角落，考慮在各部分內容之間留有適當邊距，使用戶在瀏覽頁面時可以呼吸和暫停。

4. 嘗試使用 960 網格系統(tǒng)

960 網格系統(tǒng)提供基于 960 像素寬度的常用尺寸來簡化 web 開發(fā)流程。

960 網格遵循以下結構：

• 總寬度為 960px；
• 最多使用 12 列，每列寬 60 像素；
• 在每列的左側和右側使用 10px 的間距；
• 總內容區(qū)域為 940px。

12 列網格系統(tǒng)具有足夠的靈活性。下面的示例中展示了如何在 12 列網格中使用 3 列布局添加內容。

更多網格系統(tǒng)：

總結：學會分析網格

當我們?yōu)g覽頁面時都要注意底層的網格。多思考設計師使用的哪種網格？使用它能帶來哪種體驗？

思考的越多越能學以致用，越能將優(yōu)秀的網格設計應用到自己的設計中～

歡迎關注作者微信公眾號：「Clip設計夾」