目錄：
1.什么是網格
“網格”簡單來說就是一些橫豎相互垂直的線，將頁面分為各種“列”或“模塊”。這種系統開始是書面書籍的輔助線，在打印版式中備受青睞。它可以把頁面分成許多區域，將文字或圖片變成“設計元素”填入其中。避免讓設計師在大空白頁上抓瞎。
就好比畫素描面部時候的“三庭五眼”。也是需要提前畫出比例輔助線，再在其中畫出細節。鑒于平面設計和界面設計當中有很多的共同點，通過后續演化，這種技術已完美的移植到了互聯網線上產品當中。網格系統也已成為界面設計當中不可或缺的輔助技術之一。
2.為什么要使用網格①梳理頁面
網格是一種可以梳理結構的利器。它可以讓顯示的信息更加規整且平衡。用戶希望可以快速的梳理出頁面當中的信息。如果頁面過于雜亂，影響了用戶的認知速度，后果就是會直接關閉頁面離開。
②響應式設計
現在人們會用多種不同設備去查看頁面內容。如果不按照一些標準或框架去約束設計，當網頁被縮小放大時，其中的內容就會變得異常混亂。對于用戶來說，在閱讀體驗上是災難性的。同樣也會給開發人員帶來很大的麻煩。
如果將網格當做標尺，對頁面進行很好的切分布局，那么在這種“一致性”的標準下，可以大大減少開發的成本。這種“一致性”，也讓整套頁面看下來更有節奏，因為用戶的眼睛一直在被無形的框架引導著。無論頁面的大小如何變，框架依然會讓頁面保持整齊。
③效率性設計
一整套頁面都用同樣的框架來設計，可以讓我們不再為調整細節而消耗時間。可以很好地做到重復性使用，大大提高設計效率。在對接項目的時候，對接人也可以按照標準快速上手。后期修改或改版時，也有規律可循。
④專業性體現
當甲方因不滿意而讓我們修改頁面的時候，有一部分原因是我們沒有很好地表達出自己的想法，沒有讓甲方充分理解我們的思考過程。當頁面附帶上網格且添加了說明，這種嚴謹專業的形式勢必會減少溝通成本，讓對方更加了解我們的設計思路，有理有據體現專業性。
3.網格系統中都包括什么
既然是系統，那就不可能是簡單的幾根輔助線這么簡單了。網格系統中，主要包括的元素有“寬度”、“列”、“水槽”以及“邊距”。
①寬度
內容區域寬度，是我們的主要設計區域。但也有一些特殊的設計，比如懸浮的裝飾、內容的延展等等，是可以合理超出內容區域寬度的。不過，核心內容需要在寬度內顯示。
別對映像研出手官網
有一種網格被稱作“網格之王”，也被叫做“960網格”，它的內容區域寬度是960像素。原理是現代顯示器至少支持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等數字。這使其成為一個高度靈活的數字，且有更高的延展性。因此，被稱作“網格之王”并不為過。
有很多關于“960網格”的內容
現在，顯示器的屏幕尺寸越來越大，“960px”的經典尺寸在某些領域網站的頁面中顯得有些力不從心。比如視頻類網站、電商網站、工作室網站等等。這些網站很多都強調視覺沖擊力或者是信息量巨大。因此，個人認為網站的寬度還是要“具體內容具體分析”。需結合所屬領域或展示內容，以及公司規范來制定具體內容區域寬度。
國內的設計類網站寬度一般在1200-；視頻類網站在1600-不等；電商類網站在左右，可供參考。
②列
最常使用的列數是12列、16列等，每列寬為60-80像素。但列數和列寬的數值并不是絕對固定，和設備以及展示內容有很大關系。比如在PC端上是16列，到了平板上就會變成8列，手機端又變成6列或4列。像一些個人網站、圖庫網站并沒有那么多的內容，可能僅需4列就足夠了。而后臺頁面因為展示內容非常多，信息量大。因此，可能會需要更多的列數。
③水槽
水槽是列與列之間的間隔，最小間距不小于8像素。常用的間距有8px、10px、20px等等，數字并不固定，和列一樣需要匹配具體內容。列+水槽的組合，也可被稱為“柵格”。
④邊距
邊距是內容區域之外的內容。我們左右拉伸一個頁面，內容區域與兩邊邊界始終有一段留白區域ps中的網格系統，保護著內容不與顯示器邊界擠在一起。這個邊距一般是不能放任何內容的（特定的裝飾元素除外）。類似于印刷品中的“出血”。數值并不需要太多，一般在10-20px左右。而移動端的左右邊距尺寸在20px-40px不等。
4.如何制作網格系統①公式
假設內容區域寬度為W，列寬為a，列數為n，水槽/外邊距寬為i
那么可得W=(a*n)+(i*n)-i
因為a+i=A
所以W=(A*n)-i
例：
當我們使用12列網格設計，每一列網格寬為80px，水槽寬為20px；套入公式可得W=(80+20)*12-20=1180 內容區域的寬度為1180像素。得到了公式，我們只要填入相對應數值，就可以得出其他的數值。
另一種情況：
我們可以設定內容區域為整數值，外邊距為20px；在前端開發時，可以使用css中的屬性擠出外邊距。這樣可以保證寬度的整數值尺寸。
像素范官網
②工具
a.PS參考線設置
新建畫布——視圖——新建參考線版面——調整數值
b.參考線設置
新建畫布——view（視圖）—— （布局設置）——調整以數值
c.網站Grid.Guide
右上角調整寬度、列數、外邊距即可。
③注意事項
a.如果不確定寬度、列數等參數，我們可以先畫草圖，并通過觀察測量相關主流產品尋找靈感。
b.時刻考慮自適應的問題，要考慮頁面在不同寬度以及移動端時候的狀態。網格系統要時刻保持并使用。
c.不能為了網格而網格。我個人也接觸過一些頁面的源文件，發現里面的網格雖然規范，但與實際內容并不匹配。所以，網格是手段，而不是目的。
5.如何使用網格系統
①8點網格
建議我們的設計元素都要是8的倍數。因為，大多數流行的屏幕尺寸都可以被8整除。“8”這個數字在開發人員那里更容易理解，且更有說服力。同時ps中的網格系統，用8作為設計的最小單位是可以除盡的。8/2=4、4/2=2、2/2=1；而其他數字比如6或者10，只能除一次。再縮小就會出現半像素的情況。iOS的@1x，@2x，@3x圖，用 8 為基數可減少出現是奇數造成一像素偏移模糊的情況。
②網格類型
a.流動網格
當窗口縮放時，內容等比例縮小。到達臨界值時，內容排版會改變。
b.固定網格
固定網格，列寬和水槽寬不會改變。當窗口縮放到達臨界值時，內容條目的排版會發生改變。
c.混合網格
混合網格，頁面縮放時，內容并不是等比例縮放。在不同的頁面寬度，會有不同的縮放比。
③模塊布局
通過網格的制作，給我們的頁面提供了約束后的空間。我們可以在這樣規整后的空間中，進行各種模塊化的分布設計。
④設計邊界
核心設計內容要在網格系統內。同時，設計內容的邊界與網格的邊界是一致的。如果設計邊界不與網格邊界對齊，就會出現多余的留白。
內部的水槽不推薦放設計元素。水槽不僅僅是網格的間隔，同時也是設計元素的間隔。
⑤保持創意
網格系統雖然可以讓我們的設計更便捷、更有效率、更有一致性，但這也帶來了同質化的問題。如今同屬性的網站或APP，比如電商類、視頻類頁面的排版都很相似。雖然，確保了整體的規范以及專業性，但是頁面變得不再那么新穎。這不僅需要我們在視覺上更加吸引眼球，在排版布局上也要下功夫。必須在兩者之間找到平衡。
6.總結
1.什么是網格：一種幫助設計師梳理頁面并提供合理約束的手段。
2.為什么用網格：效率、規范化、延續性、專業性。
3.網格系統中都包括什么：內容寬度、列、水槽、外邊距。
4.如何制作網格系統：ps新建參考線版面、--view（視圖）-- （布局設置） 、網站Grid.Guide
5.如何使用網格：設計元素均用8的倍數、模塊化設計、外邊界與內間隔、保持創意。
網格系統是幫助我們更好完成設計的方法，而不是制約我們的工具。規范化、專業性都十分重要，但對于設計來說我們的創意更不能丟失。網格系統幫助我們更有效率的進行設計，給我們節省了調整細節以及復用等問題的時間，這樣就可以讓我們更好的在排版上下功夫。
參考文章
1.
2.
3.
4.:////2x-grid//
by