寫在開頭：關于網(wǎng)頁柵格布局的概念已經(jīng)無需再進行描述，一般來說，有經(jīng)驗的web ui 設計師都應該聽說并運用過颜启。但網(wǎng)上有些關于柵格化系統(tǒng)的文章講的非常理論化愕够，又是算法又是模塊走贪，而且和響應式布局混在一起柳弄，讓新晉的網(wǎng)頁設計師們簡直無從下手氓癌，所以這里以案例來說明何時采用以及怎么最快的建立柵格化系統(tǒng)。在所有關于UI的文章中口猜，我會反復強調(diào)和前端開發(fā)人員的溝通遂跟，因為他們是你設計方案的執(zhí)行者逃沿，這一點非常重要。
1.把柵格化設計和柵格化布局分開
強調(diào)柵格化設計（grid-design）和柵格化布局（css grid）分開描述幻锁，是個人理解這完全屬于兩個不同的工作凯亮，前者針對網(wǎng)頁設計師，而后者針對前端開發(fā)人員哄尔。柵格化設計是不需考慮頁面的響應的基于柵格系統(tǒng)的設計假消，主要是為了提高網(wǎng)頁的規(guī)范性。對于一些中規(guī)中矩的網(wǎng)站岭接，或者說一般創(chuàng)意型的網(wǎng)站富拗，柵格化設計還是非常推薦的臼予，尤其是一些規(guī)模大周期長，后期需要不斷迭代的項目啃沪，柵格化設計讓網(wǎng)頁呈現(xiàn)出專業(yè)可信賴感粘拾，并有助于后期的維護。而柵格化布局谅阿，特指前端攻城獅使用的css框架半哟，來實現(xiàn)頁面的響應式布局。
拿到一個網(wǎng)站的設計需求時签餐，先確定是不是要單獨開發(fā)移動版網(wǎng)站寓涨，因為響應式布局固然兼顧了手機端，但受加載速度氯檐、手機瀏覽器戒良、自由度等等的影響，如綜合電商之類頁面復雜的網(wǎng)站如果不做單獨的移動站冠摄，單純依靠響應式布局糯崎，在手機端的表現(xiàn)就是個渣渣，所以河泳，如果會開發(fā)移動版網(wǎng)站的話沃呢，恭喜設計師，即你需要的只是柵格化設計拆挥，也就是廣義上的柵格系統(tǒng)薄霜，但如果希望響應式網(wǎng)頁取代移動網(wǎng)頁，那就需要特殊的柵格系統(tǒng)了纸兔。我在后面會分開來介紹惰瓜。絕大多數(shù)的工作流程是設計師把方案交付給前端，前端再考慮實現(xiàn)方法汉矿，現(xiàn)在崎坊，這種工作流程需要優(yōu)化一下，即在開始設計前與開發(fā)人員的一次深度溝通洲拇。提前溝通的好處在于奈揍，你了解他們的工作方式，而通過溝通赋续，設計師需要獲得的更重要的一點信息是打月，網(wǎng)站是不是需要做成響應式，這是后面建立柵格系統(tǒng)的關鍵蚕捉。
響應式設計只是網(wǎng)頁設計的一個折中方案，依賴于項目實際情況進行選擇柴淘。對于設計師來說迫淹，如果沒有必須的要求秘通，可選擇廣義的柵格系統(tǒng)，并在此基礎上自由發(fā)揮創(chuàng)意敛熬。
2.絕不萬能的柵格化系統(tǒng)
對于是否采用柵格化設計肺稀，采用下面幾個案例說明一下：
針對這三個具有代表性的案例，柵格化設計是沒有必要的应民。理由很簡單话原，柵格的優(yōu)點也是缺點，規(guī)范意味著統(tǒng)一也意味著限制诲锹，在以上的案例中繁仁，無需用柵格來限制設計師的靈感，畢竟這個社會归园，還是需要設計感的黄虱。
但絕大多數(shù)情況下，推薦柵格化設計庸诱。尤其是圖文混排捻浦、版塊很多的網(wǎng)站，柵格化設計會讓內(nèi)容雜亂無章的頁面呈現(xiàn)清爽感桥爽。
關于柵格化布局朱灿，方案非常多，來看下面幾個案例钠四，我們都稱之為柵格化設計盗扒。
對于不需要考慮頁面響應（換句話說，和框架無關）的網(wǎng)頁設計形导，原則可以簡化成一句話：“由設計師自由決定”环疼。
3.柵格化設計的參數(shù)
網(wǎng)上搜索結(jié)果最熱的960 gird柵格系統(tǒng)從2009年就開始正式推出，但至今朵耕，仍然有很多設計師在使用炫隶，除了考慮到顯示設備的分辨率，還依賴于960 gird的靈活性阎曹。所以伪阶，對于新晉web ui來說，采用960 grid 仍然是最佳的方案处嫌，不會出彩但也不會出錯栅贴。如果是考慮到寬屏的設計（需要舍棄一部分分辨率不高的用戶），可以把柵格化系統(tǒng)的寬度建為980甚至以上熏迹。但沒有柵格化設計經(jīng)驗的設計師需要注意檐薯，這里說的960是含邊距部分，換句話說，在psd文檔中坛缕，你的內(nèi)容部分是950px墓猎，柵格化版面可以借助一些非常好用的在線工具，比如知名的Grid.Guide赚楚，這是12列柵格在內(nèi)容寬度950下的三種版式規(guī)范毙沾，你也可以使用24列，靈活度更高宠页。
從圖中可以看出左胞，這三種方案列寬column width和間距gutter不同，剩下的工作對于ui設計師來說就簡單了很多举户，你可以把版式規(guī)范的png格式下載下來烤宙，作為你網(wǎng)頁設計的基礎版塊，在此基礎上進行列的劃分敛摘∶爬茫或者只是以這個參數(shù)為基礎，重新建立參考線（我更推薦這種方式兄淫，尤其photoshop cc2017的新建參考線版面屯远，裝訂線對應Gutter，列寬對應column width）捕虽。我簡單的拿版式規(guī)范做了個頁面設計示意圖慨丐，這就是基于柵格系統(tǒng)設計的優(yōu)點，在劃分列時泄私，有理可依房揭，有據(jù)可循。
當然晌端，既然是設計師捅暴，就可以感性的元素再多一些。比如咧纠，你希望更多的留白蓬痒，就可以采用間距值較大的柵格版式，只要整個網(wǎng)站保持一個統(tǒng)一的版式即可漆羔。下圖是當內(nèi)容寬度為1200時生成的柵格系統(tǒng)梧奢，你還可以嘗試很多方案，但Max Width的設定并不是那么隨意演痒，這個取決于網(wǎng)站的定位亲轨。
至于高度和垂直間距，柵格化系統(tǒng)并沒有統(tǒng)一的準則鸟顺，設計師可以采用一些黃金分割之類滿滿的都是設計感之類的值惦蚊，或者垂直間距與柵格系統(tǒng)的間距相同或是整倍，總之，也需要一個規(guī)范指導全站設計蹦锋。
柵格系統(tǒng)的參數(shù)根據(jù)項目的實際情況曾撤，盡量建立10的倍數(shù)或8的倍數(shù)（google material design推薦）。
4.柵格化布局的參數(shù)
其實在寫這一部分晕粪，我是有些心虛的，因為自己并不是前端渐裸，只是一知半解的了解了一點相關的知識巫湘，所以有不對的地方，也歡迎提出昏鹃。在前面提到過尚氛，如果網(wǎng)站的需求是響應式的設計，這時洞渤，設計師們一定一定先問一下前端他們準備如何實現(xiàn)響應式布局阅嘶，而不是把設計稿完成后交給他們后YY他們能百分百給你復現(xiàn)你的設計稿。
關于響應式的柵格系統(tǒng)载迄，首先聲明一點讯柔，當前端樂意并了解CSS原理和框架的構建方式時，可以構建其他樣式的網(wǎng)格护昧，比如7魂迄、9、11惋耙、13等等捣炬，甚至各種異形網(wǎng)格，但在絕大多數(shù)情況下绽榛，更多的前端攻城獅青睞于高（tou）效(lan)湿酸，而他們常用的css框架除了Bootstrap(寬480/768/992/1200,12列)，還有一堆叫不出名字的輕量css框架（畢竟柵格系統(tǒng)只是Bootstrap的一部分灭美，如果只是需要一個響應式的css的話推溃，可選的非常多，比如960.gis）冲粤，除此之外美莫，有可能你那可愛的前端攻城獅用的是flexbox實現(xiàn)響應式彈性布局，所以在一切未知確定下來之前梯捕，請放下架子厢呵，請教一下開發(fā)人員，因為雖然不想承認傀顾，但這種情況下是前端來指導設計襟铭。值得慶幸的是，這種情況在現(xiàn)實中非常少的，（但不排除你接手的是一個二次開發(fā)的項目等等之類）寒砖，確定他們使用哪種框架之后赐劣，設計師可以開始自己的工作了。
下面也舉個例子哩都，是960gis的魁兼。
看完你也許會明白為什么涉及到柵格化布局需要前端來確定了，960gis的css框架給出了三種方案漠嵌，24列16列12列咐汞，設計師要在這個基礎上進行設計。一旦需要柵格化布局儒鹿，意味著設計師自由發(fā)揮的空間再次縮減化撕，只有在這三個方案上選一種。這些方案從何而來呢约炎？很簡單植阴，你只要向前端索取他使用的框架的psd模板即可，里面參考線都是建好的圾浅。而前端一定會非常樂意幫你這個忙掠手，理由很簡單，你按照他使用的框架規(guī)范進行設計也是在一定程度上縮減他的工作量贱傀，皆大歡喜惨撇。比如下面這張，就是目前最新的Bootstrap4的psd文件的截圖府寒。
設計師也可以自給自足魁衙，一般這些css框架庫都會提供下載途徑。尤其是Bootstrap株搔，作為成熟的框架剖淀，很多模板文件可以套用。
柵格化布局以使用的css框架庫為準則纤房，讓前端開發(fā)提供給設計師再好不過纵隔。
