響應式柵格系統是什么
- 作者：新網
- 來源：新網
- 瀏覽：100
- 2018-02-27 17:45:42
Material Design 的響應式柵格系統是谷歌推出了全新的設計語言Material Design。谷歌表示，這種設計語言旨在為手機、平板電腦、臺式機和\"其他平臺\"提供更一致、更廣泛的\"外觀和感覺\"。
Material Design 的響應式柵格系統是谷歌推出了全新的設計語言Material Design。谷歌表示，這種設計語言旨在為手機、平板電腦、臺式機和"其他平臺"提供更一致、更廣泛的"外觀和感覺"。
<
div>可當真正需要用到響應式這東西時，在做完競品調研后，我慢慢發現自己真不該那么執著于 Material Design 響應式柵格系統，因為：
那兩張英文圖表對藝術背景的設計師來說真的很難理解。
你設計的產品很有可能比 Material Design 的預期更加復雜。
你的開發團隊很有可能不能夠 or 不愿意花費時間嘗試這么復雜的系統。
連 Google 自己的產品都沒怎么使用這套柵格系統。
那么，真正大范圍使用、可以借鑒的、非理想主義的響應式柵格存在嗎?答案是肯定的，下面我要介紹三種國內外常見的類型。
一. 擺不下就換行
顧名思義，這種柵格中，卡片(即內容區塊)尺寸和間距不變，每行能放幾張卡片就放幾張，擺不下就換行，邏輯非常簡單。典型的例子有 Youtube 、Pinterest、Behance ……
Youtube
這么簡單的響應式柵格系統，其問題也很明顯：
頁邊距不確定，所以為了視覺的平衡感，大多將列表居中(像 Google Play 那樣堅持左對齊也不是不可以)。
一整頁最好只有一種尺寸的卡片，否則邊距無法不統一。
固定的卡片尺寸和邊距可能在大屏里看起來太小，小屏里看起來又太大。
但是如果產品夠簡單，列表單一的話，用這種是沒問題的。
二. 彈性伸縮填滿
這種柵格系統的間距和頁邊距是固定的，卡片尺寸在一定程度下彈性伸縮，以確保填滿整個屏幕。因為間距和頁邊距固定，也不用擔心卡片混排。典型的例子有： Google Drive 、Spotify ……
Spotify
這種方式為了保證頁邊距不像第一種方式那樣來回變動，不得不讓卡片在一定范圍內彈性伸縮，這樣做的好處是，不同大小的卡片混排也不會造成混亂。但是在縮放瀏覽器時，你會發現卡片的尺寸無可避免地時大時小。
這種響應式柵格稍微復雜一點，我下面畫圖示意設計方法：
1. 畫出基準界面：
用一個理想寬度的屏幕，用適當的間距擺下理想尺寸的卡片。
2. 標出固定部分：
頁邊距和卡片間距是不變的，把它們用色塊標記出。
3. 畫出基準柵格：
橫向延展間距色塊，就得到了這個界面的基準柵格。
三. 定制類響應式布局
其實國內的大部分網頁并沒有做響應式布局(比如知乎、淘寶、愛奇藝等)，即便是部分做了的(比如簡書、京東、騰訊視頻等)，也大多沒有使用上面講的那兩種自適應的柵格，而是定制類響應式布局。
上述這些響應式柵格各有優劣，都不是最完美的
解決方案。但是世界上沒有最完美的解決方案，Google 能設計出 Material Design 那樣細致的柵格系統，卻也沒有辦法在自己的產品上廣泛使用。
京公網安備11030102000056號
京ICP備09061941號-4 
商品已成功加入購物車
