提到秩序感夭坪，會想到整齊文判、統(tǒng)一、安全等感性詞語室梅，再想想戏仓，會出現(xiàn)規(guī)章制度、閱兵亡鼠、處女座等事務(wù)赏殃。
社會學(xué)角度，秩序規(guī)范著我們的言行拆宛，約束我們踐行社會主義接班人的責(zé)任嗓奢。秩序不是法律法規(guī)，沒有明文規(guī)定要怎么做浑厚，但它像道德時時刻刻影響著生活。
秩序感在頁面設(shè)計中根盒，存在量化標(biāo)準(zhǔn)钳幅，在人人是設(shè)計師時代，斜杠青年的你炎滞，進(jìn)來了解一下唄～
隆重推出柵格系統(tǒng)敢艰，它能建立秩序性的信息布局。循序漸進(jìn)册赛，從來源钠导、系統(tǒng)規(guī)范，計算方式森瘪、實(shí)踐應(yīng)用牡属，一層層揭開柵格本質(zhì)和要點(diǎn)。
印刷行業(yè)最早引入網(wǎng)格系統(tǒng)扼睬，目的是建立有秩序的版面逮栅。利用垂直與水平參考線，將版面分割成格子窗宇，一是控制版面中的留白措伐，二是設(shè)定內(nèi)容的比例關(guān)系，三是對齊元素军俊。
閱讀載體從紙轉(zhuǎn)移到網(wǎng)頁侥加，閱讀習(xí)慣變化小，所以同樣要建立秩序性的信息布局粪躬，在網(wǎng)頁柵格系統(tǒng)中沿用留白担败、比例關(guān)系昔穴、對齊元素等理念。
信息疏密影響閱讀的效率氢架，信息太密集傻咖，容易看錯行；信息太稀疏岖研，詞句不連貫卿操，影響理解，合適的留白是重要的孙援。
簡單看下 Bootstrap 柵格系統(tǒng)在多種屏幕的表現(xiàn)害淤。列數(shù)默認(rèn)是12，槽寬（后面叫做間距寬度）默認(rèn)是 30px拓售，注意參數(shù)都是可以調(diào)整的窥摄。Bootstrap 的主要目的是為了適配屏幕進(jìn)行自適應(yīng)布局，而我們在做網(wǎng)頁時础淤，很少使用30px崭放，經(jīng)常使用?4npx作為間距寬度。
來源：https://v3.bootcss.com/css/#grid-options
IOS的Human Interface Guidelines 推薦使用 8 點(diǎn)約束鸽凶，根據(jù)平時制圖币砂，理解間距寬度為 8 或者 8 的倍數(shù)來制圖。
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Android卓官方文檔建議大間距使用 8 dp玻侥，小間距使用 4 dp【dp與px的換算關(guān)系px=dp*(dpi/160)】
https://material.io/design/layout/understanding-layout.html#
7個概念
間距寬度：也叫做柵格間距决摧，gutter width，推薦使用 4npx凑兰，n 是自然數(shù)掌桩。
列寬: 每一列的寬度，colume width姑食。
總寬：從第一列到最后一列的寬度波岛，total width。
列/欄數(shù)：number of colume
偏置：offset矢门，第一列距離畫板左邊緣的橫向距離盆色。（代碼中認(rèn)為offset是間隔數(shù)，是不一樣的祟剔。）
外圍間距：也叫安全邊距隔躲，是0.5 倍的間距寬度。
屏幕安全邊距：移動端專用的參數(shù)物延，指柵格系統(tǒng)距離屏幕邊緣的距離宣旱，當(dāng)然這也是不能放置內(nèi)容的。
（備注：間距寬度叛薯、列寬浑吟、總寬笙纤、列數(shù)、偏置组力、是sketch中的叫法省容。）
計算公式
安全距離能設(shè)置放柵格內(nèi)或者外，放柵格內(nèi)燎字，柵格系統(tǒng)從列開始到列結(jié)束腥椒。放柵格外，柵格系統(tǒng)從安全邊距開始到安全邊距結(jié)束候衍。下圖示意笼蛛。
安全距離在內(nèi)，W 是 總寬蛉鹿、c 是列寬滨砍、i 是間距寬度、n 是列數(shù)妖异。
推薦放柵格內(nèi)惋戏。因?yàn)榘踩吘嗍遣荒芊艌D形的，而我們做圖時他膳，習(xí)慣從左側(cè)開始畫圖日川。放柵格內(nèi)，從列開始做圖矩乐，符合習(xí)慣。放柵格外回论，注意開始和結(jié)束散罕，要預(yù)留安全距離，容易出錯傀蓉。
安全距離在外欧漱，W 是 總寬、b 是列寬葬燎、i 是間距寬度误甚、n 是列數(shù)。
計算過程
因?yàn)闁鸥裣到y(tǒng)中不能輸入小數(shù)谱净，用公式計算窑邦，會出現(xiàn)不能整除情況，采用四舍五入顯示壕探，頁面內(nèi)容按照柵格布局冈钦。
W （總寬）、c （列寬）李请、i （間距寬度）瞧筛、n （列數(shù)）4個參數(shù)靈活設(shè)計厉熟，盡量保持整數(shù)，也不必過度追求整數(shù)较幌。
一般來說畫完紙面草圖揍瑟，心中有了大概布局，能確定總寬乍炉、列數(shù)绢片，這兩個參數(shù)，（實(shí)在沒想法時恩急，參考其他網(wǎng)站的布局杉畜，看下別人怎么做柵格系統(tǒng)的，根據(jù)業(yè)務(wù)再調(diào)整）衷恭，間距寬度是常見的4npx此叠，套入公式，四個值再進(jìn)行調(diào)整随珠，算出列寬灭袁。因?yàn)榱袑掚S著屏幕變化，取列寬的近似值窗看，其他三個值保持整數(shù)茸歧。
移動端例子
為什么用344px作為總寬？一方面因?yàn)榭倢捠桥紨?shù)計算方便显沈，二是常用 16px （15.5 四舍五入）作為屏幕安全距離软瞎。點(diǎn)擊偏置后面的居中按鈕，將柵格系統(tǒng)居中拉讯。
sketch里面顯示偏置是 16px涤浇，但是頁面中第一列距離畫板左側(cè)邊緣是15.5px，所以頁面中信息從15.5px處開始魔慷。
安全距離在內(nèi)
安全距離在外
用公式計算只锭，出現(xiàn)不能整除情況，因?yàn)闁鸥裣到y(tǒng)中不能輸入小數(shù)院尔，sketch采用四舍五入顯示蜻展。
網(wǎng)頁例子
語雀使用 1216px 畫板作為頁面的最大寬度⊙冢總寬1184px纵顾、24 列、16px 間距寬度隧熙。
如下示意片挂，看到柵格系統(tǒng)第一列和最后一列，到兩邊各 16px 的留白，留白是為了美觀音念，跟柵格系統(tǒng)沒有直接關(guān)系沪饺，也可以設(shè)置 12px 等其他數(shù)值留白。
柵格內(nèi)嵌套柵格
新柵格的偏置是 216px 闷愤，也就是第一列到左側(cè)畫板邊緣的距離整葡。由于不能整除，列寬取近似值讥脐。
tips
屏幕大遭居，適合使用更大的間距寬度，因?yàn)榇笃聊谎故靖嘈畔⒕闫迹噍^于小屏幕，閱讀負(fù)擔(dān)大告丢，配合更大的間距寬度枪蘑，提高易讀性。內(nèi)容越多岖免，適合使用更多的列數(shù)岳颇，用占用的列數(shù)，對內(nèi)容進(jìn)行分組颅湘。
頁面寬度變化话侧，不會改變柵格數(shù)量和間距寬度，但是列寬會變化闯参，所以內(nèi)容要從列開始瞻鹏，到列結(jié)束。這樣改變頁面寬度時鹿寨，內(nèi)容的疏密變化是均勻的乙漓。不建議從間隔開始，或者到間隔結(jié)束释移。
網(wǎng)頁自適應(yīng)，一般有最大和最小寬度寥殖，為了易讀性玩讳，不會無限變寬和變窄；超出最大寬度后嚼贡，使用2側(cè)留白熏纯，小于最小寬度后，遮擋信息粤策，實(shí)現(xiàn)信息不折疊樟澜，具有可讀性。
最大寬度和最小寬度2個臨界狀態(tài)，用設(shè)計做圖明確秩贰。跟柵格數(shù)沒有直接關(guān)系霹俺，為了減少圖數(shù)量，使用任意一個毒费，進(jìn)行柵格系統(tǒng)標(biāo)注丙唧。
常用參數(shù)。移動端觅玻，4 列常用 344px 作為總寬想际。網(wǎng)頁中，12 列常用 984px 溪厘、1008px胡本；16 列常用 992px；24 列常用 1136px畸悬、944px侧甫。具體還是要根據(jù)頁面橫向要分幾個區(qū)域，信息有多少分組傻昙，再確定柵格數(shù)量和總寬闺骚。
信息橫向分布，根據(jù)比例分為均等和比例分布2類
均等分布
平均劃分妆档，優(yōu)點(diǎn)是布局對稱僻爽，審美在線；缺點(diǎn)是信息層級一致贾惦，平庸沒有重點(diǎn)胸梆。所以有需要特別強(qiáng)調(diào)的信息不適合用，適合用在信息層級相同的內(nèi)容上须板。
單欄碰镜，位置居中。為了易讀性习瑰，通常在兩邊預(yù)留空白绪颖。用在資訊詳情頁，去除其他干擾甜奄，聚焦內(nèi)容柠横。如Medium 詳情頁、微信公眾號網(wǎng)頁版等课兄。
二欄牍氛、三欄等多欄，將頁面均等分割后烟阐，每列信息由于列寬變窄搬俊， 可讀性提高紊扬。反而不需要過多留白，往往比單欄能夠承載更多信息唉擂。均等分布餐屎，常用在對比頁面，
比例分布
用柵格占用的比例分配頁面楔敌，從第一個柵格開始啤挎，到最后一個柵格結(jié)束，是信息占用的柵格數(shù)卵凑。比例根據(jù)內(nèi)容占用的寬度來分配庆聘，通常使用12柵格，12指柵格的列數(shù)勺卢。
比例分布是不均等分布伙判，用大比例，突出重點(diǎn)內(nèi)容黑忱。在可視范圍宴抚，人眼自覺將靠近的信息分為一組，比例大的組甫煞，更容易被注意到（顏色相同的情況下）菇曲。
水平方向上，分割成比例不同的列抚吠，能直觀看到常潮。豎直方向，由于屏幕高度有限楷力，比例不明顯喊式。
下面以語雀為例，使用24列柵格萧朝。左側(cè)導(dǎo)航與右側(cè)內(nèi)容岔留，以4：20分割24列，間距寬度是16px检柬。如下圖献联。
在嘗試頁面信息布局比例過程中，一個柵格不一定適用頁面所有信息何址，為了平衡美觀視覺和柵格系統(tǒng)酱固，一方面會對寬度進(jìn)行微調(diào)，另一方面也會使用柵格內(nèi)嵌套柵格头朱。
右側(cè)內(nèi)容多，嵌套柵格龄减，能夠更精細(xì)控制內(nèi)容项钮，也能將信息安排在柵格內(nèi)。右側(cè)2部分內(nèi)容以17：7分割24列，間距寬度也是16px烁巫。
為什么會用柵格內(nèi)套柵格署隘？舉個例子，社區(qū)作為一個系統(tǒng)亚隙，由 1 到 30 棟樓組成磁餐，棟是第一層分類；每棟里面有 2 個入口阿弃，分為 2 個單元诊霹，單元是第二層分類；每個單元有 12 個家庭渣淳，家庭是第三層分類脾还。信息也有類似細(xì)分，功能分類下存在更細(xì)的劃分入愧，一個頁面會有多套柵格鄙漏。
簡單介紹，四個參數(shù)棺蛛，總寬怔蚌、列數(shù)，間距寬度旁赊，偏移位置桦踊，開發(fā)就可以設(shè)計柵格系統(tǒng)。
這四個數(shù)據(jù)在同一個硬件上彤恶，一般是不會變化的钞钙。響應(yīng)式頁面因?yàn)橐m應(yīng)移動端、pad声离、網(wǎng)頁三種屏幕變化芒炼，有必要調(diào)整這四個數(shù)據(jù)。具體根據(jù)產(chǎn)品場景术徊，合理規(guī)劃柵格本刽。
人人是生活的設(shè)計師，在實(shí)現(xiàn)自我價值過程中赠涮，內(nèi)心世界的秩序感子寓，能讓前行的腳步更堅(jiān)定，穩(wěn)固笋除。柵格系統(tǒng)規(guī)范頁面布局斜友，讓信息有序呈現(xiàn)。
