我們經(jīng)常能聽(tīng)到“柵格系統(tǒng)”這個(gè)詞，但卻不知道真正的柵格系統(tǒng)是什么，不知道它在設(shè)計(jì)中是如何應(yīng)用的。大廠95%的的設(shè)計(jì)都會(huì)應(yīng)用到柵格系統(tǒng)，柵格系統(tǒng)在UI設(shè)計(jì)中的應(yīng)用是非常廣泛與重要的?。∫黄饋?lái)學(xué)習(xí)吧，搞定這套大廠方法～

一、什么是柵格系統(tǒng)

柵格系統(tǒng)（grid systems），也叫做“網(wǎng)格系統(tǒng)”，是一種運(yùn)用固定的格子來(lái)設(shè)計(jì)頁(yè)面布局，使布局簡(jiǎn)潔規(guī)范有秩序。

柵格系統(tǒng)無(wú)處不在，只是我們沒(méi)有發(fā)現(xiàn)而已。柵格系統(tǒng)就像版面布局的骨架，像一張無(wú)形的網(wǎng)在規(guī)范著我們的設(shè)計(jì)，讓設(shè)計(jì)更加有秩序美。

二、柵格系統(tǒng)的作用

1.輔助我們更規(guī)范排版布局與信息分布，讓頁(yè)面產(chǎn)生秩序美

2.提高頁(yè)面布局的一致性與復(fù)用性，減少設(shè)計(jì)師思考基礎(chǔ)布局，提升設(shè)計(jì)效率

3.響應(yīng)式布局，更好適配不同設(shè)備，讓開(kāi)發(fā)更好的還原設(shè)計(jì)效果

任何好的設(shè)計(jì)的秘密在于它的視覺(jué)元素的組織方式和元素間相互關(guān)聯(lián)的位置。柵格系統(tǒng)剛好有此作用。柵格系統(tǒng)在UI設(shè)計(jì)中的應(yīng)用，不僅能讓頁(yè)面更加規(guī)范，讓元素之間更加平衡，看起來(lái)更和諧；還能大大提高設(shè)計(jì)師與開(kāi)發(fā)工程師的工作效率。

三、柵格系統(tǒng)的組成要素

柵格系統(tǒng)是由欄（Column）跟水槽（Gutter）交替分布形成的。柵格系統(tǒng)的組成要素有欄、水槽、邊距。

1.欄（Column）

欄是從上到下的垂直空間區(qū)域，是承載內(nèi)容的容器。我們的內(nèi)容一般都是放在欄里面的（欄與水槽結(jié)合使用也是用來(lái)承載內(nèi)容的）。在web端欄一般為12列與24列，移動(dòng)端一般為6列、8列與12列。具體欄數(shù)可以根據(jù)產(chǎn)品內(nèi)容來(lái)定。界面布局樣式越多、欄數(shù)建議越多，因?yàn)闄跀?shù)越多組合方式就越多。

2.水槽（Gutter）

水槽（Gutter）相鄰兩個(gè)欄之間的間距，把控著頁(yè)面的留白與呼吸感。水槽越大頁(yè)面布局間距就越大，給人的視覺(jué)感受就是大留白、呼吸感強(qiáng)。水槽越小頁(yè)面就越緊湊，頁(yè)面元素就會(huì)越擁擠。

3.邊距（Margin）

頁(yè)邊距可以視為安全距離。移動(dòng)端主要是兩邊與屏幕的邊緣距離，網(wǎng)頁(yè)端就是指兩邊的留白區(qū)域。

四、如何制定柵格系統(tǒng)？

1.第一步定好最小原子單位

由于欄跟水槽的寬度是以網(wǎng)格的基本單位也就是最小原子單位來(lái)定義的，所以第一步需要先定義好柵格系統(tǒng)的最小原子單位大小。也就是最小格子的大小。比如5px、8px

2.定義邊距與欄數(shù)

邊距大小要根據(jù)最小原子來(lái)定，邊距大小是最小原子的倍數(shù)。定頁(yè)邊距后我們就需確定好欄數(shù)。移動(dòng)端一般為6欄。水槽的間距設(shè)置一般為邊距的1倍或2倍。具體倍數(shù)大小還是得根據(jù)產(chǎn)品內(nèi)容來(lái)定。想要緊湊一些就把倍數(shù)設(shè)置小一些，想要頁(yè)面呼吸感強(qiáng)、留白空間大，就可以把倍數(shù)設(shè)置大一點(diǎn)。

