流暢間距系統
目的
流暢間距系統技能提供一套方法，用於建立能根據使用者視埠大小流暢調整的響應式留白比例尺（邊距、內距、間隙）。透過使用 CSS 的 clamp() 函數，間距會在定義的最小與最大值之間線性縮放，在無需大量媒體查詢的情況下，維持視覺和諧與一致的比例。
使用案例
- 為新的設計系統建立基礎的間距比例尺。
- 現代化網站，以改善在行動裝置、平板與桌機上的視覺一致性。
- 設計高品質佈局，讓留白在大螢幕上能呼吸，但在小螢幕上保持緊湊。
- 用更具彈性、可感知實作的系統取代固定的像素間距。
何時不應使用
- 簡單、非響應式頁面： 若佈局極度基礎或無響應式需求。
- 嚴格固定佈局： 當設計規格要求在每個解析度都使用精確、不可妥協的像素值時。
- 舊版瀏覽器支援： 如果目標用戶主要使用不支援 CSS
clamp()的瀏覽器（例如 Internet Explorer）。
輸入
要產生流暢間距系統，你需要：
- 視埠範圍：
min-width：縮放開始的螢幕寬度（例如 320px）。max-width：縮放停止的螢幕寬度（例如 1280px）。
- 基礎間距單位：
min-size：在min-width時的基礎單位（例如 16px）。max-size：在max-width時的基礎單位（例如 20px）。
- 比例乘數：
- 用於決定比例尺中各階層的乘數（例如 1.25 為大三度比例，或線性 2x/3x/4x 增長）。
輸出
- 流暢間距比例尺： 一組使用
clamp()定義從「極小」到「極大」值的 CSS 變數。 - 語意映射： 如何將這些代碼（token）應用的指南（例如
--space-m用於元件內距、--space-xl用於區塊邊距）。 - 使用文件： 結合單位以維持垂直韻律與水平對齊的規則。
工作流程
1. 定義比例尺參數
根據專案的目標裝置設定流暢系統的邊界。 範例： 320px（行動裝置）至 1440px（桌機），基礎單位從 16px 縮放到 24px。
2. 選擇間距比率
決定間距階層應如何增長。
- 線性/乘法： 階層是基礎單位的倍數（例如 0.5x、1x、1.5x、2x、4x、8x）。最適合可預測的對齊。
- 幾何級數： 每個階層是前一個階層乘以一個比率（例如 1.25）。最適合高對比度、藝術風格的佈局。
3. 計算比例階層
建立一系列尺寸。典型的比例尺包含：
- 3XS 至 XS： 用於微小細節、緊湊清單與按鈕內部內距。
- S 至 M： 用於標準元件間距與溝槽。
- L 至 3XL： 用於區塊邊距、主視覺區間距與主要佈局間隙。
4. 生成 CSS clamp() 公式
將像素值轉換為流暢公式。
clamp(min_rem, intercept_rem + slope_vw, max_rem)
斜率計算： (max_px - min_px) / (max_viewport - min_viewport) * 100
5. 分配語意角色
將抽象的比例尺對應到功能性角色，以確保團隊間的一致性。
space-component：--space-sspace-layout-gutter：--space-mspace-section：--space-xl
決策規則
- 8pt 網格原則： 只要可能，確保你的最小/最大值是 4 或 8 的倍數，以符合標準 UI 模式。
- 鄰近原則： 相關的元素之間的間距應少於不相關的元素。
- 行動裝置壓縮： 保持較小的間距單位（3XS-S）相對穩定；只有較大的單位（L-3XL）才應積極縮放，以防止行動裝置佈局感覺「爆炸」。
- 無障礙性： 確保即使是在最小比例尺上，互動元素仍維持足夠大的點擊區域（根據 WCAG 2.2 SC 2.5.8，含內距最小為 24x24px；主要動作建議為 44x44px）。
- 容器相對間距： 對於應根據元件容器（而非視埠）反應的間距（例如，可位於狹窄側邊欄或寬主要欄位的卡片），請在
clamp()公式中使用容器查詢長度單位（cqi/cqw）而非vw。
限制條件
- 響應式： 間距永遠不應導致水平溢出。
- 一致性： 一旦定義了比例尺，就不要使用「一次性」的像素值。
- 層級： 較大的間距應始終用於分隔較大的內容區塊（例如區塊），而較小的間距則用於內部元件細節。
- 範圍： 此技能僅涵蓋間距值 — 它不會建立佈局網格（請使用
responsive-grid-system）、定義字型大小（請使用fluid-typography-system）或管理 z-index/圖層。
常見失敗模式
- 平均縮放所有項目： 過度縮小的小內距（如 4px）可能導致元件在桌機上看起來變形。
- 忽略佈局溝槽： 使用流暢的元件間距但固定的網格溝槽，導致對齊「漂移」。
- 過多的比例階層： 擁有 20 個以上的不同間距階層會使系統難以使用和維護。目標是 7-9 個階層。
- 沒有邏輯階層： 使用隨意數值而非一致的比例尺或比率。
驗證標準
- 當調整視埠大小時，間距平滑縮放。
- 在所有主要斷點上維持垂直韻律。
- 實作中未使用「一次性」的像素值；所有間距都使用已定義的變數。
- 系統在
clamp()函數的最小和最大邊界使用rem單位。 - 間距選擇強化了鄰近性與層級。
- 互動元素在流暢比例尺上每一點（包含最小視埠）都保有至少 24x24px 的點擊區域（WCAG 2.2 SC 2.5.8）。