詳解|響應式柵格系統的斷點,到底應該怎麼用?

語言: CN / TW / HK

編輯導語:在響應式柵格系統中,斷點是控制頁面進行佈局變化的一系列數值,對頁面有著一定的影響。很多同學對斷點不理解,作者總結了關於斷點的應用,分享給你。

我曾經在之前的文章中為大家介紹過有關「響應式柵格設計」的相關設計經驗。最近我也把一些同學對於「斷點」概念的提問整理和分享給你,希望對你有幫助——

一、斷點的數量是否越多越好?

不一定。斷點數量越多,產品在不同尺寸的頁面中切換過程會越順暢,但是設計和開發的成本也會相應的增加。

斷點(Breakpoints)其實是控制頁面進行佈局變化的一系列數值。再簡單點說,就是當頁面到達某一個斷點值時,頁面的排版就會發生變化。

關於斷點,你需要建立以下認知概念:

1. 通常情況下,一款產品的斷點數量

在4-6 個為宜,因為如果基於每一個斷點都給出一套頁面排版方案,那麼斷點的數量越多,產品頁面被拉伸時的變化就會越順暢,同時產品的設計和開發成本也會越高。

2. 斷點值,沒有絕對的數值規範

你可以根據你產品的頁面佈局和尺寸來確定,也可以按照你的使用者常用的裝置來設定。你也可以認為:當你的頁面的寬度被擠壓變窄,使得排版佈局不得不發生變化時,就可以給出一個頁面的斷點值。

舉個例子,下圖是某產品斷點值和頁面效果案例,其中的 756px、974px 並不是常見數值,但只要它們符合產品的設計和功能需要,就可以將其定為斷點值。只不過數值不是整數,不太好記:

3. 每個斷點下對應的柵格方案,沒有絕對的標準解法

你可以根據自己的產品設計需要,靈活地規定不同斷點值下的柵格列數(Column)、邊距(Margin)和間距(Gutter)的值,以及這些值之間的變化規律。

其實柵格和斷點本身是設計方法,是用來幫助產品做好適配的。所以柵格方案要去匹配你的產品頁面設計,才能更好地服務於產品,更好地展現產品在不同環境下的佈局樣式。

因此不建議用你的產品去套用其他已有的柵格方案。每個產品都有個性,產品對應的柵格解決方案也都是獨一無二的。

二、斷點的實際應用案例

我以一款 B 端產品的斷點為案例,給你具體講講斷點的功能和應用方法。

這款產品使用的是相對簡單的一種佈局方式,見下圖。我還是要再強調一次,下圖中的柵格方案並不是唯一的標準解法,僅為一種最適合這款產品的解決方案,供你參考(圖有點小,可放大檢視,下文也會有更清晰的大圖):

由於考慮到產品的特性和開發的難易程度,這套柵格方案中設定了兩個定值:列(Column)的數量始終為 12 欄;間距(Gutter)的寬度始終是 24px:

先來講講這幾個斷點數值的含義。

1600px: 嚴格意義上來說,1600px 不算是一個斷點值。這是我們畫設計稿使用的畫布寬度。頁面中柵格的最大總寬度(也是有效的內容區)為 1280px:

也就是說當頁面再被拉長時,柵格的總寬度始終為 1280px,只有邊距(Margin)會不斷增加。頁面的內容佈局不會發生變化:

當然,我們如果使用其他數值比如 1440px 或 1400px 作為畫布尺寸也是可以的,其它數值也會相應變化。

1344px: 這個斷點值用於確定頁面邊距的第一個固定寬度是32px。當頁面的寬度從 1600px 向 1344px 的靠近時,頁面的邊距會不斷縮小,直到達到 32px 這個最小值:

也就是說,當頁面寬度在 1344px-640px 之間變化時,邊距始終是32px,改變的只是柵格每一列的寬度,頁面的內容佈局也不會發生變化:

640px:這個斷點值用於確定頁面邊距的第二個固定寬度 16px。也就是說當頁面寬度小於等於 640px 時,邊距始終是16px,只改變柵格每一列的寬度:

這時頁面就適用於Pad 裝置,頁面的佈局會在達到 640px 時進行直接改變:

375px: 這個斷點值用於確定內容區最小寬度為 343px,不過這是建立在手機尺寸唯一的理想基礎上。由於手機型號不同,所以實際上小於 343px 的內容區域也是存在的,可以通過改變欄寬實現寬度的變化:

這時頁面就適用於手機裝置,頁面的佈局會在達到 375px 時進行直接改變。也可以根據產品的特點來決定是否沿用 640px 的佈局樣式:

所以我們可以看到,整個產品有三個主要的斷點,佈局有三種主要的樣式:

  1. 當頁面寬度大於 640px 時是一種佈局,即斷點 1344px 的頁面佈局樣式(適用於 PC );
  2. 當頁面寬度在 640px-375px 之間時是一種佈局,即斷點 640px 的頁面佈局樣式(適用於 Pad);
  3.  當頁面寬度小於等於 375px 時,是一種頁面佈局樣式(適用於手機)。

我們現在所有的頁面都使用 12 列柵格,你也可以根據你的產品設計樣式,將 375px 頁面中的 12 列柵格變成 4 列柵格。還是要再強調一次,這套柵格方案及其中的資料並不是唯一的解法或行業標準,只是最適合這款產品的方案,僅供你學習參考:

我們在和開發做對接時,也是用這張圖做講解,讓雙方對佈局規則達成一致,初步確定基礎數值和使用規範。

#專欄作家#

元堯,微信公眾號:長弓小子,人人都是產品經理專欄作家。一線網際網路大廠B端體驗設計師,清華大學美術學院本碩連讀。曾負責國內最大開源元件庫Ant Design元件的設計和運營工作,目前負責國際業務線B端產品體驗設計和元件庫的搭建工作。

本文原創釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基於 CC0 協議。