他們都在用的方法
網格為什麼在國內很多公司不知道，甚至有的少，一方面原因是大家瞭解的少，或者不會用，不瞭解它正確的用法，所以沒有普及開，但是國外來說網格在他們設計中卻是至關重要的，來看pinterest的界面中是如何運用的：
▲ 上圖是我從pin的界面中截圖的兩個頁面，然後從中算出它們的網格系統，可以看出他們是運用一個6列網格系統，所有的圖片各佔3列，按鈕佔6列，每個頁面的左右邊距相同。
▲ 可以看出pin的設計中每個圖片都佔據著三個格子，左右邊距對齊，文字信息和圖標都貼緊網格系統 訪問按鈕也同樣的撐滿六個格子，通過這種形式來保證頁面的統一。
airbnb大家都知道，設計和體驗都非常棒，它的設計很有秩序感，塊面突出，那麼airbnb是怎麼定義規範的呢。
▲ 除了常用的字體字號，組件外，同樣也把網格系統融於到它們的設計血液裡面，一起來看看線上的設計案例：
▲ airbnb採用的左右邊距48，中間24的網格系統，可以看出這套柵格系統留白會比較多，在瀏覽airbnb的設計頁面時，會要人感覺非常舒服原因也是如此。
被稱為規範鼻祖的谷歌在最新的設計語言中，第一次把柵格系統提出來講，谷歌的產品覆蓋手機，web，以及平板，那麼谷歌是如何去用柵格系統來定義產品體系呢？
▲ 谷歌的柵格系統除了傳統的邊距和水槽，內容區域外，同時也定義了4欄，可以在谷歌官網去詳細瞭解 https://material.io/design/。
網格如何使用
上面我們分析了國外優秀APP都在運用網站，但是細節同學看見這裡肯定有疑惑看頂部兩個按鈕，還有下面文字按鈕都沒有貼齊網格？
▲ 佈局
這裡其實有一個很重要的知識點就是網格佈局，很重要一個知識點就是網格佈局，需要把頁面中常用的佈局形式劃分出來。
▲ 運用了一排一佈局
▲ 運用了一排二佈局
▲ 運用了一排一佈局
不知道這樣講解大家有沒有明白，其實網格建立好了只是第一步，更多是運用佈局的組合在設計中運用，當你的內容需要佔住水槽時候，這個時候是連著列一起用的。
▲ 運用了橫向網格佈局
▲ 一個完整的網格系統是由網格+佈局組成，先定完網格，再把佈局設計好。
網格運用場景
▲ 網頁：目前主流的網站，特別一些電商和新聞網站，大多使用網格系統佈局。
▲ 書籍：目前印刷中數據很多排版佈局也基本運用這網格系統。
▲ 報紙：傳統的報紙，通過網格來定義報紙每個框架裡面放什麼內容。
▲ 平面設計：好的平面設計一定是很好通過網格設計，來輔助佈局讓整個設計有序的同時充滿美感。
▲ 移動端：包括手機系統，平板電腦等等。
可以說網格系統在設計中無處不在，掌握了它我們才是對設計進行了基礎的入門。
如何從0到1定義網格
1.瞭解你所設計的內容
關於怎麼設置網格，首先一點我們得弄清楚這個設計，你需要傳遞的設計主張是什麼，是高端的還是熱鬧的，還是冷靜的，你的設計調性前期需要根據產品背景，用戶人群去了解清楚。
▲ 如果是為一個商場超市海報做設計，那麼你的設計主張就是“熱鬧”，那麼整個網格系統一定需要設計的緊湊一些，這樣才能讓裡面內容看起來更加熱鬧。
▲ 假如是為一個藝術品網站做設計，那麼你的整個設計主張可能就高雅，高貴，那麼你對應的網格系統一定不是超市的那種，一定是需要留白很舒服，呼吸感很多的。
▲ 假如是為一個奢侈品的電商網站，那麼一定你的網格系統要簡單，足夠簡單，讓整個頁面內容都在商品上，可能網格列表只需要3列。
▲ 假設是需要設計一個高端，雜誌感的海報，那麼你的網格系統一定也需要根據內容去設計。
網格的參數怎麼定
新手問我最多的就是參數設置多大，邊距留多大？水槽留多大？內容區域多大？
沒有標準答案，每個產品不同，運用場景，用戶人群，都各不相同 ，沒有一個標準的參數，只有我們多試，找到合適的那個就是最好，但是有一些常用的網格參數可以分享給大家
▲ 移動端經典網格：比如Airbnb
▲ 移動端經典網格：pinterest
▲ 移動端經典網格：pinterest
▲ 移動端經典網格
▲ 移動端經典網格
網格不是固定的，是可以去變化的，有一個簡單原理就是，網格越多列數越多，佈局越靈活，一定根據實際頁面去定義好，但是切記：一套APP裡面最多一個網格系統，如果多個就失去系統的意義了。
UI中怎麼運用
這也是很多新人運用網格容易疑惑地方，如何對齊？
▲ 內容一定放在單元格內，並保證它們的對齊，貼緊網格，水槽裡面一般不放內容，如果放需要讓水槽和列一起使用。
▲ 避免水槽和邊距太大（上圖來自星球用戶Tony的總結）
製作網格的工具
▲ 推薦我經常使用的，來自國內開發團隊flavor的插件工具，非常好用
▲ 在線網格生成工具可以根據你輸入的參數和你設置好不同的組合形式，但是別太依賴於工具，正如我前面所說，網格參數是需要你頁面調性決定。
最後
網格系統到這裡就講完了，網格更多還是靠大家在設計中經常練習這樣才能玩熟練了，相信我，網格掌握會了，能讓你設計進步至少3年，希望大家可以學習並掌握此方法。
優逸客（微信公眾號sx-uek）UI設計、Web全棧開發、JAVA開發等課程免費試聽課火熱報名中，願這個時代的每個人都可以站在風口，成就更好的自己！
4月學習堅持不懈，9月就業傲視群雄！
