手把手教你做規範:布局規範(柵格)

好多小夥伴對柵格都是迷迷糊糊的，知道柵格的概念卻不知道怎麼用、為什麼用，每次提到都很頭疼。其實柵格沒那麼難，柵格是是為了輔助設計、減少設計工作量、使設計更理性、更規律的一種方法。屏幕端對不同尺寸頁面響應式時更省時省力對一種方法，是讓減輕我們工作量對方法，看到這裡是不是心動了，那就往下看看～

一、什麼是柵格

1. 柵格的由來

柵格就是網格，就是這種有規律的格子。

哈哈，這樣一說是不是就很接地氣了。英文翻譯過來就是網格，至於現在為什麼叫柵格就不得而知道。

柵格最早是應用於平面設計中，產生於二十世紀初的西歐，完善於五十年代的瑞士，通過有規律的網格來指導版面布局。

柵格設計的在屏幕端的應用也十分廣泛，不光為設計服務，對響應式開發也起到了很大的作用。雖然開發小哥說的柵格和我們理解的不太一樣，但也減少了溝通成本。

2. 網格Grid

網格是構成頁面柵格系統的最小單位。PC端我們一般用8作為網格的最小單位。

為什麼用8？

儘量保持單位是偶數，這樣在頁面放大或者放大或者縮小時還能保持清晰。在保證偶數的前提下，使用「 2、4、6、8、10、12… 」作為最小單位都是可以的。

通常情況下PC端橫向是固定的，縱向是可以滾動的。根據2019年中國PC端解析度端統計，「4、8」只有不能被1366整除，其他都可以。由於4過於小，普通用戶從視覺上不容易分辨差別，所以我們選用8作為最小單位。之後所有的數值都使用8的倍數。

3.欄Columns和槽Gutters

欄（Columns）是呈放內容區域。

PC端通常有12柵格或24柵格，意思就是縱向有12欄或24欄。

槽（Gutters）是兩個欄中間的間距。槽的數量比欄的數量少一個。

假設是柵格寬度是W、欄的寬度是C、槽的寬度是G。有N個欄，就有N-1個槽，則可以推斷出算出W=N*C+（N-1）G。

忘掉 欄+槽=列的概念（個人感覺沒有作用，有不同見解的歡迎討論。）

為什麼用12或24欄？

12欄和24欄都是PC端較常用的，移動端用4欄的居多，分的越細可變化的內容越豐富。但過於細也會使頁面變得很碎，差異感和韻律感降低。12或24欄可以被2等分、3等分、4等分、6等分、12等分，還能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足夠豐富的變化。

以下是京東首頁的截圖，應該是採用了12柵格，並且分別採用了2等分、四等分、六等分、2:6:2:2 、 2:10 。

4. 邊距Margin

柵格寬度外的邊距，通常做自適應的距離，例如：小屏和大屏之間做響應，就會改變邊距。

5. 柵格寬度 Container

柵格寬度是需要柵格設計區域的寬度，不是顯示器寬度。

舉例：假設我們以1920px的屏幕為畫板作圖、使用24列柵格。設定欄的寬度為32px4（個原子單位），槽的寬度為16px（2個原子單位）。

則柵格寬度W=24列 x 32欄寬 + 23 列x 16槽寬=1136px，其餘寬度做自適應處理。

在1920屏寬下如下圖所示：

應用原則：

1. 內容必須落在欄上，不能落在水槽中；
2. 父元素需對齊柵格，子元素可再做柵格；
3. 儘量按柵格做等分，平分成5等份也是可以的，前端工程師就需要改底層結構了。

二、為什麼用柵格

1. 不用柵格設計行不行？ 行！

行，不用柵格沒問題。很多優秀作品都沒有刻意的遵守傳統的柵格，反而顯得更加靈動。但是打破規則前得知道規則才行。

2. 使設計更有規律和邏輯

基於柵格設計，按一定的規律把文字和圖片排列在頁面之中，使版面不光具有視覺感官的美感，也具有嚴謹的邏輯和一定韻律。

3. 利於團隊協作

有了統一的柵格標準，就可以解釋為什麼「這個寬度要用120px，那個寬度不能用140px……」之類的問題。設計團隊之間溝通成本就大大降低，同時也能提高團隊作業的一致性。

4. 響應式設計

現在人們使用的設備不在局限電腦或者手機，用戶可能使用任何尺寸的設備來訪問我們的設計。所以我們不能為單一的設備來設計，怎麼動態的構建我們的設計、響應不同尺寸的設備，是設計師在起初就應該考慮的。

三、柵格系統如何響應的

1. 什麼是響應式設計

通俗的講就是：為了讓設計在各種尺寸的設備上都保合理、持美觀，用戶無論用手機、平板、電腦使用我們的產品時都有良好都體驗。檢測到不同的屏幕尺寸的時候改變柵格的一些數值，變成我們預先設計的樣式，這就是響應式設計。

