作者：Clippp

大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「網(wǎng)格系統(tǒng)」。

網(wǎng)格系統(tǒng)在設(shè)計(jì)前期作為確定界面布局和規(guī)范的重要方法，經(jīng)常在UI/UX設(shè)計(jì)中用到。

除了能夠?qū)R和組織界面中的設(shè)計(jì)元素外，使用網(wǎng)格系統(tǒng)還有助于改善視覺(jué)層次，讓界面中的信息層級(jí)關(guān)系更加合理、清晰，從而最大限度地減少用戶的認(rèn)知負(fù)擔(dān)，幫助用戶快速理解內(nèi)容。

?通過(guò)了解網(wǎng)格系統(tǒng)的組成、網(wǎng)格系統(tǒng)的創(chuàng)建方法和使用準(zhǔn)則等內(nèi)容，系統(tǒng)了解網(wǎng)格系統(tǒng)在設(shè)計(jì)中的應(yīng)用，讓我們的設(shè)計(jì)有理有據(jù)，更具說(shuō)服力！

一、網(wǎng)格系統(tǒng)的組成

在深入了解網(wǎng)格的類型和使用準(zhǔn)則前，讓我們先來(lái)了解一下網(wǎng)格系統(tǒng)中涉及到的一些基本概念，比如列數(shù)、內(nèi)邊距、外邊距等等。

1、列

列(Column)是網(wǎng)格的基礎(chǔ)，用來(lái)表示內(nèi)容放置的區(qū)域。每一列的寬度以百分比而不是固定的數(shù)值來(lái)衡量，這樣面對(duì)不同的屏幕尺寸，可以更靈活地進(jìn)行設(shè)計(jì)。

日常設(shè)計(jì)中，最常使用的是12列等寬的網(wǎng)格系統(tǒng)，適用于大多數(shù)的頁(yè)面和布局設(shè)計(jì)中。

2、內(nèi)間距

內(nèi)間距(Gutter/Padding)是指每列之間的距離，也被叫做水槽。內(nèi)間距能為頁(yè)面提供呼吸空間，避免內(nèi)容之間過(guò)于擁擠。

3、外邊距

邊距(Margins)是列與邊框之間的距離，邊距繞過(guò)內(nèi)容有上、下、左、右四個(gè)方向，在設(shè)計(jì)中我們可以針對(duì)每一側(cè)設(shè)定和更改邊距。

4、字段或模塊

字段或模塊是行和列的交集。這些模塊是頁(yè)面的基礎(chǔ)，所有設(shè)計(jì)元素都將適合網(wǎng)格中矩形卡片創(chuàng)建的這些空間單元。

5、界面設(shè)計(jì)與網(wǎng)格

如果說(shuō)網(wǎng)格在過(guò)去對(duì)于印刷必不可少，那么今天網(wǎng)格在數(shù)字世界中仍是不可或缺的。

網(wǎng)格成為開(kāi)發(fā)數(shù)字產(chǎn)品的關(guān)鍵工具，為在所有設(shè)備上提供最佳的用戶體驗(yàn)。因此，無(wú)論屏幕大小如何，設(shè)計(jì)師都必須能夠在每個(gè)屏幕上通過(guò)最佳的方式組織內(nèi)容。

二、如何在設(shè)計(jì)中使用網(wǎng)格系統(tǒng)？

網(wǎng)格是具有列、內(nèi)間距和外邊距的結(jié)構(gòu)系統(tǒng)，其目的是幫助設(shè)計(jì)師組織界面的內(nèi)容。

內(nèi)間距的距離越窄，越會(huì)向用戶傳達(dá)「這些內(nèi)容屬于同一組」的感覺(jué)。

同理，內(nèi)間距越寬，看起來(lái)越像是不同類型的內(nèi)容。

需要注意的是，內(nèi)間距的距離不要太寬，或者比每一列的寬度還寬，容易導(dǎo)致內(nèi)容之間的留白過(guò)大，造成視覺(jué)瀏覽上的不連貫。

此外，外邊距的間距遵循與內(nèi)間距相同的規(guī)則?？梢造`活調(diào)整外邊距，以便在內(nèi)容和屏幕之間留出合適的間隔。

和內(nèi)間距一樣，屏幕中的外邊距也不能太寬，這樣會(huì)壓縮頁(yè)面中內(nèi)容的展示空間，會(huì)讓頁(yè)面看起來(lái)很局促。

三、使用網(wǎng)格設(shè)計(jì)的四條準(zhǔn)則

網(wǎng)格的使用看起來(lái)很直觀，但在UX或UI項(xiàng)目中使用網(wǎng)格系統(tǒng)仍有一些需要注意的規(guī)則。

1、將元素集中在每一列中

上面說(shuō)到，在設(shè)計(jì)中常用到的是12列網(wǎng)格系統(tǒng)。那么12列網(wǎng)格為什么被廣泛使用呢？主要原因在于12列網(wǎng)格更方便擴(kuò)展不同的布局形式。

▲ 12列網(wǎng)格可以一行排列兩個(gè)內(nèi)容，各占6列網(wǎng)格；一行排列三個(gè)內(nèi)容，各站四個(gè)網(wǎng)格；一行排列四個(gè)內(nèi)容，各占3列網(wǎng)格；一行排列六個(gè)內(nèi)容，各占2列網(wǎng)格。

基本上，常用到的頁(yè)面布局形式在12列網(wǎng)格中都可以實(shí)現(xiàn)。

▲ 在每個(gè)內(nèi)容之間留出足夠的內(nèi)邊距。這里需要注意的是，內(nèi)容的兩側(cè)要與每一列的邊緣重合，而不是與內(nèi)邊距重合。

▲ 當(dāng)內(nèi)容居中顯示時(shí)，要始終在邊緣留出一點(diǎn)空間，防止頁(yè)面被內(nèi)容填充的過(guò)于擁擠。

2、不要將列數(shù)作為內(nèi)容填充

在網(wǎng)格系統(tǒng)下，設(shè)計(jì)應(yīng)該填充整個(gè)內(nèi)容的寬度，這樣會(huì)讓界面看起來(lái)更規(guī)范。

不要讓左右兩列沒(méi)有填充內(nèi)容，讓列數(shù)作為填充，這樣會(huì)導(dǎo)致頁(yè)面的外邊距不統(tǒng)一，增加后期的開(kāi)發(fā)成本。

3、可以嘗試脫離網(wǎng)格

在設(shè)計(jì)中，使用從網(wǎng)格中溢出的圖像或元素也是可以的。

例如我們想填充一個(gè)全尺寸的背景色或者圖像，只需將圖像拉到網(wǎng)格之外就可以。在網(wǎng)格和邊距的示意下，開(kāi)發(fā)人員也能夠快速理解界面的尺寸信息。

4、注意內(nèi)容之間的間距

在網(wǎng)格上放置不同的元素時(shí)，確保元素之間的左右間距、上下間距都是一致的，這樣會(huì)讓整個(gè)界面看起來(lái)更規(guī)范。

最后

除了能夠改善設(shè)計(jì)、減輕用戶認(rèn)知負(fù)擔(dān)外，網(wǎng)格系統(tǒng)還能提升設(shè)計(jì)效率。有了網(wǎng)格我們可以快速衡量元素的間距、邊距的精度，簡(jiǎn)化設(shè)計(jì)過(guò)程。

另外，在規(guī)范的網(wǎng)格系統(tǒng)中，界面布局或內(nèi)容上的修改也會(huì)變得更容易。

慢慢來(lái)比較快，希望對(duì)你有幫助！