寫在開頭：關於網頁柵格布局的概念已經無需再進行描述，一般來說，有經驗的web ui 設計師都應該聽說並運用過。但網上有些關於柵格化系統的文章講的非常理論化，又是演算法又是模組，而且和響應式布局混在一起，讓新晉的網頁設計師們簡直無從下手，所以這裡以案例來說明何時採用以及怎麼最快的建立柵格化系統。在所有關於ui的文章中，我會反覆強調和前端開發人員的溝通，因為他們是你設計方案的執行者，這一點非常重要。
強調柵格化設計（grid-design）和柵格化布局（css grid）分開描述，是個人理解這完全屬於兩個不同的工作，前者針對網頁設計師，而後者針對前端開發人員。柵格化設計是不需考慮頁面的響應的基於柵格系統的設計，主要是為了提高網頁的規範性。對於一些中規中矩的**，或者說一般創意型的**，柵格化設計還是非常推薦的，尤其是一些規模大周期長，後期需要不斷迭代的專案，柵格化設計讓網頁呈現出專業可信賴感，並有助於後期的維護。而柵格化布局，特指前端攻城獅使用的css框架，來實現頁面的響應式布局。
拿到乙個**的設計需求時，先確定是不是要單獨開發移動版**，因為響應式布局固然兼顧了手機端，但受載入速度、手機瀏覽器、自由度等等的影響，如綜合電商之類頁面複雜的**如果不做單獨的移動站，單純依靠響應式布局，在手機端的表現就是個渣渣，所以，如果會開發移動版**的話，恭喜設計師，即你需要的只是柵格化設計，也就是廣義上的柵格系統，但如果希望響應式網頁取代移動網頁，那就需要特殊的柵格系統了。我在後面會分開來介紹。絕大多數的工作流程是設計師把方案交付給前端，前端再考慮實現方法，現在，這種工作流程需要優化一下，即在開始設計前與開發人員的一次深度溝通。提前溝通的好處在於，你了解他們的工作方式，而通過溝通，設計師需要獲得的更重要的一點資訊是，**是不是需要做成響應式，這是後面建立柵格系統的關鍵。
響應式設計只是網頁設計的乙個折中方案，依賴於專案實際情況進行選擇。對於設計師來說，如果沒有必須的要求，可選擇廣義的柵格系統，並在此基礎上自由發揮創意。對於是否採用柵格化設計，採用下面幾個案例說明一下：
1.企業站之類-以介紹幾種單一產品為主.png
2.功能型**.png
3.不拘泥形式的設計形式.jpg
針對這三個具有代表性的案例，柵格化設計是沒有必要的。理由很簡單，柵格的優點也是缺點，規範意味著統一也意味著限制，在以上的案例中，無需用柵格來限制設計師的靈感，畢竟這個社會，還是需要設計感的。
但絕大多數情況下，推薦柵格化設計。尤其是**混排、版塊很多的**，柵格化設計會讓內容雜亂無章的頁面呈現清爽感。
關於柵格化布局，方案非常多，來看下面幾個案例，我們都稱之為柵格化設計。
4.廣義的柵格化系統-無間距的單元格.jpg
5.廣義的柵格化系統-有間距的單元格.jpg
6.廣義的柵格化系統-有間距的單元格.png
對於不需要考慮頁面響應（換句話說，和框架無關）的網頁設計，原則可以簡化成一句話：「由設計師自由決定」。
grid-guide自動生成的柵格系統方案（寬950-12列）.png
基於960grid系統的版塊劃分示意.png
當然，既然是設計師，就可以感性的元素再多一些。比如，你希望更多的留白，就可以採用間距值較大的柵格版式，只要整個**保持乙個統一的版式即可。下圖是當內容寬度為1200時生成的柵格系統，你還可以嘗試很多方案，但max width的設定並不是那麼隨意，這個取決於**的定位。
grid-guide自動生成的寬1180的柵格系統方案（24列）.png
至於高度和垂直間距，柵格化系統並沒有統一的準則，設計師可以採用一些**分割之類滿滿的都是設計感之類的值，或者垂直間距與柵格系統的間距相同或是整倍，總之，也需要乙個規範指導全站設計。
柵格系統的引數根據專案的實際情況，盡量建立10的倍數或8的倍數（google material design推薦）。其實在寫這一部分，我是有些心虛的，因為自己並不是前端，只是一知半解的了解了一點相關的知識，所以有不對的地方，也歡迎提出。在前面提到過，如果**的需求是響應式的設計，這時，設計師們一定一定先問一下前端他們準備如何實現響應式布局，而不是把設計稿完成後交給他們後yy他們能百分百給你復現你的設計稿。
關於響應式的柵格系統，首先宣告一點，當前端樂意並了解css原理和框架的構建方式時，可以構建其他樣式的網格，比如7、9、11、13等等，甚至各種異形網格，但在絕大多數情況下，更多的前端攻城獅青睞於高（tou）效(lan)，而他們常用的css框架除了bootstrap(寬480/768/992/1200,12列)，還有一堆叫不出名字的輕量css框架（畢竟柵格系統只是bootstrap的一部分，如果只是需要乙個響應式的css的話，可選的非常多，比如960.gis），除此之外，有可能你那可愛的前端攻城獅用的是flexbox實現響應式彈性布局，所以在一切未知確定下來之前，請放下架子，請教一下開發人員，因為雖然不想承認，但這種情況下是前端來指導設計。值得慶幸的是，這種情況在現實中非常少的，（但不排除你接手的是乙個二次開發的專案等等之類），確定他們使用哪種框架之後，設計師可以開始自己的工作了。
下面也舉個例子，是960gis的。
960-grid-system柵格化布局_spec.png
看完你也許會明白為什麼涉及到柵格化布局需要前端來確定了，960gis的css框架給出了三種方案，24列16列12列，設計師要在這個基礎上進行設計。一旦需要柵格化布局，意味著設計師自由發揮的空間再次縮減，只有在這三個方案上選一種。這些方案從何而來呢？很簡單，你只要向前端索取他使用的框架的psd模板即可，裡面參考線都是建好的。而前端一定會非常樂意幫你這個忙，理由很簡單，你按照他使用的框架規範進行設計也是在一定程度上縮減他的工作量，皆大歡喜。比如下面這張，就是目前最新的bootstrap4的psd檔案的截圖。
bootstrap4-psd截圖.png
柵格化布局以使用的css框架庫為準則，讓前端開發提供給設計師再好不過。
網頁的柵格系統設計
2008年09月17日 設計 柵格系統的形成 1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立乙個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的 合理的，重視功能性的新字型。委員會由數學家尼古拉斯加宗 nicolas jaugeon 擔任領導，他們以羅馬體為基礎，...
網頁的柵格系統設計
柵格系統的形成 1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立乙個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的 合理的，重視功能性的新字型。委員會由數學家尼古拉斯加宗 nicolas jaugeon 擔任領導，他們以羅馬體為基礎，採用方格為設計依據，每個字型方...
網頁的柵格系統設計
柵格系統的形成 1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立乙個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的 合理的，重視功能性的新字型。委員會由數學家尼古拉斯加宗 nicolas jaugeon 擔任領導，他們以羅馬體為基礎，採用方格為設計依據，每個字型方...