Z Yuhan : 我曾經很推崇?Material Design 的響應式柵格系統，花了不少時間去理解那幾張復雜的圖表和幾張酷炫的動態示意。

可當真正需要用到響應式這東西時，在做完競品調研后，我慢慢發現自己真不該那么執著于 Material Design 響應式柵格系統，因為：

• 那兩張英文圖表對藝術背景的設計師來說真的很難理解。
• 你設計的產品很有可能比 Material Design 的預期更加復雜。
• 你的開發團隊很有可能不能夠 or 不愿意花費時間嘗試這么復雜的系統。
• 連 Google 自己的產品都沒怎么使用這套柵格系統。

那么，真正大范圍使用、可以借鑒的、非理想主義的響應式柵格存在嗎？答案是肯定的，下面我要介紹三種國內外常見的類型。

一. 擺不下就換行

顧名思義，這種柵格中，卡片（即內容區塊）尺寸和間距不變，每行能放幾張卡片就放幾張，擺不下就換行，邏輯非常簡單。典型的例子有 Youtube 、Pinterest、Behance ……

△ Youtube

這么簡單的響應式柵格系統，其問題也很明顯：

• 頁邊距不確定，所以為了視覺的平衡感，大多將列表居中（像 Google Play 那樣堅持左對齊也不是不可以）。
• 一整頁最好只有一種尺寸的卡片，否則邊距無法不統一。
• 固定的卡片尺寸和邊距可能在大屏里看起來太小，小屏里看起來又太大。

但是如果產品夠簡單，列表單一的話，用這種是沒問題的。

二. 彈性伸縮填滿

這種柵格系統的間距和頁邊距是固定的，卡片尺寸在一定程度下彈性伸縮，以確保填滿整個屏幕。因為間距和頁邊距固定，也不用擔心卡片混排。典型的例子有： Google Drive 、Spotify ……

△ Spotify

這種方式為了保證頁邊距不像第一種方式那樣來回變動，不得不讓卡片在一定范圍內彈性伸縮，這樣做的好處是，不同大小的卡片混排也不會造成混亂。但是在縮放瀏覽器時，你會發現卡片的尺寸無可避免地時大時小（如上圖）。

這種響應式柵格稍微復雜一點，我下面畫圖示意設計方法：

1. 畫出基準界面：

用一個理想寬度的屏幕，用適當的間距擺下理想尺寸的卡片。

2. 標出固定部分：

頁邊距和卡片間距是不變的，把它們用色塊標記出。

3. 畫出基準柵格：

橫向延展間距色塊，就得到了這個界面的基準柵格。

4. 準備幾個不同寬度的頁面，標出頁邊距：

5. 把基準柵格放上去：

6. 判斷一下每行能放幾列：

原則是確保卡片伸縮比例最小，且每行至少要有一列。

7. 調整柵格以適配頁面：

8. 把卡片按照適配的柵格擺上：

三. 定制類響應式布局

其實國內的大部分網頁并沒有做響應式布局（比如知乎、淘寶、愛奇藝等），即便是部分做了的（比如簡書、京東、騰訊視頻等），也大多沒有使用上面講的那兩種自適應的柵格，而是定制類響應式布局。

以騰訊視頻為例，你可以看到它的尺寸伸縮并不是依賴一套通用的規范，而是人為設計了幾種尺寸。這個例子還算相對復雜了，如果你去看國內其它響應式界面，可能因為是人力設計，所以大多變化范圍并不大，最大尺寸和最小尺寸之間的差別有限。

這種方式的統一性就比較低了，能適配的的屏幕類型也不多，可是長遠來看付出的人力成本反倒更高一些。

如果可能的話，有一套一勞永逸的響應式柵格規范肯定是最好的，但是對于剛接觸響應式不太久，或著不太需要適配不同屏幕的產品而言，先用這種定制式響應布局也是比較現實的選擇。

總結

《我做設計這七年里的心態變化》 里我把自己目前的狀態描繪成「隨意」，其實并不是說設計師會因為現實的殘酷而不得不妥協圓滑什么的，而是要認清時代及環境的局限，并從取舍中獲得平衡。

上述這些響應式柵格各有優劣，都不是最完美的解決方案。但是世界上沒有最完美的解決方案，Google 能設計出 Material Design 那樣細致的柵格系統，卻也沒有辦法在自己的產品上廣泛使用。

不過作為一家「有理想」的互聯網品牌， Google 推出 Material Design 的心態恐怕和時裝周上的展品類似，一開始就沒有抱著實用的心態，而是更多地勾畫一個理想的方向。

但是對于大部分負擔不起理想主義的產品、公司和個人而言，還是現實一點，冷靜地選擇真正適合自己的位置吧。

「讓你深度認識柵格系統」

• 《網頁設計中，如何突破柵格的限制又保持協調？》
• 《最熱門工具推薦！為響應式網站而生的40款柵格神器》
• 《讓設計更高效！正式為大家安利這個好用的「8點柵格」》
• 《網頁的脊梁！20款素質過硬的響應式CSS柵格系統》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com