我曾經(jīng)很推崇 Material Design 的響應(yīng)式柵格系統(tǒng),花了不少時(shí)間去理解那幾張復(fù)雜的圖表和幾張酷炫的動(dòng)態(tài)示意。
可當(dāng)真正需要用到響應(yīng)式這東西時(shí),在做完競(jìng)品調(diào)研后,我慢慢發(fā)現(xiàn)自己真不該那么執(zhí)著于 Material Design 響應(yīng)式柵格系統(tǒng),因?yàn)椋?/span>
那兩張英文圖表對(duì)藝術(shù)背景的設(shè)計(jì)師來(lái)說(shuō)真的很難理解。
你設(shè)計(jì)的產(chǎn)品很有可能比 Material Design 的預(yù)期更加復(fù)雜。
你的開(kāi)發(fā)團(tuán)隊(duì)很有可能不能夠 or 不愿意花費(fèi)時(shí)間嘗試這么復(fù)雜的系統(tǒng)。
連 Google 自己的產(chǎn)品都沒(méi)怎么使用這套柵格系統(tǒng)。
那么,真正大范圍使用、可以借鑒的、非理想主義的響應(yīng)式柵格存在嗎?答案是肯定的,下面我要介紹三種國(guó)內(nèi)外常見(jiàn)的類(lèi)型。
01/
擺不下就換行
顧名思義,這種柵格中,卡片(即內(nèi)容區(qū)塊)尺寸和間距不變,每行能放幾張卡片就放幾張,擺不下就換行,邏輯非常簡(jiǎn)單。典型的例子有 Youtube 、Pinterest、Behance ……
△ Youtube
這么簡(jiǎn)單的響應(yīng)式柵格系統(tǒng),其問(wèn)題也很明顯:
頁(yè)邊距不確定,所以為了視覺(jué)的平衡感,大多將列表居中(像 Google Play 那樣堅(jiān)持左對(duì)齊也不是不可以)。
一整頁(yè)最好只有一種尺寸的卡片,否則邊距無(wú)法不統(tǒng)一。
固定的卡片尺寸和邊距可能在大屏里看起來(lái)太小,小屏里看起來(lái)又太大。
但是如果產(chǎn)品夠簡(jiǎn)單,列表單一的話(huà),用這種是沒(méi)問(wèn)題的。
02/
彈性伸縮填滿(mǎn)
這種柵格系統(tǒng)的間距和頁(yè)邊距是固定的,卡片尺寸在一定程度下彈性伸縮,以確保填滿(mǎn)整個(gè)屏幕。因?yàn)殚g距和頁(yè)邊距固定,也不用擔(dān)心卡片混排。典型的例子有: Google Drive 、Spotify ……
△ Spotify
這種方式為了保證頁(yè)邊距不像第一種方式那樣來(lái)回變動(dòng),不得不讓卡片在一定范圍內(nèi)彈性伸縮,這樣做的好處是,不同大小的卡片混排也不會(huì)造成混亂。但是在縮放瀏覽器時(shí),你會(huì)發(fā)現(xiàn)卡片的尺寸無(wú)可避免地時(shí)大時(shí)。ㄈ缟蠄D)。
這種響應(yīng)式柵格稍微復(fù)雜一點(diǎn),我下面畫(huà)圖示意設(shè)計(jì)方法:
1. 畫(huà)出基準(zhǔn)界面:
用一個(gè)理想寬度的屏幕,用適當(dāng)?shù)拈g距擺下理想尺寸的卡片。
2. 標(biāo)出固定部分:
頁(yè)邊距和卡片間距是不變的,把它們用色塊標(biāo)記出。
3. 畫(huà)出基準(zhǔn)柵格:
橫向延展間距色塊,就得到了這個(gè)界面的基準(zhǔn)柵格。
4. 準(zhǔn)備幾個(gè)不同寬度的頁(yè)面,標(biāo)出頁(yè)邊距:
5. 把基準(zhǔn)柵格放上去:
6. 判斷一下每行能放幾列:
原則是確?ㄆ炜s比例最小,且每行至少要有一列。
7. 調(diào)整柵格以適配頁(yè)面:
8. 把卡片按照適配的柵格擺上:
03/
定制類(lèi)響應(yīng)式布局
其實(shí)國(guó)內(nèi)的大部分網(wǎng)頁(yè)并沒(méi)有做響應(yīng)式布局(比如知乎、淘寶、愛(ài)奇藝等),即便是部分做了的(比如簡(jiǎn)書(shū)、京東、騰訊視頻等),也大多沒(méi)有使用上面講的那兩種自適應(yīng)的柵格,而是定制類(lèi)響應(yīng)式布局。
以騰訊視頻為例,你可以看到它的尺寸伸縮并不是依賴(lài)一套通用的規(guī)范,而是人為設(shè)計(jì)了幾種尺寸。這個(gè)例子還算相對(duì)復(fù)雜了,如果你去看國(guó)內(nèi)其它響應(yīng)式界面,可能因?yàn)槭侨肆?a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計(jì),所以大多變化范圍并不大,最大尺寸和最小尺寸之間的差別有限。
這種方式的統(tǒng)一性就比較低了,能適配的的屏幕類(lèi)型也不多,可是長(zhǎng)遠(yuǎn)來(lái)看付出的人力成本反倒更高一些。
如果可能的話(huà),有一套一勞永逸的響應(yīng)式柵格規(guī)范肯定是最好的,但是對(duì)于剛接觸響應(yīng)式不太久,或著不太需要適配不同屏幕的產(chǎn)品而言,先用這種定制式響應(yīng)布局也是比較現(xiàn)實(shí)的選擇。
總結(jié)
《我做設(shè)計(jì)這七年里的心態(tài)變化》 里我把自己目前的狀態(tài)描繪成「隨意」,其實(shí)并不是說(shuō)設(shè)計(jì)師會(huì)因?yàn)楝F(xiàn)實(shí)的殘酷而不得不妥協(xié)圓滑什么的,而是要認(rèn)清時(shí)代及環(huán)境的局限,并從取舍中獲得平衡。
上述這些響應(yīng)式柵格各有優(yōu)劣,都不是最完美的解決方案。但是世界上沒(méi)有最完美的解決方案,Google 能設(shè)計(jì)出 Material Design 那樣細(xì)致的柵格系統(tǒng),卻也沒(méi)有辦法在自己的產(chǎn)品上廣泛使用。
不過(guò)作為一家「有理想」的互聯(lián)網(wǎng)品牌, Google 推出 Material Design 的心態(tài)恐怕和時(shí)裝周上的展品類(lèi)似,一開(kāi)始就沒(méi)有抱著實(shí)用的心態(tài),而是更多地勾畫(huà)一個(gè)理想的方向。
但是對(duì)于大部分負(fù)擔(dān)不起理想主義的產(chǎn)品、公司和個(gè)人而言,還是現(xiàn)實(shí)一點(diǎn),冷靜地選擇真正適合自己的位置吧。
全部評(píng)論