設(shè)計理論｜B 端設(shè)計指南——柵格的定義

▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

作者：CE青年

編輯：章欣怡

共 2196 字 14 圖  預(yù)計閱讀 6 分鐘

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

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

早在平面設(shè)計開始之初，就有對 “柵格” 的使用記錄。（不過那時不叫柵格，而叫網(wǎng)格）

因為印刷機器以及切割工具的限制，導(dǎo)致在頁面的板式設(shè)計需要一定的出血線用于防止書籍內(nèi)容的缺失，因此出現(xiàn)了當(dāng)時非常火爆的 《平面設(shè)計中的網(wǎng)格系統(tǒng)》 一書。

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

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

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

橫向：

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

縱向：

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

01 柵格的定義

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

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

這里有兩個重要點：

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

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

02 柵格的組成形式

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

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

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

水槽：是確定柵格寬度間的固定間距，通常是幫助柵格內(nèi)的元素進行更為合理的排布水槽目的就是為了統(tǒng)一元素間的距離。比如現(xiàn)在頁面當(dāng)中有兩個卡片的內(nèi)容，而使用水槽，我就可以將這兩個卡片的內(nèi)容，確定其間距（再次強調(diào)柵格用于確定橫向內(nèi)容）方便柵格當(dāng)中元素的信息排列。

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

柵格寬度的確定，其實就是一個數(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。因為水槽位于柵格的左右兩側(cè)，也就意味著水槽的數(shù)量會比柵格少一列（別問為什么，問就自己去下面圖片數(shù)一數(shù)）也就是 1192 - (8*11) = 1104px。

最后因為在水槽已經(jīng)確定柵格為 12 欄，整個柵格的寬度則為：1104 / 12 = 92px。

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

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

整個柵格的順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小，從外到里，不然做出來的內(nèi)容很容易無效；

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

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

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

—  The end  —

以下三分設(shè)文章，你可能也感興趣

▽ 

?? 原創(chuàng)文章精選??

告別加班！使用設(shè)計系統(tǒng)方法更快地構(gòu)建產(chǎn)品

如何評估設(shè)計質(zhì)量，提升設(shè)計技能

你常常忽略的 7 個具有破壞性的體驗鴻溝

一篇文章告訴你服務(wù)設(shè)計到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗

一起看看《對馬島之魂》如何打造初次對抗體驗

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計 —— Lightship

?? 我們一起聊設(shè)計 ???♂?

高質(zhì)量，學(xué)設(shè)計行交流微信群

期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）