作為B端界面布局中最為底層的布局邏輯，“柵格化”一直是處于飽受爭議兩極分化的一個狀態(tài)。有些人覺得“柵格化”華而不實，工作中從來不用，而另一些人則認為“柵格化”是設計專業(yè)度的體現，是最基礎的布局規(guī)范。

那么“柵格化”對于B端設計師而言，到底是否有價值？我們又應該如何科學的理解柵格化呢？

今天這篇文章，就帶大家快速的了解柵格化對于實際工作的意義：

柵格化的前世今身：

柵格化脫胎于平面設計中的“網格系統(tǒng)”(Grid systems)——最基礎的柵格化也就是我們在設計中常用的輔助線。

（平面設計時代：無網格，不排版）

早在20世紀初，德國、荷蘭、瑞士等國的平面設計師們就開始提倡用客觀的設計原理進行文字的編排，二戰(zhàn)后這種理念在瑞士得到了良好的發(fā)展，直到20世紀40年代后期，第一次出現了使用網格進行輔助設計的印刷作品。至此，這一設計理念開始蓬勃發(fā)展，直至今日。

（網格系統(tǒng)的橙皮寶書）

時至今日，互聯(lián)網時代，網格系統(tǒng)演演變成了柵格系統(tǒng)，但是基本邏輯還是一樣的。

網格系統(tǒng)的基礎邏輯非常簡單：通過橫向與縱向的輔助線，將畫面分割成若干等高寬的“網格”，然后將元素基于網格對齊，就能獲得較為有視覺秩序的設計作品，并且從閱讀體驗上來說，也是較為舒適的。

（平面時代的網格系統(tǒng)）

網頁時代，由于單屏幕的信息承載量較大，如果沒有整齊的布局，那么信息的傳達有序性就會被削弱，所以人們借鑒了平面設計中的柵格系統(tǒng)，將之演變成了“柵格系統(tǒng)”。

（柵格化，既是美感需要，又是技術需要）

柵格化基本組成：

要理解柵格化，那么我們就需要科學的理解柵格化的基本組成元素：

1. 網格 | Grid

網格是構成頁面柵格系統(tǒng)的最小單位。也可以稱之為“最小基本顆?！薄?/p>

以網頁為例子，最常見的“最小基本模塊”通常都是8像素或者10像素。這是最為常見的基礎網格參數。

注：最小基本單位在設定的時候，有2個需要遵循的基本規(guī)則：

1、不能出現小數點（1像素是無法被切割的）

2、盡量是雙數（所有分辨率數據，都是雙數）

2. 柵格寬度 | Container

柵格寬度是頁面柵格系統(tǒng)的總寬度。

這里需要注意：柵格總寬度不等于頁面總寬度，而是給予內容展示的安全區(qū)域來進行計算的。

3. 列和槽 | Column&Gutter

列是柵格的數量單位，常見的列數有8、12、16、20、24、36。但是這并不是一定的，需要根據實際情況調整列數。

柵格系統(tǒng)中，一列中包含了列寬（Column Width）、以及槽（Gutter）兩部分。槽和列的寬度，都應該是網格（Grid）數值的整倍數。

4. 區(qū)塊 | Col-n

建立好基礎柵格之后，一塊內容通常會占用幾個列，我們把這個區(qū)域理解為內容區(qū)塊，用于承載一個區(qū)域的內容。

（區(qū)塊=BOX）

常見入門問題解答：

1、柵格布局是否在高度上會起到作用？

答：并未強制規(guī)定。通常情況下，柵格只作用于寬度。若你對于比例關系有專業(yè)層面的執(zhí)著（這里執(zhí)著是褒義，畢竟設計就是講細節(jié)的），亦可自行進行控制。

2、柵格是否會對“區(qū)塊”內的元素有影響？

答：并未強制規(guī)定。通常情況下，柵格只作用于寬度。若你對于比例關系有專業(yè)層面的執(zhí)著（這里執(zhí)著是褒義，畢竟設計就是講細節(jié)的），亦可自行進行控制。

3、不使用柵格能進行網頁設計么？

答：理論上來說，只要你注意對齊問題，也是能進行設計的。但是從開發(fā)角度和視覺精細度來說，柵格化都是比較好的解決方案。

柵格化在B端的應用：

由于B端的頁面信息內容往往較為復雜，所以柵格化系統(tǒng)在B端中，是被普遍應用的。B端常用組件庫Ant design就是典型的基于8像素基礎網格的柵格化設計的典范。

B端柵格化常見問題1：

柵格化在B端應用中是否需要填滿頁面？

并不是如此，在B端界面設計中，我們的柵格區(qū)，只作用于內容層上。

B端的框架布局千變萬化，但歸根揭底，基礎變化就3種：

上下布局的情況下，我們的柵格作用區(qū)域如下：

左右布局以及T形布局的情況下，我們的柵格作用區(qū)域如下：

B端柵格化常見問題2:

如何確定柵格總寬度？

以內容區(qū)域寬度為基本尺寸，去掉邊距后，確保柵格總寬度是網格（Grid）數值的整倍數即可。

（邊距的使用，既是為了好看，也是為了好計算）

B端柵格化常見問題3:

如何確定自己設計的界面應該用幾列的柵格？

B端柵格化常見問題4:

如何設置柵格：

最簡單的辦法：

只要我們做一些簡單的寬度、列與槽的數值，就能生成對應的柵格。

網站提供PNG下載，下載后直接貼到文件里就可以使用。

另一種方式：使用SKETCH進行設計，直接在“布局”中進行設置就好。

Sketch中相關參數，只需要理解本文中相關的參數，即可進行科學的設置。

總結：

從平面時代的網格系統(tǒng)，到互聯(lián)網設計時代的柵格系統(tǒng)，雖然叫法上有一定差異，但是起的作用和基礎的規(guī)則都是相通的。只要科學的進行理解，那么柵格的理解還是較為容易的。

來源網絡