大家好，我是Clippp。今天為大家?guī)淼奈恼率?b>「網(wǎng)格」設(shè)計(jì)。網(wǎng)格是一個方便好用的設(shè)計(jì)方法，一起來看看什么是網(wǎng)格，網(wǎng)格有哪些類型，以及如何使用網(wǎng)格～
一、什么是網(wǎng)格？
網(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)格的重要性
網(wǎng)格為設(shè)計(jì)賦予形狀和層次結(jié)構(gòu)，引導(dǎo)用戶瀏覽頁面并找到需要的內(nèi)容。
網(wǎng)格有助于提高響應(yīng)性設(shè)計(jì)。桌面端通常需要使用多列網(wǎng)格來承載文本和圖像，但設(shè)計(jì)必須足夠靈活的壓縮列數(shù)以便適配不同設(shè)備。
三、網(wǎng)格的五種類型
基線網(wǎng)格
基線網(wǎng)格由文本所在的位置定義。它有助于為讀者創(chuàng)造良好的閱讀體驗(yàn)，尤其是在有大量文本的地方。
在網(wǎng)頁設(shè)計(jì)中考慮基線網(wǎng)格至關(guān)重要，考慮一下行間距如何影響頁面的可讀性。如果間距太緊，用戶很可能會放棄閱讀并離開網(wǎng)站。
手稿型網(wǎng)格
手稿型網(wǎng)格也稱為單列網(wǎng)格，是最簡單的網(wǎng)格結(jié)構(gòu)之一，適用于大型連續(xù)文本和圖像。本質(zhì)上它是大型矩形框，內(nèi)容占據(jù)大多數(shù)空間。
多列網(wǎng)格
多列網(wǎng)格有助于分解文本、照片和插圖，使用的列數(shù)越多，網(wǎng)格的排布就越靈活。
每列之間的空間稱為欄間距，它們的大小應(yīng)保持一致。
并非所有的多列網(wǎng)格都必須對稱。在很多博客網(wǎng)站中就運(yùn)用了非對稱的網(wǎng)格形式，主要內(nèi)容占據(jù)頁面三分之二的區(qū)域，其余三分之一可能是包含作者的信息的側(cè)邊欄。
模塊化網(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ù)量。
分層網(wǎng)格
分層網(wǎng)格在網(wǎng)頁設(shè)計(jì)中最常見。這些網(wǎng)格的目的是按重要性排列元素。
首先將最重要的對象放在頁面上，然后靈活地圍繞它們使用列、行和模塊來幫助組織內(nèi)容。
新聞和媒體相關(guān)類網(wǎng)站傾向于使用這種類型的網(wǎng)格來吸引用戶對某些文章的關(guān)注。例如上圖紐約時報(bào)的主頁就使用了分層網(wǎng)格結(jié)構(gòu)。
四、使用網(wǎng)格的技巧
知道了網(wǎng)格的不同類型后，接下來讓我們來了解一些在設(shè)計(jì)中更好地使用網(wǎng)格的技巧。
先考慮網(wǎng)格類型
在開始設(shè)計(jì)之前，請先考慮網(wǎng)格的類型，而不是把它放到最后并試圖讓設(shè)計(jì)適合網(wǎng)格。
嘗試打破網(wǎng)格
新手設(shè)計(jì)師在設(shè)計(jì)時可能會受到網(wǎng)格的限制。創(chuàng)建網(wǎng)格后，在設(shè)計(jì)決策合理的情況才完全可以打破網(wǎng)格。
網(wǎng)格使用的越多越會意識到它是一個指南，幫助我們更快更好地設(shè)計(jì)。
不要害怕留白
留白在設(shè)計(jì)中很重要。沒有必要填滿頁面的每個角落，考慮在各部分內(nèi)容之間留有適當(dāng)邊距，使用戶在瀏覽頁面時可以呼吸和暫停。
嘗試使用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)?40px。
12列網(wǎng)格系統(tǒng)具有足夠的靈活性。下面的示例中展示了如何在12列網(wǎng)格中使用3列布局添加內(nèi)容。
總結(jié)：學(xué)會分析網(wǎ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ì)中～
精彩推薦：
2、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
