網(wǎng)格系統(tǒng)總結(jié)：從初識到應(yīng)用
目錄：
1.什么是網(wǎng)格
2.為什么要使用網(wǎng)格
3.網(wǎng)格系統(tǒng)中都包括什么
4.如何制作網(wǎng)格系統(tǒng)
5.如何使用網(wǎng)格系統(tǒng)
6.總結(jié)
“網(wǎng)格”簡單來說就是一些橫豎相互垂直的線宏粤，將頁面分為各種“列”或“模塊”跟伏。這種系統(tǒng)開始是書面書籍的輔助線，在打印版式中備受青睞销钝。它可以把頁面分成許多區(qū)域，將文字或圖片變成“設(shè)計元素”填入其中琐簇。避免讓設(shè)計師在大空白頁上抓瞎蒸健。
就好比畫素描面部時候的“三庭五眼”。也是需要提前畫出比例輔助線婉商，再在其中畫出細(xì)節(jié)似忧。鑒于平面設(shè)計和界面設(shè)計當(dāng)中有很多的共同點，通過后續(xù)演化丈秩，這種技術(shù)已完美的移植到了互聯(lián)網(wǎng)線上產(chǎn)品當(dāng)中盯捌。網(wǎng)格系統(tǒng)也已成為界面設(shè)計當(dāng)中不可或缺的輔助技術(shù)之一。
①梳理頁面
網(wǎng)格是一種可以梳理結(jié)構(gòu)的利器蘑秽。它可以讓顯示的信息更加規(guī)整且平衡饺著。用戶希望可以快速的梳理出頁面當(dāng)中的信息。如果頁面過于雜亂肠牲，影響了用戶的認(rèn)知速度幼衰，后果就是會直接關(guān)閉頁面離開。
②響應(yīng)式設(shè)計
現(xiàn)在人們會用多種不同設(shè)備去查看頁面內(nèi)容缀雳。如果不按照一些標(biāo)準(zhǔn)或框架去約束設(shè)計渡嚣，當(dāng)網(wǎng)頁被縮小放大時，其中的內(nèi)容就會變得異城蜗眨混亂严拒。對于用戶來說，在閱讀體驗上是災(zāi)難性的竖独。同樣也會給開發(fā)人員帶來很大的麻煩裤唠。
如果將網(wǎng)格當(dāng)做標(biāo)尺，對頁面進(jìn)行很好的切分布局莹痢，那么在這種“一致性”的標(biāo)準(zhǔn)下种蘸，可以大大減少開發(fā)的成本。這種“一致性”竞膳，也讓整套頁面看下來更有節(jié)奏航瞭，因為用戶的眼睛一直在被無形的框架引導(dǎo)著。無論頁面的大小如何變坦辟，框架依然會讓頁面保持整齊刊侯。
③效率性設(shè)計
一整套頁面都用同樣的框架來設(shè)計，可以讓我們不再為調(diào)整細(xì)節(jié)而消耗時間锉走”醭梗可以很好地做到重復(fù)性使用藕届，大大提高設(shè)計效率。在對接項目的時候亭饵，對接人也可以按照標(biāo)準(zhǔn)快速上手休偶。后期修改或改版時，也有規(guī)律可循辜羊。
④專業(yè)性體現(xiàn)
當(dāng)甲方因不滿意而讓我們修改頁面的時候踏兜，有一部分原因是我們沒有很好地表達(dá)出自己的想法，沒有讓甲方充分理解我們的思考過程八秃。當(dāng)頁面附帶上網(wǎng)格且添加了說明碱妆，這種嚴(yán)謹(jǐn)專業(yè)的形式勢必會減少溝通成本，讓對方更加了解我們的設(shè)計思路喜德，有理有據(jù)體現(xiàn)專業(yè)性山橄。
既然是系統(tǒng)垮媒，那就不可能是簡單的幾根輔助線這么簡單了舍悯。網(wǎng)格系統(tǒng)中，主要包括的元素有“寬度”睡雇、“列”萌衬、“水槽”以及“邊距”。
①寬度
內(nèi)容區(qū)域?qū)挾人В俏覀兊闹饕O(shè)計區(qū)域秕豫。但也有一些特殊的設(shè)計，比如懸浮的裝飾观蓄、內(nèi)容的延展等等混移，是可以合理超出內(nèi)容區(qū)域?qū)挾鹊摹２贿^侮穿，核心內(nèi)容需要在寬度內(nèi)顯示歌径。
有一種網(wǎng)格被稱作“網(wǎng)格之王”，也被叫做“960網(wǎng)格”亲茅，它的內(nèi)容區(qū)域?qū)挾仁?60像素回铛。原理是現(xiàn)代顯示器至少支持1024×768像素分辨率，而960可整除2克锣、3茵肃、4、5袭祟、6验残、8、10巾乳、12您没、15故俐、16、20紊婉、24药版、30、32喻犁、40槽片、48、60肢础、64还栓、80、96传轰、120剩盒、160、192慨蛙、240辽聊、320和480等數(shù)字。這使其成為一個高度靈活的數(shù)字期贫，且有更高的延展性跟匆。因此，被稱作“網(wǎng)格之王”并不為過通砍。
現(xiàn)在玛臂，顯示器的屏幕尺寸越來越大，“960px”的經(jīng)典尺寸在某些領(lǐng)域網(wǎng)站的頁面中顯得有些力不從心封孙。比如視頻類網(wǎng)站迹冤、電商網(wǎng)站、工作室網(wǎng)站等等虎忌。這些網(wǎng)站很多都強(qiáng)調(diào)視覺沖擊力或者是信息量巨大泡徙。因此，個人認(rèn)為網(wǎng)站的寬度還是要“具體內(nèi)容具體分析”呐籽。需結(jié)合所屬領(lǐng)域或展示內(nèi)容锋勺，以及公司規(guī)范來制定具體內(nèi)容區(qū)域?qū)挾取?/p>
國內(nèi)的設(shè)計類網(wǎng)站寬度一般在1200-1400px；視頻類網(wǎng)站在1600-1800px不等狡蝶；電商類網(wǎng)站在1200px左右庶橱，可供參考。
②列
最常使用的列數(shù)是12列贪惹、16列等苏章，每列寬為60-80像素。但列數(shù)和列寬的數(shù)值并不是絕對固定，和設(shè)備以及展示內(nèi)容有很大關(guān)系枫绅。比如在PC端上是16列泉孩，到了平板上就會變成8列，手機(jī)端又變成6列或4列并淋。像一些個人網(wǎng)站寓搬、圖庫網(wǎng)站并沒有那么多的內(nèi)容，可能僅需4列就足夠了县耽。而后臺頁面因為展示內(nèi)容非常多句喷，信息量大。因此兔毙，可能會需要更多的列數(shù)唾琼。
③水槽
水槽是列與列之間的間隔，最小間距不小于8像素澎剥。常用的間距有8px锡溯、10px、20px等等哑姚，數(shù)字并不固定祭饭，和列一樣需要匹配具體內(nèi)容。列+水槽的組合蜻懦，也可被稱為“柵格”甜癞。
④邊距
邊距是內(nèi)容區(qū)域之外的內(nèi)容。我們左右拉伸一個頁面宛乃，內(nèi)容區(qū)域與兩邊邊界始終有一段留白區(qū)域，保護(hù)著內(nèi)容不與顯示器邊界擠在一起蒸辆。這個邊距一般是不能放任何內(nèi)容的（特定的裝飾元素除外）征炼。類似于印刷品中的“出血”。數(shù)值并不需要太多躬贡，一般在10-20px左右谆奥。而移動端的左右邊距尺寸在20px-40px不等。
①公式
假設(shè)內(nèi)容區(qū)域?qū)挾葹閃拂玻，列寬為a酸些，列數(shù)為n，水槽/外邊距寬為i
那么可得W=(a*n)+(i*n)-i ?
因為a+i=A
所以W=(A*n)-i ?
例：
當(dāng)我們使用12列網(wǎng)格設(shè)計檐蚜，每一列網(wǎng)格寬為80px魄懂，水槽寬為20px；套入公式可得W=(80+20)*12-20=1180 ? 內(nèi)容區(qū)域的寬度為1180像素闯第。得到了公式市栗，我們只要填入相對應(yīng)數(shù)值，就可以得出其他的數(shù)值。
另一種情況：
我們可以設(shè)定內(nèi)容區(qū)域為整數(shù)值填帽，外邊距為20px蛛淋；在前端開發(fā)時，可以使用css中的Margin屬性擠出外邊距篡腌。這樣可以保證寬度的整數(shù)值尺寸褐荷。
②工具
a.PS參考線設(shè)置
新建畫布——視圖——新建參考線版面——調(diào)整數(shù)值
b.Sketch參考線設(shè)置
新建畫布——view（視圖）——Layout settings（布局設(shè)置）——調(diào)整以數(shù)值
c.網(wǎng)站Grid.Guide
右上角調(diào)整寬度、列數(shù)嘹悼、外邊距即可诚卸。
③注意事項
a.如果不確定寬度、列數(shù)等參數(shù)绘迁，我們可以先畫草圖合溺，并通過觀察測量相關(guān)主流產(chǎn)品尋找靈感。
b.時刻考慮自適應(yīng)的問題缀台，要考慮頁面在不同寬度以及移動端時候的狀態(tài)棠赛。網(wǎng)格系統(tǒng)要時刻保持并使用。
c.不能為了網(wǎng)格而網(wǎng)格膛腐。我個人也接觸過一些頁面的源文件睛约，發(fā)現(xiàn)里面的網(wǎng)格雖然規(guī)范，但與實際內(nèi)容并不匹配哲身。所以辩涝，網(wǎng)格是手段，而不是目的勘天。
①8點網(wǎng)格
建議我們的設(shè)計元素都要是8的倍數(shù)怔揩。因為，大多數(shù)流行的屏幕尺寸都可以被8整除脯丝∩滩玻“8”這個數(shù)字在開發(fā)人員那里更容易理解，且更有說服力宠进。同時晕拆，用8作為設(shè)計的最小單位是可以除盡的。8/2=4材蹬、4/2=2实幕、2/2=1；而其他數(shù)字比如6或者10堤器，只能除一次昆庇。再縮小就會出現(xiàn)半像素的情況。iOS的@1x吼旧，@2x凰锡，@3x圖，用 8 為基數(shù)可減少出現(xiàn)是奇數(shù)造成一像素偏移模糊的情況。
②網(wǎng)格類型
a.流動網(wǎng)格
當(dāng)窗口縮放時掂为，內(nèi)容等比例縮小裕膀。到達(dá)臨界值時，內(nèi)容排版會改變勇哗。
b.固定網(wǎng)格
固定網(wǎng)格昼扛，列寬和水槽寬不會改變。當(dāng)窗口縮放到達(dá)臨界值時欲诺，內(nèi)容條目的排版會發(fā)生改變抄谐。
c.混合網(wǎng)格
混合網(wǎng)格，頁面縮放時扰法，內(nèi)容并不是等比例縮放蛹含。在不同的頁面寬度，會有不同的縮放比塞颁。
③模塊布局
通過網(wǎng)格的制作浦箱，給我們的頁面提供了約束后的空間。我們可以在這樣規(guī)整后的空間中祠锣，進(jìn)行各種模塊化的分布設(shè)計酷窥。
④設(shè)計邊界
核心設(shè)計內(nèi)容要在網(wǎng)格系統(tǒng)內(nèi)。同時伴网，設(shè)計內(nèi)容的邊界與網(wǎng)格的邊界是一致的蓬推。如果設(shè)計邊界不與網(wǎng)格邊界對齊，就會出現(xiàn)多余的留白澡腾。
內(nèi)部的水槽不推薦放設(shè)計元素沸伏。水槽不僅僅是網(wǎng)格的間隔，同時也是設(shè)計元素的間隔蛋铆。
⑤保持創(chuàng)意
網(wǎng)格系統(tǒng)雖然可以讓我們的設(shè)計更便捷馋评、更有效率、更有一致性刺啦，但這也帶來了同質(zhì)化的問題。如今同屬性的網(wǎng)站或APP纠脾，比如電商類玛瘸、視頻類頁面的排版都很相似。雖然苟蹈，確保了整體的規(guī)范以及專業(yè)性糊渊，但是頁面變得不再那么新穎。這不僅需要我們在視覺上更加吸引眼球慧脱，在排版布局上也要下功夫渺绒。必須在兩者之間找到平衡。
1.什么是網(wǎng)格：一種幫助設(shè)計師梳理頁面并提供合理約束的手段。
2.為什么用網(wǎng)格：效率宗兼、規(guī)范化躏鱼、延續(xù)性、專業(yè)性殷绍。
3.網(wǎng)格系統(tǒng)中都包括什么：內(nèi)容寬度染苛、列、水槽主到、外邊距茶行。
4.如何制作網(wǎng)格系統(tǒng)：ps新建參考線版面、sketch--view（視圖）--Layout settings（布局設(shè)置） 登钥、網(wǎng)站Grid.Guide
5.如何使用網(wǎng)格：設(shè)計元素均用8的倍數(shù)畔师、模塊化設(shè)計、外邊界與內(nèi)間隔牧牢、保持創(chuàng)意看锉。
網(wǎng)格系統(tǒng)是幫助我們更好完成設(shè)計的方法，而不是制約我們的工具结执。規(guī)范化度陆、專業(yè)性都十分重要，但對于設(shè)計來說我們的創(chuàng)意更不能丟失献幔。網(wǎng)格系統(tǒng)幫助我們更有效率的進(jìn)行設(shè)計懂傀，給我們節(jié)省了調(diào)整細(xì)節(jié)以及復(fù)用等問題的時間，這樣就可以讓我們更好的在排版上下功夫蜡感。
參考文章
1.http://printingcode.runemadsen.com/lecture-grid/
2.https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
3.https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
4.https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
5.https://www.carbondesignsystem.com/guidelines/2x-grid/basics/
