柵格化系統在設計中的運用

剛開始對柵格系統有很多疑惑，什麼是柵格化系統？Bootstrap中為什麼要使用柵格系統？設計師為什麼要學習柵格系統？如何學習運用？後來發現有很多小夥伴也都有這樣的疑問，最近又看到大神Sky密圈的經驗分享，於是決定自己也整理一下柵格系統的理解和學習總結。

對於柵格系統

設計師為什麼要學習柵格系統？

柵格化系統的最小單位

在UI設計柵格系統中的最小單位就是設計介面的單位基礎，介面內的設計元素和排版都是依照這個基礎單位建立和佈局的，常見的Web端最小單位是10，移動端常用最小單位是3、4、5，不過這些也不是固定的，目前設計介面的最小單位變的越來越大國外很多軟體都流行了大留白。

列

行

行是柵格系統的橫向排布依據，目前大都是瀑布流形式顯示內容不固定高度讓行數變成未知數，很多設計師常會忽略行佈局，合理運用行能夠讓頁面分類內容佈局變的更合理化。

水槽

水槽就是列和行的分割間距，水槽越大頁面佈局間距就越大，水槽越小頁面就越緊湊。需要強調的是，水槽裡不能放置內容。 

螢幕安全邊距

邊距就是柵格之外的螢幕邊緣內容，這裡是不能放置內容的。移動端主要是兩邊與螢幕的邊緣距離，Web端就是指兩邊的留白區域。 

內容區

內容區就是行和列交叉所形成的區域，主要用來放置設計內容。

以上幾個算是柵格系統的幾個基礎單位，記著幾個敏感數字，常用PC端最小單位是10，列是12；移動端最小單位是3，4，5，6，列是6，水槽和邊距不要放置內容。

在設計中，我們該如何定義柵格系統呢？

先根據你的專案型別面向風格決定這款產品的最小單位，然後決定水槽和安全邊距從而得到內容區大小。

這個該如何計算呢？

舉個例子，拿寬度為1920來說，如果你用常用的12分欄，得到每一等分的寬度就是1920除以12等於160，160包括列寬和水槽，我們就可以定列寬為120，水槽為40（列寬：水槽=3：1）。安全邊距是水槽的一半，就是20。這樣一個1920的柵格系統就基本出來了。

但是呢，我們們要活學活用根據根據自己情況來決定，也不是非得按這些死資料，可以根據自己的專案和平時積累的知識來決定柵格系統。

這裡有柵格化系統設計的計算方法，如果你口算能力沒那麼強，就拿出筆和計算器好好算一下吧！

當n ＝ 24, i = 20;假如A＝50，則W＝1180；

外掛地址（guideguide.me/）是付費的，免費的網上也有。

這裡只是簡單介紹了一下柵格系統在設計中的運用，大家要結合自己平時積累的知識來搭建自己專案的柵格系統，除此之外還要了解一些比例，佈局的相關知識，像對角比例，三等分比例，三角形比例，黃金分割金色螺旋線比例等和各種型別佈局知識。

感謝大家的關注和支援，大家一起學習。