大家好，我是Clippp监嗜。今天為大家?guī)淼奈恼率?b>「網(wǎng)格」設(shè)計谐檀。網(wǎng)格是一個方便好用的設(shè)計方法，一起來看看什么是網(wǎng)格裁奇，網(wǎng)格有哪些類型桐猬，以及如何使用網(wǎng)格～
一、什么是網(wǎng)格刽肠？
網(wǎng)格是頁面的骨架溃肪，無論創(chuàng)建像雜志一樣的印刷頁面，還是圖文結(jié)合的網(wǎng)站頁面音五，都需要使用網(wǎng)格來組織設(shè)計內(nèi)容并創(chuàng)造良好的體驗(yàn)惫撰。
使用網(wǎng)格可以消除隨機(jī)決策。通過正確地使用網(wǎng)格躺涝，能準(zhǔn)確知道各類元素應(yīng)該放在何處厨钻，而不是將元素隨意擺放在頁面上，這也有助于加速設(shè)計過程坚嗜。
二夯膀、網(wǎng)格的重要性
網(wǎng)格為設(shè)計賦予形狀和層次結(jié)構(gòu)，引導(dǎo)用戶瀏覽頁面并找到需要的內(nèi)容苍蔬。
網(wǎng)格有助于提高響應(yīng)性設(shè)計诱建。桌面端通常需要使用多列網(wǎng)格來承載文本和圖像，但設(shè)計必須足夠靈活的壓縮列數(shù)以便適配不同設(shè)備银室。
三涂佃、網(wǎng)格的五種類型
基線網(wǎng)格
基線網(wǎng)格由文本所在的位置定義。它有助于為讀者創(chuàng)造良好的閱讀體驗(yàn)蜈敢，尤其是在有大量文本的地方辜荠。
在網(wǎng)頁設(shè)計中考慮基線網(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è)計中最常見考杉。這些網(wǎng)格的目的是按重要性排列元素策精。
首先將最重要的對象放在頁面上，然后靈活地圍繞它們使用列崇棠、行和模塊來幫助組織內(nèi)容咽袜。
新聞和媒體相關(guān)類網(wǎng)站傾向于使用這種類型的網(wǎng)格來吸引用戶對某些文章的關(guān)注。例如上圖紐約時報的主頁就使用了分層網(wǎng)格結(jié)構(gòu)枕稀。
四询刹、使用網(wǎng)格的技巧
知道了網(wǎng)格的不同類型后，接下來讓我們來了解一些在設(shè)計中更好地使用網(wǎng)格的技巧萎坷。
先考慮網(wǎng)格類型
在開始設(shè)計之前凹联，請先考慮網(wǎng)格的類型，而不是把它放到最后并試圖讓設(shè)計適合網(wǎng)格哆档。
嘗試打破網(wǎng)格
新手設(shè)計師在設(shè)計時可能會受到網(wǎng)格的限制蔽挠。創(chuàng)建網(wǎng)格后，在設(shè)計決策合理的情況才完全可以打破網(wǎng)格瓜浸。
網(wǎng)格使用的越多越會意識到它是一個指南澳淑，幫助我們更快更好地設(shè)計。
不要害怕留白
留白在設(shè)計中很重要插佛。沒有必要填滿頁面的每個角落杠巡，考慮在各部分內(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è)計師使用的哪種網(wǎng)格骂束？使用它能帶來哪種體驗(yàn)耳璧？
思考的越多越能學(xué)以致用，越能將優(yōu)秀的網(wǎng)格設(shè)計應(yīng)用到自己的設(shè)計中～
精彩推薦：
