2021-8-17 ui設(shè)計分享達(dá)人
柵格系統(tǒng)（grid systems）
規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。
基本原理
在網(wǎng)頁設(shè)計中，把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間隙設(shè)為“i”,把“a+i”定義“A”。他們之間的關(guān)系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
我們通常把a(bǔ)稱為“柱”，對應(yīng)代碼中的Column；i稱為“水槽”，對應(yīng)代碼中的Gutter；a+i=A稱為“列”
設(shè)計柵格系統(tǒng)，本質(zhì)就是定義a，i，n的數(shù)值。
UI設(shè)計中有一個通用做法，就是元素的寬度盡量是8的倍數(shù)，基于今天的大多數(shù)的網(wǎng)頁設(shè)計，畫板寬度都為1440px ，此時我們將a=24,i=24,n=24,這是一組簡單美妙的數(shù)值，可算得W=（24x24）+23x24=47x24=1128px；將柵格居中于畫板(偏置156px)，此時的柵格系統(tǒng)如下：
1128柵格系統(tǒng)：
得到的這個柵格布局被廣泛使用，比如站酷網(wǎng)首頁:
觀察計算公式W=1128=47x24=（24+23）x24，這里的47不是8的倍數(shù)，我們?nèi)菀紫氲桨阉兂?8，
將a=25,i=24,n=24,算得W=（24x24）+（25-1）x24=48x24=1152px；此時的柵格系統(tǒng)如下：
1152柵格系統(tǒng)：
這個柵格系統(tǒng)的美感在于，寬度W=48x24=1152px，兩邊的留白為畫板1440px寬度的1/10等于144px。Ant Dseign中運(yùn)用了此柵格：
以上兩個柵格布局都是24柵格系統(tǒng)，使用24柵格系統(tǒng)的好處是，它可以輕松實現(xiàn)2等分、3等分、4等分、6等分、8等分、12等分，也可以進(jìn)行1：2：1、 1：3：2、 1：2、 1：3 等不對稱分割的布局。
除了最常見的24柵格布局外，也可進(jìn)行36柵格布局，例如：
a=16，i=16，n=36，W=（16x36）+16x（36-1）=16x（36+35）=1136
1136柵格系統(tǒng)：
a=26，i=24，n=24，W=（26x24）+24x23=24x49=1176px
例如騰訊文檔：
1176柵格系統(tǒng)：
“廠”型布局網(wǎng)頁的柵格布局：
以上的網(wǎng)頁布局都是瀑布式布局，在許多應(yīng)用型網(wǎng)站中，常使用“廠”字布局，對于“廠”布局的網(wǎng)頁，該如何設(shè)計合適的柵格系統(tǒng)呢？
我們可以先確定左側(cè)菜單欄的寬度，例如飛書管理后臺中左側(cè)菜單欄的寬度為228px，在拉動瀏覽器時，這部分通常是不動的，再確定主體內(nèi)容去和左側(cè)菜單欄間的間隙，比如12px。
此時可以計算W=1440-228-12x2=1188。
使用24柵格系統(tǒng)時，12a+11i=1188，方程中有兩個未知數(shù)，我們設(shè)定其中一個時，就可計算出另一個。另i=12,解
W =（a×n）+（n-1）i
1188=（ax24）+23x12
a=38
是幫助，而非限制
對開發(fā)者而言柵格是實現(xiàn)動態(tài)布局的手段，而設(shè)計師對于柵格的理解源自平面設(shè)計中的柵格，不應(yīng)把柵格系統(tǒng)當(dāng)成一種限制，而是幫助，也不用總是擔(dān)心元素超出柵格。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：隔岸吃瓜
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
對于網(wǎng)頁設(shè)計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn