響應(yīng)式網(wǎng)頁設(shè)計 (Responsive web design) 雖然早已被提出，不過因為國內(nèi)開發(fā)習(xí)慣和APP設(shè)計優(yōu)先，日常工作使用這種布局方式的機會不多。
國外網(wǎng)站使用這種布局方式較多，經(jīng)過調(diào)研，結(jié)合嘗試后，本文梳理了響應(yīng)式設(shè)計的方法流程，記錄問題與思考，幫助以后類似的項目開展更快。
響應(yīng)式布局常常和自適應(yīng)布局搞混。其實通過下面的動圖我們很容易能理解兩者的區(qū)別。
△ 響應(yīng)式和自適應(yīng)的區(qū)別，來源網(wǎng)上資料
- 響應(yīng)式布局：容器大小隨窗口大小而變化。
- 自適應(yīng)布局：容器大小不隨窗口大小而變化，邊距隨窗口大小而變化。
調(diào)研中我們發(fā)現(xiàn)，國外幾個內(nèi)容網(wǎng)站，YouTube、Spotify、Netflix 和Behance，都使用了「內(nèi)容墻」的設(shè)計方式，以突出內(nèi)容的豐富度。
由于這種設(shè)計通常會保持容器之間的間距不變，這就需要容器大小變化以適應(yīng)窗口大小變化了。響應(yīng)式的布局思路，很好地幫助完成內(nèi)容墻的設(shè)計。
△ 滿屏的內(nèi)容突出了內(nèi)容豐富度
在以往的開發(fā)合作中，設(shè)計提供切圖和尺寸標(biāo)注給開發(fā)就行了。
而響應(yīng)式頁面中的容器大小是動態(tài)的，我們可以提供一個表格，告訴開發(fā)在不同的頁面寬度區(qū)間，對應(yīng)的布局應(yīng)該是怎么樣的。這些區(qū)間的臨界點，就是「斷點」。
我們以容器多，情況比較復(fù)雜的視頻首頁模擬一次確定斷點的流程。
△ 響應(yīng)式布局的設(shè)計思路
首先，斷點是反映頁面發(fā)生突變的情況的，如邊距開始發(fā)生變化、容器數(shù)量開始發(fā)生變化等。本例中，我們固定了側(cè)邊欄a、邊距b、間距d。據(jù)下圖公式，容易得知容器數(shù)量和容器寬度有著明確的數(shù)量關(guān)系。因此，尋找斷點，需要我們先確定容器寬度(c)。
△ 容器數(shù)量和容器寬度有著明確的數(shù)量關(guān)系
容器寬度和容器內(nèi)容相關(guān)。本例中，我們規(guī)定正常情況下容器寬度最小300px，以保證封面圖和標(biāo)題文字還能被看清。當(dāng)容器寬度被壓到300px時，容器數(shù)量減少一個。
有了容器的最小尺寸，那么我們可以輸出給開發(fā)的「頁面寬度-容器數(shù)量對應(yīng)表」。從下表可以讀出，瀏覽器寬度在1284-1595px之間時，側(cè)邊欄展開為288px，放3個容器，瀏覽器會自動把容器寬度算出來。
△ 頁面寬度與容器數(shù)量關(guān)系表
從上面的案例我們知道，確定斷點和容器數(shù)量、容器大小有關(guān)。那么，斷點的選擇其實是體現(xiàn)了，設(shè)計師對頁面信息呈現(xiàn)方式的理解。
1. YouTube的小心機
調(diào)研的過程中，我們發(fā)現(xiàn)YouTube 選擇 1143-1966px 作為4個容器的前后斷點。這個頁面寬度區(qū)間很大，達到了824px（遠超5個容器的跨度335px）。
△ YouTube的網(wǎng)頁斷點情況
我們猜想：
- YouTube認為1行4個視頻是用戶瀏覽的最好數(shù)量；
- 他們想把這種布局覆蓋主流的(約66.25%)屏幕寬度 1280-1920px。
2. 關(guān)注高分屏的實際效果
需要特別注意的是，橫向分辨率達到3840px 的PC高分屏中，主流瀏覽器會按照2倍圖展示內(nèi)容。此外，Windows系統(tǒng)下有系統(tǒng)縮放，推薦的是1.25倍，導(dǎo)致3840px的屏幕寬度，瀏覽器認為只有1536px (3840px÷2÷1.25)。所以有時候會出現(xiàn)在分辨率很高的屏幕下，響應(yīng)式頁面展示的內(nèi)容反而更少了的情況。
響應(yīng)式的布局方法能很好地支持越來越流行的「內(nèi)容墻」的設(shè)計。找好斷點，設(shè)定好不同屏幕分辨率的布局策略，是響應(yīng)式設(shè)計的關(guān)鍵。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。