我曾經很推崇憧憬 Material Design 的響應式柵格系統(tǒng)已烤，我花了不少時間去理解那幾張復雜的圖表和幾張酷炫的動態(tài)示意捆毫。
可當真正需要用到響應式這東西時，在做完競品調研后，我慢慢發(fā)現(xiàn)自己真不該那么執(zhí)著于 Material Design 響應式柵格系統(tǒng)氯哮，因為：
1沪饺、那兩張英文圖表對藝術背景的設計師來說真的很難理解
2躏敢、你設計的產品很有可能比 Material Design 的預期更加復雜
3、你的開發(fā)團隊很有可能不能夠/不愿意花費時間嘗試這么復雜的系統(tǒng)
4整葡、連 Google 自己的產品都沒怎么使用這套柵格系統(tǒng)
那么件余，真正大范圍使用、可以借鑒的、非理想主義的響應式柵格存在嗎蛾扇？答案是肯定的攘烛，下面我要介紹三種國內外常見的類型。
一镀首、擺不下就換行
顧名思義坟漱，這種柵格中购笆，卡片（即內容區(qū)塊）尺寸和間距不變械哟，每行能放幾張卡片就放幾張韧献，擺不下就換行申眼，邏輯非常簡單烤黍。典型的例子有?Youtube 败去、Pinterest桶略、Behance ……
這么簡單的響應式柵格系統(tǒng)想暗，其問題也很明顯：
1麻敌、頁邊距不確定栅炒，所以為了視覺的平衡感，大多將列表居中（像?Google Play 那樣堅持左對齊也不是不可以）
2术羔、一整頁最好只有一種尺寸的卡片赢赊，否則邊距無法不統(tǒng)一
3、固定的卡片尺寸和邊距可能在大屏里看起來太小级历，小屏里看起來又太大
但是如果產品夠簡單释移，列表單一的話，用這種是沒問題的寥殖。
二玩讳、彈性伸縮填滿
這種柵格系統(tǒng)的間距和頁邊距是固定的，卡片尺寸在一定程度下彈性伸縮嚼贡，以確保填滿整個屏幕熏纯。因為間距和頁邊距固定，也不用擔心卡片混排粤策。典型的例子有： Google Drive 豆巨、Spotify?……
這種方式為了保證頁邊距不像第一種方式那樣來回變動，不得不讓卡片在一定范圍內彈性伸縮掐场，這樣做的好處是往扔，不同大小的卡片混排也不會造成混亂。但是在縮放瀏覽器時熊户，你會發(fā)現(xiàn)卡片的尺寸無可避免地時大時衅继拧（如上圖）。
這種響應式柵格稍微復雜一點嚷堡，我下面畫圖示意設計方法：
1蝗罗、畫出基準界面：用一個理想寬度的屏幕艇棕，用適當?shù)拈g距擺下理想尺寸的卡片
2、標出固定部分：頁邊距和卡片間距是不變的串塑，把它們用色塊標記出
3沼琉、畫出基準柵格：橫向延展間距色塊，就得到了這個界面的基準柵格
4桩匪、準備幾個不同寬度的頁面打瘪，標出頁邊距
5、把基準柵格放上去
6傻昙、判斷一下每行能放幾列闺骚，原則是確保卡片伸縮比例最小妆档，且每行至少要有一列
7僻爽、測試：調整柵格以適配頁面
10、把卡片按照適配的柵格擺上
三贾惦、定制類響應式布局
其實國內的大部分網(wǎng)頁并沒有做響應式布局（比如知乎胸梆、淘寶、愛奇藝等）须板，即便是部分做了的（比如簡書碰镜、京東、騰訊視頻等）逼纸，也大多沒有使用上面講的那兩種自適應的柵格洋措，而是定制類響應式布局济蝉。
以騰訊視頻為例杰刽，你可以看到它的尺寸伸縮并不是依賴一套通用的規(guī)范，而是人為設計了幾種尺寸王滤。這個例子還算相對復雜了贺嫂，如果你去看國內其它響應式界面，可能因為是人力設計雁乡，所以大多變化范圍并不大第喳，最大尺寸和最小尺寸之間的差別有限。
這種方式的統(tǒng)一性就比較低了踱稍，能適配的的屏幕類型也不多曲饱，可是長遠來看付出的人力成本反倒更高一些。
如果可能的話珠月，有一套一勞永逸的響應式柵格規(guī)范肯定是最好的扩淀，但是對于剛接觸響應式不太久，或著不太需要適配不同屏幕的產品而言啤挎，先用這種定制式響應布局也是比較現(xiàn)實的選擇驻谆。
總結
《我做設計這七年里的心態(tài)變化》 里我把自己目前的狀態(tài)描繪成“隨意”，其實并不是說設計師會因為現(xiàn)實的殘酷而不得不妥協(xié)圓滑什么的，而是要認清時代及環(huán)境的局限胜臊，并從取舍中獲得平衡勺卢。
上述這些響應式柵格各有優(yōu)劣，都不是最完美的解決方案象对。但是世界上沒有最完美的解決方案黑忱，Google 能設計出 Material Design 那樣細致的柵格系統(tǒng)，卻也沒有辦法在自己的產品上廣泛使用织盼。
不過作為一家“有理想”的互聯(lián)網(wǎng)品牌杨何， Google 推出 Material Design 的心態(tài)恐怕和時裝周上的展品類似，一開始就沒有抱著實用的心態(tài)沥邻，而是更多地勾畫一個理想的方向危虱。
但是對于大部分負擔不起理想主義的產品、公司和個人而言唐全，還是現(xiàn)實一點埃跷，冷靜地選擇真正適合自己的位置吧。
——
未經允許請勿轉載
