起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識三種最主流的響應(yīng)式柵格
真正大范圍使用、可以借鑒的、非理想主義的響應(yīng)式柵格存在嗎？本文給大家介紹三種最主流的響應(yīng)式柵格，一起來看看~
如果你有研究過谷歌的 Material Design 的響應(yīng)式柵格，應(yīng)該知道，它是有斷點（Breakpoints）的。簡單來說，就是屏幕越寬，列寬和間距就越大。為了方便計算取整，這兩個數(shù)值會在屏幕達到某一些特定寬度時才發(fā)生變化。
這么做對視覺舒適感是很有好處的，但是上面那張大表格讓人有點望而卻步。于是我花了些時間調(diào)研了一些市面上主流產(chǎn)品的柵格系統(tǒng)，結(jié)果發(fā)現(xiàn)……
不建議大家借鑒Material Design 響應(yīng)式柵格，因為：
- 那兩張英文圖表對藝術(shù)背景的設(shè)計師來說真的很難理解；
- 你設(shè)計的產(chǎn)品很有可能比 Material Design 的預(yù)期更加復(fù)雜；
- 你的開發(fā)團隊很有可能不能夠/不愿意花費時間嘗試這么復(fù)雜的系統(tǒng)；
- 連 Google 自己的產(chǎn)品都沒怎么使用這套柵格系統(tǒng)。
那么，真正大范圍使用、可以借鑒的、非理想主義的響應(yīng)式柵格存在嗎？
答案是肯定的，下面我要介紹三種國內(nèi)外常見的類型：
一、排列式柵格
顧名思義，這種柵格中，卡片（即內(nèi)容區(qū)塊）尺寸和間距不變，每行能放幾張卡片就放幾張，擺不下就換行，邏輯非常簡單。
典型的例子有 Youtube 、Pinterest、Behance……
這么簡單的響應(yīng)式柵格系統(tǒng)，其問題也很明顯：
- 頁邊距不確定，所以為了視覺的平衡感，大多將列表居中（像Google Play那樣堅持左對齊也不是不可以）；
- 一整頁最好只有一種尺寸的卡片，否則邊距無法不統(tǒng)一；
- 固定的卡片尺寸和邊距可能在大屏里看起來太小，小屏里看起來又太大。
但是如果產(chǎn)品夠簡單，列表單一的話，用這種是沒問題的。
二、彈性式柵格
這種柵格系統(tǒng)的間距和頁邊距是固定的，卡片尺寸在一定程度下彈性伸縮，以確保填滿整個屏幕。因為間距和頁邊距固定，也不用擔(dān)心卡片混排。
典型的例子有：Google Drive 、Spotify …
這種方式為了保證頁邊距不像第一種方式那樣來回變動，不得不讓卡片在一定范圍內(nèi)彈性伸縮，這樣做的好處是，不同大小的卡片混排也不會造成混亂。但是在縮放瀏覽器時，你會發(fā)現(xiàn)卡片的尺寸無可避免地時大時小（如上圖）。
三、定制式柵格
其實國內(nèi)的大部分網(wǎng)頁并沒有做響應(yīng)式布局（比如知乎、淘寶、愛奇藝等），即便是部分做了的（比如簡書、京東、騰訊視頻等），也大多沒有使用上面講的那兩種自適應(yīng)的柵格，而是定制類響應(yīng)式布局。
通常它的尺寸伸縮并不是依賴一套通用的規(guī)范，而是人為設(shè)計了幾種尺寸。這個例子還算相對復(fù)雜了，如果你去看國內(nèi)其它響應(yīng)式界面，可能因為是人力設(shè)計，所以大多變化范圍并不大，最大尺寸和最小尺寸之間的差別有限。
愛奇藝
這種方式的統(tǒng)一性就比較低了，能適配的的屏幕類型也不多，可是長遠來看付出的人力成本反倒更高一些。
如果可能的話，有一套一勞永逸的響應(yīng)式柵格規(guī)范肯定是最好的，但是對于剛接觸響應(yīng)式不太久，或者不太需要適配不同屏幕的產(chǎn)品而言，先用這種定制式響應(yīng)布局也是比較現(xiàn)實的選擇。
總結(jié)
上述這些響應(yīng)式柵格各有優(yōu)劣，都不是最完美的解決方案。但是世界上沒有最完美的解決方案，Google 能設(shè)計出 Material Design 那樣細致的柵格系統(tǒng)，卻也沒有辦法在自己的產(chǎn)品上廣泛使用。
不過作為一家“有理想”的互聯(lián)網(wǎng)品牌， Google 之前推出 Material Design 恐怕也只是勾勒一個理想的藍圖，距離真正推廣還遠得很。
對于真正做產(chǎn)品的人來說，還是多借鑒一下上面那三種主流的柵格模型吧。
作者： Z Yuhan，公眾號：體驗進階
本文由 @Z Yuhan原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