2. 柵格是怎麼響應的

（1）固定柵格

欄和槽的寬度是固定不變的，不隨屏幕的大小而變化。到一定的臨界值的時候柵格列數會發生變化。

假設在我們以1920的屏幕大小為畫板，柵格寬度是1136，看到的如下圖：

在2560的屏幕下看頁面，兩側的留白就會變大，中間的內容保持不變。如下圖：

在1024的屏幕下看頁面，就會出現橫向滾動條，頁面仿佛被截斷一樣。如下圖：

在更小的屏幕下，柵格的列數會發生變化。但無論怎麼變化，欄和槽的寬度是不變的。如下圖：

在臨界值之間設計的布局不會改變。具體到什麼臨界值柵格的列數會發生變化，需要跟開發說清楚。臨界值設置多少、設置多少個臨界值要根據實際情況來制定。

優點：設計的還原度是最高的，無論在什麼什麼屏幕下，核心樣式是保持不變的。

缺點：在小屏下會有滾動條。在大屏上左右留白過多，有點浪費空間。

（2）流動柵格

欄的寬度是變化的，隨屏幕的大小而變化。槽的寬度固定不變。到一定的臨界值的時候柵格列數會發生變化。

假設在我們以1920的屏幕大小為畫板，柵格寬度是1136。看到的如下圖：

在2560的屏幕下看頁面，槽的寬度保持不變，欄的寬度發生改變。如下圖：

在1024的屏幕下看頁面，槽的寬度保持不變，欄的寬度發生改變。如下圖：

問題來了，這樣一算欄的像素就不但不是偶數，而且還不是整數了，怎麼辦，屏幕該怎麼顯示呢？沒關係，有的卡片可能是351個像素，有的是356個像素，這樣1像素的差距在屏幕上很難看出差別來，為了在不同大小的屏幕上適配，這1像素是可以忍受的。

需要把子元素內的布局樣式，那些是可以變動的地方跟前端說明即可。（例如：當連變化時，卡片內的圖標保持左對齊，左邊距不變。文字左對齊，每行的文字數量自適應。）

優點：在不同屏幕下會自動放大或縮小，更充分的利用空間。

缺點：由於欄寬是不固定的，樣式可能會發生變形。文字可能會變成多行或者超長的一行。

（3）混合柵格

在同一頁面中可以分成多個區域，每個區域做不同柵格類型。

四、從0建立後臺柵格系統

1. 確定柵格的基準

根據自家的業務場景定下最小單位和柵格數量，我們以8為最小原子單位距離，之後所有的數值是8的倍數，柵格數量採用12舉例。

2. 確定柵格區域

後臺系統和網頁不同，往往邏輯複雜、數據量大，同時需要獲取、比對很多的信息。

信息以表格、表單居多，所以屏幕的寬度就顯得很重要了，寸土寸金。所以通常選中全部填充的樣式，捨棄兩側留白的樣式。

我們選擇設備比例最多1920×1080為畫板。（這裡主要將縱向柵格，暫不考慮瀏覽器自身的標籤欄和菜單欄的高度）

制定如下的樣式，數值僅供參考，照搬的請慎重。

3. 放置內容

在欄內放置內容，內容不能在開始和結尾不能在槽裡，內容的高度也需要保持8的倍數。

4. 響應策略

（1）大/小屏幕響應

當屏幕變大時，左側藍色菜單欄保持寬度不變（固定柵格）。右側柵格區域的槽保持不變，欄等比例擴大。（流動柵格）

當屏幕變小時，左側藍色菜單欄保持寬度不變（固定柵格）。右側柵格區域的槽保持不變，欄等比例縮小。（流動柵格）

（2）平板響應

當屏幕小到平板的尺寸時候，柵格區的內容就無法正常顯示了，十分影響體驗。於是就是改變柵格的數量，變成6列柵格，同時菜單欄收縮簡要模式，這樣就完成了平板端的適配。

（3）手機響應

當屏幕是iPhone8、8P…等手機尺寸時候，柵格區就改為更少的柵格，同時菜單欄變為漢堡按鈕。還可以把一些內容做隱藏處理，例如常見的諮詢客服、相關推薦等。

5. 小結

1. 柵格就是網格
2. 適配時通常槽的寬度不變、欄的寬度自適應
3. 柵格區域是內容區不是屏幕區域
4. 柵格響應類型：固定柵格、流動柵格、混合柵格

#相關閱讀#

手把手教你做設計規範（1）：顏色篇

手把手教你做設計規範（2）：圖標篇

手把手教你做設計規範（3）：設計原則篇

手把手教你做設計規範（4）：文案篇

 

作者：Iron設計邦；微信公眾號 IRON設計邦

本文由 @Iron設計邦 原創發布於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。