寫在開頭：關於網頁柵格佈局的概念已經無需再進行描述，一般來說，有經驗的web ui 設計師都應該聽說並運用過。但網上有些關於柵格化系統的文章講的非常理論化，又是演算法又是模組，而且和響應式佈局混在一起，讓新晉的網頁設計師們簡直無從下手，所以這裡以案例來說明何時採用以及怎麼最快的建立柵格化系統。在所有關於UI的文章中，我會反覆強調和前端開發人員的溝通，因為他們是你設計方案的執行者，這一點非常重要。
1.把柵格化設計和柵格化佈局分開
強調柵格化設計（grid-design）和柵格化佈局（css grid）分開描述，是個人理解這完全屬於兩個不同的工作，前者針對網頁設計師，而後者針對前端開發人員。柵格化設計是不需考慮頁面的響應的基於柵格系統的設計，主要是為了提高網頁的規範性。對於一些中規中矩的網站，或者說一般創意型的網站，柵格化設計還是非常推薦的，尤其是一些規模大週期長，後期需要不斷迭代的專案，柵格化設計讓網頁呈現出專業可信賴感，並有助於後期的維護。而柵格化佈局，特指前端攻城獅使用的css框架，來實現頁面的響應式佈局。
拿到一個網站的設計需求時，先確定是不是要單獨開發移動版網站，因為響應式佈局固然兼顧了手機端，但受載入速度、手機瀏覽器、自由度等等的影響，如綜合電商之類頁面複雜的網站如果不做單獨的移動站，單純依靠響應式佈局，在手機端的表現就是個渣渣，所以，如果會開發移動版網站的話，恭喜設計師，即你需要的只是柵格化設計，也就是廣義上的柵格系統，但如果希望響應式網頁取代移動網頁，那就需要特殊的柵格系統了。我在後面會分開來介紹。絕大多數的工作流程是設計師把方案交付給前端，前端再考慮實現方法，現在，這種工作流程需要優化一下，即在開始設計前與開發人員的一次深度溝通。提前溝通的好處在於，你瞭解他們的工作方式，而通過溝通，設計師需要獲得的更重要的一點資訊是，網站是不是需要做成響應式，這是後面建立柵格系統的關鍵。
響應式設計只是網頁設計的一個折中方案，依賴於專案實際情況進行選擇。對於設計師來說，如果沒有必須的要求，可選擇廣義的柵格系統，並在此基礎上自由發揮創意。
2.絕不萬能的柵格化系統
對於是否採用柵格化設計，採用下面幾個案例說明一下：
針對這三個具有代表性的案例，柵格化設計是沒有必要的。理由很簡單，柵格的優點也是缺點，規範意味著統一也意味著限制，在以上的案例中，無需用柵格來限制設計師的靈感，畢竟這個社會，還是需要設計感的。
但絕大多數情況下，推薦柵格化設計。尤其是圖文混排、版塊很多的網站，柵格化設計會讓內容雜亂無章的頁面呈現清爽感。
關於柵格化佈局，方案非常多，來看下面幾個案例，我們都稱之為柵格化設計。
對於不需要考慮頁面響應（換句話說，和框架無關）的網頁設計，原則可以簡化成一句話：“由設計師自由決定”。
3.柵格化設計的引數
網上搜尋結果最熱的960 gird柵格系統從2009年就開始正式推出，但至今，仍然有很多設計師在使用，除了考慮到顯示裝置的解析度，還依賴於960 gird的靈活性。所以，對於新晉web ui來說，採用960 grid 仍然是最佳的方案，不會出彩但也不會出錯。如果是考慮到寬屏的設計（需要捨棄一部分解析度不高的使用者），可以把柵格化系統的寬度建為980甚至以上。但沒有柵格化設計經驗的設計師需要注意，這裡說的960是含邊距部分，換句話說，在psd文件中，你的內容部分是950px，柵格化版面可以藉助一些非常好用的線上工具，比如知名的Grid.Guide，這是12列柵格在內容寬度950下的三種版式規範，你也可以使用24列，靈活度更高。
從圖中可以看出，這三種方案列寬column width和間距gutter不同，剩下的工作對於ui設計師來說就簡單了很多，你可以把版式規範的png格式下載下來，作為你網頁設計的基礎版塊，在此基礎上進行列的劃分。或者只是以這個引數為基礎，重新建立參考線（我更推薦這種方式，尤其photoshop cc2017的新建參考線版面，裝訂線對應Gutter，列寬對應column width）。我簡單的拿版式規範做了個頁面設計示意圖，這就是基於柵格系統設計的優點，在劃分列時，有理可依，有據可循。
當然，既然是設計師，就可以感性的元素再多一些。比如，你希望更多的留白，就可以採用間距值較大的柵格版式，只要整個網站保持一個統一的版式即可。下圖是當內容寬度為1200時生成的柵格系統，你還可以嘗試很多方案，但Max Width的設定並不是那麼隨意，這個取決於網站的定位。
至於高度和垂直間距，柵格化系統並沒有統一的準則，設計師可以採用一些黃金分割之類滿滿的都是設計感之類的值，或者垂直間距與柵格系統的間距相同或是整倍，總之，也需要一個規範指導全站設計。
柵格系統的引數根據專案的實際情況，儘量建立10的倍數或8的倍數（google material design推薦）。
4.柵格化佈局的引數
其實在寫這一部分，我是有些心虛的，因為自己並不是前端，只是一知半解的瞭解了一點相關的知識，所以有不對的地方，也歡迎提出。在前面提到過，如果網站的需求是響應式的設計，這時，設計師們一定一定先問一下前端他們準備如何實現響應式佈局，而不是把設計稿完成後交給他們後YY他們能百分百給你復現你的設計稿。
關於響應式的柵格系統，首先宣告一點，當前端樂意並瞭解CSS原理和框架的構建方式時，可以構建其他樣式的網格，比如7、9、11、13等等，甚至各種異形網格，但在絕大多數情況下，更多的前端攻城獅青睞於高（tou）效(lan)，而他們常用的css框架除了Bootstrap(寬480/768/992/1200,12列)，還有一堆叫不出名字的輕量css框架（畢竟柵格系統只是Bootstrap的一部分，如果只是需要一個響應式的css的話，可選的非常多，比如960.gis），除此之外，有可能你那可愛的前端攻城獅用的是flexbox實現響應式彈性佈局，所以在一切未知確定下來之前，請放下架子，請教一下開發人員，因為雖然不想承認，但這種情況下是前端來指導設計。值得慶幸的是，這種情況在現實中非常少的，（但不排除你接手的是一個二次開發的專案等等之類），確定他們使用哪種框架之後，設計師可以開始自己的工作了。
下面也舉個例子，是960gis的。
看完你也許會明白為什麼涉及到柵格化佈局需要前端來確定了，960gis的css框架給出了三種方案，24列16列12列，設計師要在這個基礎上進行設計。一旦需要柵格化佈局，意味著設計師自由發揮的空間再次縮減，只有在這三個方案上選一種。這些方案從何而來呢？很簡單，你只要向前端索取他使用的框架的psd模板即可，裡面參考線都是建好的。而前端一定會非常樂意幫你這個忙，理由很簡單，你按照他使用的框架規範進行設計也是在一定程度上縮減他的工作量，皆大歡喜。比如下面這張，就是目前最新的Bootstrap4的psd檔案的截圖。
設計師也可以自給自足，一般這些css框架庫都會提供下載途徑。尤其是Bootstrap，作為成熟的框架，很多模板檔案可以套用。
柵格化佈局以使用的css框架庫為準則，讓前端開發提供給設計師再好不過。