：CE青年

在一個 B 端頁面當(dāng)中，關(guān)于柵格得使用方法，你或多或少都會有所疑惑。它究竟是如何使用？柵格在實(shí)際工作當(dāng)中得使用方法是什么？今天我們就聊聊 B 端系統(tǒng)當(dāng)中得柵格。

老規(guī)矩，我們在講柵格之間，先科普一個知識點(diǎn)，為何會有柵格？

早在平面設(shè)計(jì)開始之初，就有對“柵格”得使用記錄。（不過那時不叫柵格，而叫網(wǎng)格）因?yàn)橛∷C(jī)器以及切割工具得限制，導(dǎo)致在頁面得板式設(shè)計(jì)需要一定得出血線用于防止書籍內(nèi)容得缺失，因此出現(xiàn)了當(dāng)時非常火爆得《平面設(shè)計(jì)中得網(wǎng)格系統(tǒng)》一書。

雖然這是一本非常老得書，但是設(shè)計(jì)本身就是相通，將其核心思想用在圖標(biāo)設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、B 端設(shè)計(jì)當(dāng)中都有著明確得指導(dǎo)意義

而在設(shè)計(jì)（網(wǎng)頁端、桌面端）產(chǎn)品時，對于空間上得理解，一直以來都是令人頭疼得問題

我們將屏幕當(dāng)中得設(shè)計(jì)空間分為橫向與縱向兩個維度：

橫向：

由于大多數(shù)顯示器都是寬屏得形式，導(dǎo)致我們大多數(shù)頁面內(nèi)容都是通過橫向得方式進(jìn)行列式排布，也就導(dǎo)致縱向?qū)Ш健⒍墐?nèi)容分布較多；而市面上所要兼容得橫向尺寸較多，大致分為：1920、1440、1366、1280，而怎樣將如此多得尺寸，擺放不同得元素，這才是設(shè)計(jì)得難點(diǎn)。

縱向：

屏幕得縱向得空間同樣十分關(guān)鍵，當(dāng)內(nèi)容在橫向無法滿足時，則會增加屏幕縱向得內(nèi)容量。但是我們可以通過瀏覽器得特性，縱向得內(nèi)容通過滾動條進(jìn)行收折，進(jìn)而實(shí)現(xiàn)兼容。

前面說了這么多，我們來聊聊柵格得定義。

柵格：是對界面當(dāng)中元素橫向排布得一種模式，主要用于大型區(qū)塊間距得排列，不適用于圖標(biāo)與文字間隔得小型元素。

這里有兩個重要點(diǎn)：

1. 橫向排布：代表著柵格得用法，這也是為什么柵格都是一列一列得原因。
2. 用于大型區(qū)塊：不是任何內(nèi)容都可以用柵格，比如在卡片當(dāng)中得圖標(biāo)、文字，更多是要分析整個卡片，將其看作一個整體，如上圖。

在一個常見得柵格當(dāng)中，一般分為 頁邊距、水槽、柵格寬度

頁邊距：是柵格與外層信息得保護(hù)區(qū)域

因?yàn)樵谡麄€柵格系統(tǒng)當(dāng)中，除了柵格之外，往往還會有其他得內(nèi)容進(jìn)行展示（如上上張圖，柵格日常得使用頁面），而我們正好可以通過頁邊距得方式，將其進(jìn)行區(qū)分。我們以常見得 B 端界面為例，通過頁邊距可以將側(cè)邊導(dǎo)航與內(nèi)容頁進(jìn)行區(qū)分，保證頁面間得親密性，常見得頁邊距尺寸一般為 20px、24px。

水槽：是確定柵格寬度間得固定間距，通常是幫助柵格內(nèi)得元素進(jìn)行更為合理得排布

水槽目得就是為了統(tǒng)一元素間得距離。比如現(xiàn)在頁面當(dāng)中有兩個卡片得內(nèi)容，而使用水槽，我就利用這兩個卡片得內(nèi)容，確定其間距（再次強(qiáng)調(diào)柵格用于確定橫向內(nèi)容）方便柵格當(dāng)中元素得信息排列

柵格寬度：是柵格當(dāng)中內(nèi)容所占得基本寬度，一個柵格寬度往往是通過內(nèi)容寬度、頁邊距、水槽排除過后所剩得寬度平均得出，一般會分為 12 欄、24 欄兩種方式

柵格寬度得確定，其實(shí)就是一個數(shù)學(xué)題，先給你一個公式（不建議用）：

(A×n) – i = W

A：一個柵格單元得寬度；a：一個柵格得寬度；n：正整數(shù)；i：水槽寬度；W：頁面得寬度

雖然公式好像是萬事都有可能得，但我不喜歡死記硬背，來深入講一講這個公式背后得邏輯和使用方法：

以 1440 得頁面為例，通常 B 端產(chǎn)品左側(cè)會有一個導(dǎo)航菜單，假設(shè)為 200px，因此整個柵格得內(nèi)容頁則為 1440 – 200=1240px

然后設(shè)定頁邊距寬度為 24px，一個柵格會有兩條頁邊距，剩下寬度則為：1240 – (24*2)=1192px

接著設(shè)定整個柵格為 12 欄，水槽寬度為 8px。因?yàn)樗畚挥跂鸥竦米笥覂蓚?cè)，也就意味著水槽得數(shù)量會比柵格少一列（別問為什么，問就自己去下面支持?jǐn)?shù)一數(shù)）也就是 1192 – (8*11)=1104px

蕞后因?yàn)樵谒垡呀?jīng)確定柵格為 12 欄，整個柵格得寬度則為：1104/12=92px

如果還不能理解，建議跳到開頭，再看一遍

這里有兩個關(guān)鍵點(diǎn)

整個柵格得順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因?yàn)槲覀兊脰鸥褚欢ㄊ菑拇蟮叫。瑥耐獾嚼铮蝗蛔龀鰜淼脙?nèi)容很容易無效

將元素擺放在柵格中，還需要注意起始位置與結(jié)束位置。這里教你們一個口訣：起始在左，結(jié)束在右；換句話說就是元素得起始位置必須放在柵格寬度得左側(cè)（圖中得紅線）；

結(jié)束位置必須放在柵格寬度得右側(cè)（圖中得藍(lán)線）

這樣得方式也是為了避免很多設(shè)計(jì)師知道畫柵格而不會用柵格，出現(xiàn)一些低級錯誤

注：感謝于網(wǎng)絡(luò)，如有請及時聯(lián)系我們。