我們經(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)系摇锋。所以５ふ站超！一套有意義的間距數(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ì)這套大廠方法忽洛，一起加油呀～
