網(wǎng)格是頁面的骨架，無論創(chuàng)建像雜志一樣的印刷頁面，還是圖文結(jié)合的網(wǎng)站頁面，都需要使用網(wǎng)格來組織設(shè)計(jì)內(nèi)容并創(chuàng)造良好的體驗(yàn)。
使用網(wǎng)格可以消除隨機(jī)決策。通過正確地使用網(wǎng)格，能準(zhǔn)確知道各類元素應(yīng)該放在何處，而不是將元素隨意擺放在頁面上，這也有助于加速設(shè)計(jì)過程。
網(wǎng)格為設(shè)計(jì)賦予形狀和層次結(jié)構(gòu)，引導(dǎo)用戶瀏覽頁面并找到需要的內(nèi)容。
網(wǎng)格有助于提高響應(yīng)性設(shè)計(jì)。桌面端通常需要使用多列網(wǎng)格來承載文本和圖像，但設(shè)計(jì)必須足夠靈活的壓縮列數(shù)以便適配不同設(shè)備。
1. 基線網(wǎng)格
基線網(wǎng)格由文本所在的位置定義。它有助于為讀者創(chuàng)造良好的閱讀體驗(yàn)，尤其是在有大量文本的地方。
在網(wǎng)頁設(shè)計(jì)中考慮基線網(wǎng)格至關(guān)重要，考慮一下行間距如何影響頁面的可讀性。如果間距太緊，用戶很可能會放棄閱讀并離開網(wǎng)站。
2. 手稿型網(wǎng)格
手稿型網(wǎng)格也稱為單列網(wǎng)格，是最簡單的網(wǎng)格結(jié)構(gòu)之一，適用于大型連續(xù)文本和圖像。本質(zhì)上它是大型矩形框，內(nèi)容占據(jù)大多數(shù)空間。
3. 多列網(wǎng)格
多列網(wǎng)格有助于分解文本、照片和插圖，使用的列數(shù)越多，網(wǎng)格的排布就越靈活。
每列之間的空間稱為欄間距，它們的大小應(yīng)保持一致。
并非所有的多列網(wǎng)格都必須對稱。在很多博客網(wǎng)站中就運(yùn)用了非對稱的網(wǎng)格形式，主要內(nèi)容占據(jù)頁面三分之二的區(qū)域，其余三分之一可能是包含作者的信息的側(cè)邊欄。
4. 模塊化網(wǎng)格
模塊化網(wǎng)格與多列網(wǎng)格相似，不同之處在于行數(shù)增多。模塊化網(wǎng)格多用于比較復(fù)雜的布局中，為頁面提供靈活的內(nèi)容格式。
例如 Everlane 網(wǎng)站就使用模塊化網(wǎng)格來組織商品的選擇。
YouTube 主頁是另一個使用模塊化網(wǎng)格的示例。除了左側(cè)的邊欄提供常用鏈接外，所有視頻內(nèi)容都被組織到一個 4 列的模塊化網(wǎng)格中，以最大限度地增加用戶在滾動時可以瀏覽的視頻數(shù)量。
5. 分層網(wǎng)格
分層網(wǎng)格在網(wǎng)頁設(shè)計(jì)中最常見。這些網(wǎng)格的目的是按重要性排列元素。
首先將最重要的對象放在頁面上，然后靈活地圍繞它們使用列、行和模塊來幫助組織內(nèi)容。
新聞和媒體相關(guān)類網(wǎng)站傾向于使用這種類型的網(wǎng)格來吸引用戶對某些文章的關(guān)注。例如上圖紐約時報的主頁就使用了分層網(wǎng)格結(jié)構(gòu)。
知道了網(wǎng)格的不同類型后，接下來讓我們來了解一些在設(shè)計(jì)中更好地使用網(wǎng)格的技巧。
1. 先考慮網(wǎng)格類型
在開始設(shè)計(jì)之前，請先考慮網(wǎng)格的類型，而不是把它放到最后并試圖讓設(shè)計(jì)適合網(wǎng)格。
2. 嘗試打破網(wǎng)格
新手設(shè)計(jì)師在設(shè)計(jì)時可能會受到網(wǎng)格的限制。創(chuàng)建網(wǎng)格后，在設(shè)計(jì)決策合理的情況才完全可以打破網(wǎng)格。
網(wǎng)格使用的越多越會意識到它是一個指南，幫助我們更快更好地設(shè)計(jì)。
3. 不要害怕留白
留白在設(shè)計(jì)中很重要。沒有必要填滿頁面的每個角落，考慮在各部分內(nèi)容之間留有適當(dāng)邊距，使用戶在瀏覽頁面時可以呼吸和暫停。
4. 嘗試使用 960 網(wǎng)格系統(tǒng)
960 網(wǎng)格系統(tǒng)提供基于 960 像素寬度的常用尺寸來簡化 web 開發(fā)流程。
960 網(wǎng)格遵循以下結(jié)構(gòu)：
- 總寬度為 960px；
- 最多使用 12 列，每列寬 60 像素；
- 在每列的左側(cè)和右側(cè)使用 10px 的間距；
- 總內(nèi)容區(qū)域?yàn)?940px。
12 列網(wǎng)格系統(tǒng)具有足夠的靈活性。下面的示例中展示了如何在 12 列網(wǎng)格中使用 3 列布局添加內(nèi)容。
更多網(wǎng)格系統(tǒng)：
當(dāng)我們?yōu)g覽頁面時都要注意底層的網(wǎng)格。多思考設(shè)計(jì)師使用的哪種網(wǎng)格？使用它能帶來哪種體驗(yàn)？
思考的越多越能學(xué)以致用，越能將優(yōu)秀的網(wǎng)格設(shè)計(jì)應(yīng)用到自己的設(shè)計(jì)中～
歡迎關(guān)注作者微信公眾號：「Clip設(shè)計(jì)夾」
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論！每天贏獎品
點(diǎn)擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機(jī)派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計(jì)師平臺，提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評論 為下方 1 條評論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