為何會(huì)有柵格？

早在平面設(shè)計(jì)開始之初，就有對(duì)“柵格”的使用記錄。（不過那時(shí)不叫柵格，而叫網(wǎng)格）因?yàn)橛∷C(jī)器以及切割工具的限制，導(dǎo)致在頁面的板式設(shè)計(jì)需要一定的出血線用于防止書籍內(nèi)容的缺失，因此出現(xiàn)了當(dāng)時(shí)非?；鸨摹镀矫嬖O(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)品時(shí)，對(duì)于空間上的理解，一直以來都是令人頭疼的問題。

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

橫向：

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

縱向：

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

柵格的定義

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

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

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

橫向排布：代表著柵格的用法，這也是為什么柵格都是一列一列的原因。

用于大型區(qū)塊：不是任何內(nèi)容都可以用柵格，比如在 卡片當(dāng)中的圖標(biāo)、文字，更多是要分析整個(gè)卡片，將其看作一個(gè)整體，如上圖。

柵格的組成形式

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

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

因?yàn)樵谡麄€(gè)柵格系統(tǒng)當(dāng)中，除了柵格之外，往往還會(huì)有其他的內(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)中有兩個(gè)卡片的內(nèi)容，而使用水槽，我就可以將這兩個(gè)卡片的內(nèi)容，確定其間距（再次強(qiáng)調(diào)柵格用于確定橫向內(nèi)容）方便柵格當(dāng)中元素的信息排列。

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

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

(A×n) – i = W

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

雖然公式好像是萬能的，但我不喜歡死記硬背，來深入講一講這個(gè)公式背后的邏輯和使用方法。

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

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

接著設(shè)定整個(gè)柵格為12欄，水槽寬度為8px。因?yàn)樗畚挥?柵格 的左右兩側(cè)，也就意味著水槽的數(shù)量會(huì)比柵格少一列（別問為什么，問就自己去下面圖片數(shù)一數(shù)）也就是1192 – (8*11)=1104px

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

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

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

整個(gè)柵格的順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因?yàn)槲覀兊臇鸥褚欢ㄊ菑拇蟮叫?，從外到里，不然做出來的?nèi)容很容易無效。

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

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

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

關(guān)于柵格的定義就先聊到這，下期來與大家講一講關(guān)于柵格應(yīng)用當(dāng)中的自適應(yīng)布局、響應(yīng)式布局，以及其中的斷點(diǎn)等內(nèi)容，我們下期見～

原文鏈接：CE青年（公眾號(hào)）

作者：CE青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B端設(shè)計(jì)指南 – 柵格的定義

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)