響應式設計例項分析

語言: CN / TW / HK

響應式設計例項

蘋果官網

蘋果官網導航  

蘋果官網的響應式變化主要適應瀏覽器的視窗寬度,比如官網導航,就會隨著瀏覽器視窗寬度變化而變化。官網導航主要分為兩個檔位:PC端和M端。

視窗寬度大於833px時,系統判斷是PC端。

整個導航容器(PC端樣式)最大寬度是1024px,即視窗寬度只要大於1024px,導航容器都保持1024px寬;但當視窗寬度小於1024px時,就開始壓縮導航容器寬度,直到834px。

視窗寬度小於或等於833px,系統判斷是M端。

此時收起導航中的Tab項,只留下最重要的操作和抽屜按鈕。

蘋果官網頁面柵格體系  

以Iphone13介紹頁部分模組為例。首頁說一下柵格體系的規則:通過行(Row)和列(Column)來定義資訊區塊的位置與尺寸,以保證頁面的每個區域能夠穩定靈活地排布起來。我們在實際工作中,重點會放在列(Column)上。列與列之間的間距叫Gutter。

設計師定義柵格需要注意4點: 1,清晰定義動態佈局範圍。(隨著視窗寬度變化,哪些是固定值?哪些是變化值?一般Gutter是保持不變的,變化的是Column的寬度。)

2,儘量保持偶數思維。(指Column的數量,一般定義為12的居多)

3,關鍵資料的交付。(Column、Gutter)

4,區塊的定義要從Column開始到Column結束。

蘋果網頁內容部分,響應式設計分為三個檔位。

PC端樣式:

視窗寬度大於1068px,設計容器尺寸是1440px寬。 當視窗寬度大於等於1440尺寸時候,設計容器裡內容不變;當視窗寬度小於1440(大於1068px),則壓縮柵格Column寬度,頁面則會顯示圖片等被左右裁切,但字號等元素大小和相對位置在此範圍中不會發生變化。

Pad端樣式:

當視窗小於等於1068px,且大於734px,設計容器尺寸是744px寬。 在1068px的卡點時,設計容器就會變成744px寬,同時文字、圖片等元素也會適應新的設計容器而相應變小。在1068至734px之間拉伸視窗,柵格的適配原理不變。

M端樣式:

視窗寬度小於等於734px,設計容器寬度是434px。 同樣,頁面內元素適應新容器寬度也做了相應的調整。

特斯拉官網

特斯拉官網導航  

同樣,特斯拉官網導航也分為三個檔位,對應PC、Pad、M端不同裝置。

PC端樣式:

視窗寬度大於等於1200px。 佈局形式與蘋果PC導航不同,是採用【左中右】形式,整體導航容器沒有最大寬度值,而是實時適應瀏覽器視窗,拉伸或壓縮左(Logo)、中(Tab)、右(重要操作按鈕)三塊內容之間的間距。而這三塊內容裡的元素、間距在視窗拉伸過程中保持不變。

Pad端樣式:

當視窗小於1200px,且大於等於600px,導航變成Pad模式。 收起所有操作,導航上只留logo(左)、導航欄展開按鈕(右)。

M端樣式:

視窗寬度小於600px,導航變成M端模式。 同Pad端基本一致,只是螢幕兩側安全間距發生改變。

特斯拉首頁(大圖形式)

這種大圖模式的網頁適配方案比較簡單。特斯拉分為兩檔,PC和M端。

當視窗寬度大於等於600px時,系統判斷是PC和Pad端。

背景圖片:

背景圖用PC版圖片(一般設計提供尺寸1920*1080*2)。圖片在視窗容器中或高度撐滿寬度裁切左右或寬度撐滿高度裁切上下。

內容結構:

頁面標題按鈕等內容元素在此範圍內尺寸不作變化。瀏覽器視窗橫向拉伸時,內容元素位置橫向始終畫面居中;瀏覽器視窗縱向拉伸時,可壓縮調節區域會有相應變化,所以內容元素位置也會相應改變。

當視窗寬度小於600px時,系統判斷是M端。

背景圖片:

