用柵格化系統指導網頁設計——寫給web UI

寫在開頭：關於網頁柵格佈局的概念已經無需再進行描述，通常來講，有經驗的web ui 設計師都應該據說並運用過。但網上有些關於柵格化系統的文章講的很是理論化，又是算法又是模塊，並且和響應式佈局混在一塊兒，讓新晉的網頁設計師們簡直無從下手，因此這裏以案例來講明什麼時候採用以及怎麼最快的創建柵格化系統。在全部關於UI的文章中，我會反覆強調和前端開發人員的溝通，由於他們是你設計方案的執行者，這一點很是重要。

1.把柵格化設計和柵格化佈局分開

強調柵格化設計（grid-design）和柵格化佈局（css grid）分開描述，是我的理解這徹底屬於兩個不一樣的工做，前者針對網頁設計師，然後者針對前端開發人員。柵格化設計是不需考慮頁面的響應的基於柵格系統的設計，主要是爲了提升網頁的規範性。對於一些中規中矩的網站，或者說通常創意型的網站，柵格化設計仍是很是推薦的，尤爲是一些規模大週期長，後期須要不斷迭代的項目，柵格化設計讓網頁呈現出專業可信賴感，並有助於後期的維護。而柵格化佈局，特指前端攻城獅使用的css框架，來實現頁面的響應式佈局。

拿到一個網站的設計需求時，先肯定是否是要單獨開發移動版網站，由於響應式佈局當然兼顧了手機端，但受加載速度、手機瀏覽器、自由度等等的影響，如綜合電商之類頁面複雜的網站若是不作單獨的移動站，單純依靠響應式佈局，在手機端的表現就是個渣渣，因此，若是會開發移動版網站的話，恭喜設計師，即你須要的只是柵格化設計，也就是廣義上的柵格系統，但若是但願響應式網頁取代移動網頁，那就須要特殊的柵格系統了。我在後面會分開來介紹。絕大多數的工做流程是設計師把方案交付給前端，前端再考慮實現方法，如今，這種工做流程須要優化一下，即在開始設計前與開發人員的一次深度溝通。提早溝通的好處在於，你瞭解他們的工做方式，而經過溝通，設計師須要得到的更重要的一點信息是，網站是否是須要作成響應式，這是後面創建柵格系統的關鍵。

響應式設計只是網頁設計的一個折中方案，依賴於項目實際狀況進行選擇。對於設計師來講，若是沒有必須的要求，可選擇廣義的柵格系統，並在此基礎上自由發揮創意。

2.毫不萬能的柵格化系統

對因而否採用柵格化設計，採用下面幾個案例說明一下：

1.企業站之類-以介紹幾種單一產品爲主.png

2.功能型網站.png

3.不拘泥形式的設計形式.jpg

針對這三個具備表明性的案例，柵格化設計是沒有必要的。理由很簡單，柵格的優勢也是缺點，規範意味着統一也意味着限制，在以上的案例中，無需用柵格來限制設計師的靈感，畢竟這個社會，仍是須要設計感的。

但絕大多數狀況下，推薦柵格化設計。尤爲是圖文混排、版塊不少的網站，柵格化設計會讓內容雜亂無章的頁面呈現清爽感。
關於柵格化佈局，方案很是多，來看下面幾個案例，咱們都稱之爲柵格化設計。

4.廣義的柵格化系統-無間距的單元格.jpg

5.廣義的柵格化系統-有間距的單元格.jpg

6.廣義的柵格化系統-有間距的單元格.png

對於不須要考慮頁面響應（換句話說，和框架無關）的網頁設計，原則能夠簡化成一句話：「由設計師自由決定」。

3.柵格化設計的參數

網上搜索結果最熱的960 gird柵格系統從2009年就開始正式推出，但至今，仍然有不少設計師在使用，除了考慮到顯示設備的分辨率，還依賴於960 gird的靈活性。因此，對於新晉web ui來講，採用960 grid 仍然是最佳的方案，不會出彩但也不會出錯。若是是考慮到寬屏的設計（須要捨棄一部分分辨率不高的用戶），能夠把柵格化系統的寬度建爲980甚至以上。但沒有柵格化設計經驗的設計師須要注意，這裏說的960是含邊距部分，換句話說，在psd文檔中，你的內容部分是950px，柵格化版面能夠藉助一些很是好用的在線工具，好比知名的Grid.Guide，這是12列柵格在內容寬度950下的三種版式規範，你也可使用24列，靈活度更高。

Grid-Guide自動生成的柵格系統方案（寬950-12列）.png

從圖中能夠看出，這三種方案列寬column width和間距gutter不一樣，剩下的工做對於ui設計師來講就簡單了不少，你能夠把版式規範的png格式下載下來，做爲你網頁設計的基礎版塊，在此基礎上進行列的劃分。或者只是以這個參數爲基礎，從新創建參考線（我更推薦這種方式，尤爲photoshop cc2017的新建參考線版面，裝訂線對應Gutter，列寬對應column width）。我簡單的拿版式規範作了個頁面設計示意圖，這就是基於柵格系統設計的優勢，在劃分列時，有理可依，有據可循。

基於960grid系統的版塊劃分示意.png

固然，既然是設計師，就能夠感性的元素再多一些。好比，你但願更多的留白，就能夠採用間距值較大的柵格版式，只要整個網站保持一個統一的版式便可。下圖是當內容寬度爲1200時生成的柵格系統，你還能夠嘗試不少方案，但Max Width的設定並非那麼隨意，這個取決於網站的定位。

Grid-Guide自動生成的寬1180的柵格系統方案（24列）.png

至於高度和垂直間距，柵格化系統並無統一的準則，設計師能夠採用一些黃金分割之類滿滿的都是設計感之類的值，或者垂直間距與柵格系統的間距相同或是整倍，總之，也須要一個規範指導全站設計。

柵格系統的參數根據項目的實際狀況，儘可能創建10的倍數或8的倍數（google material design推薦）。

4.柵格化佈局的參數

其實在寫這一部分，我是有些心虛的，由於本身並非前端，只是只知其一;不知其二的瞭解了一點相關的知識，因此有不對的地方，也歡迎提出。在前面提到過，若是網站的需求是響應式的設計，這時，設計師們必定必定先問一下前端他們準備如何實現響應式佈局，而不是把設計稿完成後交給他們後YY他們能百分百給你復現你的設計稿。
關於響應式的柵格系統，首先聲明一點，當前端樂意並瞭解CSS原理和框架的構建方式時，能夠構建其餘樣式的網格，好比七、九、十一、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框架庫都會提供下載途徑。尤爲是Bootstrap，做爲成熟的框架，不少模板文件能夠套用。

柵格化佈局以使用的css框架庫爲準則，讓前端開發提供給設計師再好不過。