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