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

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

對於柵格系統

柵格就是網格，咱們很小就會接觸到網格，好比小時候的方格本做文本，畫的表格等等，利用表格進行分類排版。UI中的柵格系統就是對各個平臺的網格佈局進行系統化，好比網頁的網格定義，APP的網格定義。

設計師爲何要學習柵格系統？

柵格化系統是設計的一個基本原則，可以有規律的排版頁面的佈局，在CSS的Bootstrap中採用柵格系統可以更好的進行頁面佈局。柵格系統就是網格，利用創建的網格進行佈局排版。在廣告排版、海報畫冊、網站界面等領域都能普遍運用。

柵格化系統的最小單位

在UI設計柵格系統中的最小單位就是設計界面的單位基礎，界面內的設計元素和排版都是依照這個基礎單位創建和佈局的，常見的Web端最小單位是10，移動端經常使用最小單位是三、四、5，不過這些也不是固定的，目前設計界面的最小單位變的愈來愈大國外不少軟件都流行了大留白。

列

列是柵格系統縱向排布依據，經常使用的PC端是12列，移動端是6列。列數越多縱向排布內容就能夠越細緻，可是版面內容就會變的更稠密，內容更碎。

行

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

水槽

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

屏幕安全邊距

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

內容區

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

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

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

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

這個該如何計算呢？

舉個例子，拿寬度爲1920來講，若是你用經常使用的12分欄，獲得每一等分的寬度就是1920除以12等於160，160包括列寬和水槽，咱們就能夠定列寬爲120，水槽爲40（列寬：水槽=3：1）。安全邊距是水槽的一半，就是20。這樣一個1920的柵格系統就基本出來了。

可是呢，我們要活學活用根據根據本身狀況來決定，也不是非得按這些死數據，能夠根據本身的項目和平時積累的知識來決定柵格系統。

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

柵格化系統設計的計算原理

當n ＝ 24, i = 10;假如A＝40，則W＝950；假如A＝50，則W＝1190；假如A＝60，則W＝1430。

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

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

柵格化是經過肯定等分的單位寬度以及單位寬度之間的間距，把單位寬度進行組合的一種排版方式。在進行設計以前要作好計劃和計算。

工具的設置

PS中的網格設置 

PS的網格插件(GuideGuide)

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

Sketch中的網格設置

Sketch中的佈局設置

Sketch中插件(Craft)中的複製功能，其餘的資源庫也頗有用哦。

插件地址（ www.invisionapp.com/craft ）除此以外還有很強大的功能，你們能夠研究一下。

這裏只是簡單介紹了一下柵格系統在設計中的運用，你們要結合本身平時積累的知識來搭建本身項目的柵格系統，除此以外還要了解一些比例，佈局的相關知識，像對角比例，三等分比例，三角形比例，黃金分割金色螺旋線比例等和各類類型佈局知識。

感謝你們的關注和支持，你們一塊兒學習。