需另外提供M端尺寸(一般設計提供尺寸375*812*3)。圖片在視窗容器中或高度撐滿寬度裁切左右或寬度撐滿高度裁切上下。

內容結構:

內容佈局會適應M端螢幕作相應調整,標題字號相較PC端縮小一些,變成M端舒適的字號;按鈕由左右並列結構變成上下結構,並且按鈕寬度會隨視窗寬度變化,與螢幕左右的安全距離保持不變。

特斯拉購車頁面(左右結構)

購車頁面響應式設計分三個檔位,PC、Pad和M端。

當視窗寬度大於1024px時,系統判斷是PC端頁面。 此時頁面是 左右結構 ,右側操作區域始終保持不變,左側圖片顯示區域會適配視窗的變化。

當視窗寬度小於或等於1024px,大於或等於600px時,系統判斷是Pad。 佈局模式變成 縱向排列 ,除頭部圖片隨視窗寬度變化,下面的內容容器在此範圍內保持固定寬度。

當視窗寬度小於600px,系統判斷是M端。 與上一檔佈局形式保持一致,不同之處是螢幕左右兩側安全間距固定,內容容器則隨視窗變化。並且裡面的內容元素會適配M端螢幕重新調整(變小)。

dribbble瀑布流  

dribbble的資訊瀑布流動態佈局,與上述內容不同。但也分為三個檔位。

當視窗寬度大於等於1200px時,系統判斷是PC端。 此時內容距離視窗左右間距 72px ,這個是固定值。裡面的內容則會適應螢幕而變化。當螢幕拉伸變化時,每列內容之間間距固定,每個單元格拉伸變化;每個單元格的最小寬度是 290px ,系統判斷螢幕拉伸過程中如果單元格寬度將小於290px,就會自動減少一列。

當視窗寬度小於1200px,大於或等於768px,系統判斷是Pad端。 與PC不同點是視窗左右間距變成 32px ,其它適配規則不變。

當視窗寬度小於768px,系統判斷是M端。 視窗左右間距變成 20px ,其它適配規則不變。

總結

響應式的佈局形式:

目前響應式佈局基本形式有三種:一是頁面內容 隨視窗變化作縮放 (比如蘋果官網的柵格系統、特斯拉官網首頁的PC端變化);二是頁面內容 隨視窗寬度變化作縱向轉移 (比如特斯拉購車頁面);三是頁面內容隨視窗變窄作內容的 隱藏或刪除 (比如特斯拉和蘋果官網的移動端導航)。

響應式的卡點:

根據上面的案例分析,我們發現 PC和Pad的卡點 (Pad範圍起始點)是 1024px 1068px 1199px 三個卡點; Pad和M端卡點 (M範圍起始點)是 599px 734px 767px 。基本上大部分響應式網頁卡點都是在這兩組區間範圍左右。

另外還有一組裝置資料可以分享給大家,是目前市場佔有量較高的裝置解析度情況。

PC:

1920*1080(市場佔有量:45.51%)

1536*864(市場佔有量:9.82%)

1366*768(市場佔有量:7.54%)

1440*900(市場佔有量:6.63%)

1280*720(市場佔有量:5.13%)

1600*900(市場佔有量:4.69%)

Pad(一般就指蘋果Pad):

768*1024

1024*768

M:

360*640(市場佔有量:41.89%)

414*736(市場佔有量:21.67%)

375*667(市場佔有量:18.25%)

320*568(市場佔有量:2.83%)

以上資料是百度流量研究院2022年7月資料。 https://tongji.baidu.com/research/site#os

我們案例中總結出的卡點基本覆蓋了主流裝置尺寸情況。我們在後期驗收成果專案時,也需要重點走查下這些主流機型。

最後再和大家分享一個檢視網頁結構和觀察響應式網頁變化卡點的小方法。

使用 谷歌瀏覽器 ,滑鼠右鍵然後選擇 【檢查】 。進入開發者模式之後,我們可以看到google給我們模擬的各種裝置時候的狀態。然後在DevTools視窗中我們找到 【元素】>【佈局】 ,就可以看到它的網格及網格疊加層。如果我們想去看網頁的容器尺寸、字號大小等,可以到【樣式】、【計算樣式】中檢視。

Powered by Froala Editor