我們以375*667分辨率為例。我定好最小原子單位為5px，那么頁(yè)邊距我設(shè)置為15px，我設(shè)置欄目數(shù)為6欄，設(shè)置水槽大小為頁(yè)邊距的1倍，可以得出列寬為（375-15*2－15＊5）／6＝45，在工作中我們根本不需要計(jì)算列寬的大小，因?yàn)橛泻芏喙ぞ呖梢詭椭覀冇?jì)算??！

五、利用工具制定柵格系統(tǒng)

你一定會(huì)覺(jué)得柵格系統(tǒng)的計(jì)算太麻煩啦，但是沒(méi)有關(guān)系！?。?！我們可以利用這些插件與在線制作工具幫你快速的制作柵格系統(tǒng)，無(wú)需計(jì)算，快速完成柵格系統(tǒng)的制定。

柵格制作工具

sketch插件flavor。我們只需設(shè)置好邊距、欄數(shù)、列間距，其余的插件會(huì)自動(dòng)計(jì)算出來(lái)。

下載地址：https://oursketch.com/plugin/flavor

在線柵格計(jì)算網(wǎng)站。非常的友好，幫我們列舉出了幾種常用的水槽與邊距的比例，當(dāng)我們不知道哪一種比例比較合適時(shí)，我們可以多嘗試不同多比例，選取合適自己產(chǎn)品的。

網(wǎng)址：http://grid.guide/

六、柵格系統(tǒng)使用方法

了解柵格系統(tǒng)后，最主要的是學(xué)會(huì)如何在UI設(shè)計(jì)工作中去使用這套方法。在實(shí)際項(xiàng)目中去實(shí)操練習(xí)，熟練應(yīng)用。

1.布局

根據(jù)需要，使用不同數(shù)量的欄，去排列組和我們想要的布局樣式。以6欄為例，簡(jiǎn)單列了幾種組合方式。如1排1，1排2，1排3...,欄數(shù)越多，組合方式就越多，在設(shè)計(jì)中我們可以把常用的組合方式排列出來(lái)，后續(xù)設(shè)計(jì)中可以直接拿出來(lái)用，大大提升設(shè)計(jì)效率。

2.定義有意義的間距

柵格系統(tǒng)更多的解決了頁(yè)面的基本骨架。但是頁(yè)面元素之間的間距也需要我們有規(guī)律有節(jié)奏的去定義。比如我們的留白間距規(guī)則。很多設(shè)計(jì)師設(shè)置的數(shù)值都是一些無(wú)效數(shù)值，比如4，8，12...這些間距之間的差異是很小的，讓人很難看出組與組之間的親密關(guān)系。所以?。∫惶子幸饬x的間距數(shù)值是很有必要的。一般數(shù)值的設(shè)定為XS、S、M、L、XXL這五個(gè)數(shù)值，也就是最小間距、小間距、常規(guī)間距、較大間距、最大間距。就像我們買鞋子一樣，就固定住了這幾個(gè)尺寸，設(shè)計(jì)中的間距也一樣，這樣能讓組與組之間區(qū)分更明顯。讓留白更有意義。同時(shí)也能讓設(shè)計(jì)師們更加有默契，減少對(duì)基礎(chǔ)間距設(shè)置的思考。

3.靈活使用欄與水槽

很多同學(xué)在剛學(xué)習(xí)柵格系統(tǒng)時(shí)，會(huì)讓自己的設(shè)計(jì)元素，比如文字、圖標(biāo)去對(duì)齊、卡死欄目的邊緣。這種使用方法是錯(cuò)誤的。因?yàn)闄谥皇莾?nèi)容的承載容器，我們的設(shè)計(jì)元素在這個(gè)容器里的擺放是多樣化的。我們需要去靈活使用，而不是非要讓所有元素對(duì)齊在同一豎線上?。。?！

最后

柵格系統(tǒng)的使用一定要在平時(shí)多研究，多實(shí)操。我們可以找一些好多產(chǎn)品比如淘寶、支付寶、愛(ài)彼迎、pinterest等產(chǎn)品的界面去研究他們的柵格系統(tǒng)，然后靈活的應(yīng)用到自己的設(shè)計(jì)中。柵格系統(tǒng)看似簡(jiǎn)單，其實(shí)在剛開(kāi)始學(xué)習(xí)的過(guò)程中一定會(huì)遇到很多困惑與挑戰(zhàn)，只要我們堅(jiān)持做下去，多練習(xí)就一定會(huì)掌握的。蓋哥大佬說(shuō)他學(xué)習(xí)柵格系統(tǒng)用了3年，所以我們?cè)趯W(xué)習(xí)過(guò)程中遇到困難也不用太沮喪，只要我們堅(jiān)持學(xué)習(xí)，就是勝利。最后祝大家都能學(xué)會(huì)這套大廠方法，一起加油呀～