網(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)站很多都強調(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/
