區段組合系統
目的
區段組合系統提供一種方法論，用於設計頁面的「主體」——即全球頁首與頁尾之間的區段序列。雖然原子元件（卡片、按鈕）存在於區段內部，但此系統專注於這些區段之間的空間韻律、佈局模式與轉場效果。它確保內容分組合乎邏輯、透過佈局變化減少視覺疲勞，並引導使用者遵循連貫的敘事或任務流程。
使用案例
- 設計包含多個功能與效益區段的長形登陸頁。
- 建構需要技術規格、社會證明與使用指南的產品詳情頁 (PDP)。
- 將「關於我們」或「運作方式」頁面組織成易於理解的內容區塊。
- 在整個多頁網站中建立一致的「頁面主體」韻律。
- 管理垂直間距與背景變化，以指示主題或優先順序的轉變。
何時不使用
- 單一區塊檢視： 整個體驗僅包含在英雄區或單一視窗內（例如，簡單的登入頁面或啟動畫面）。
- 全球導覽/頁尾： 使用
site-navigation-system或site-footer-system作爲持久的網站框架。 - 微互動： 針對區塊內的個別元素行爲；使用
interactive-state-system。 - 純資料顯示： 內容是連續的統一項目流（例如，大型資料表或無限饋送）。
輸入
- 內容序列： 來自資訊架構的頁面區段優先順序清單。
- 區段優先級： 哪些區段是「高影響力」（效益驅動）vs.「輔助」（技術規格/社會證明）。
- 品牌調色盤： 用於定義背景交替模式。
- 流體間距系統： 用於一致的垂直邊距與區段內距。
- 響應式網格系統： 用於定義最大內容寬度與欄位行爲。
輸出
- 區段序列圖： 顯示每個區段順序與佈局模式的藍圖。
- 轉場策略： 定義的背景切換規則（例如，淺色 -> 深色 -> 淺色）與垂直間距。
- 佈局藍圖： 針對常見區段模式（鋸齒形、網格、50/50 分割）的註解線框圖。
- 響應式堆疊規則： 複雜區段佈局在行動裝置上如何折疊。
工作流程
1. 規劃敘事流程
根據使用者意圖將內容安排成邏輯序列。常見的登陸頁流程包括：
- 認知： 英雄區 / 問題陳述。
- 教育： 運作方式 / 核心功能。
- 驗證： 社會證明 / 案例研究。
- 細節： 次要功能 / 定價 / 常見問題。
- 轉換： 最終行動呼籲。
2. 選擇區段佈局模式
透過交替使用不同的佈局模式來避免重複：
- 分割佈局 (50/50)： 內容在一側，視覺元素在另一側。最適合高影響力的效益陳述。
- 鋸齒形佈局： 交替使用「分割」模式（例如，視覺元素在左，然後視覺元素在右）。最適合故事講述並減少掃視疲勞。
- 功能網格： 3 或 4 欄的卡片/圖示。最適合次要功能或服務。
- 置中堆疊： 所有內容垂直與水平置中。最適合簡潔有力的陳述或最終行動呼籲。
3. 設計轉場系統
使用視覺提示來指示主題的變化：
- 背景交替： 切換白色、淺灰色或品牌顏色來「劃分」區段。使用單一品牌標記搭配
color-mix()（例如，color-mix(in oklch, var(--brand) 6%, white)）來衍生色調背景，而非爲每個區段手動挑選單獨的灰色/色調，如此一來，當品牌顏色改變時，調色盤仍能保持一致。 - 垂直間距： 使用一致的上下內距（來自
fluid-spacing-system），理想情況下使用clamp()讓區段內距在行動裝置與桌面之間平滑縮放，而非在斷點處跳躍。 - 分隔線： 使用微妙的線條或角度 SVG 轉場，以獲得現代或動態的感覺。
4. 建立內容「中斷點」
引入「中斷區段」以防止使用者滾動過快：
- 引言/推薦： 大字型置中區段。
- 全幅影像： 沉浸式視覺元素，提供心理重置。
- 統計/影響： 高對比度區塊，搭配大數字。
5. 定義響應式堆疊
規劃區段如何折疊：
- 自然堆疊： 分割佈局通常將視覺元素堆疊在頂部或底部（通常頂部用於提供上下文）。
- 鋸齒形反轉： 確保在鋸齒形佈局中，「媒體」元素不會在行動裝置上連續堆疊（例如，文字-媒體-媒體-文字）。調整順序使其保持一致（例如，媒體-文字-媒體-文字）。
決策規則
- 「疲勞」規則： 切勿連續三個區段使用相同的佈局模式。請在分割、網格與置中佈局之間輪換。
- 「視覺錨點」規則： 每個高影響力區段都應有視覺錨點（圖片、影片或圖示）來支援文字。
- 對比用於聚焦： 對最重要的訊息或最終行動呼籲使用深色背景區段，以與頁面其餘部分形成高對比。
- 文字寬度限制： 限制文字區塊的寬度（通常為 max-width: 60ch）以確保可讀性，即使區段容器更寬。
約束條件
- 可及性： 背景顏色變化必須保持 WCAG AA 對比度比率，適用於該區段內的所有文字。
- 標題層級： 每個主要區段應以遵循邏輯文件大綱的
<h2-h6>開頭。 - 響應式設計： 區段內距應在行動裝置上縮小（例如，桌面的
--space-3xl在行動裝置上變成--space-xl）；優先使用clamp()表達式而非離散的斷點覆蓋。 - 間距一致性： 區段之間的間距應保持一致，除非主題轉變需要更大的「中斷」。
常見失敗模式
- 「文字牆」： 區段內有太多文字，且沒有視覺中斷或副標題。
- 模式重複： 連續五個區段使用相同的 50/50 分割佈局，使頁面感覺單調。
- 「行動裝置三明治」： 在鋸齒形佈局中，未能調整行動裝置上的堆疊順序，導致兩張圖片或兩個文字區塊直接疊在一起。
- 缺乏空白： 區段之間沒有足夠的垂直內距而擠在一起，使內容感覺壓迫。
- 不一致的對齊： 在同一序列中混合使用置中標題與靠左對齊標題，且沒有明確的邏輯。
驗證標準
- 頁面佈局至少交替使用兩種不同的模式（例如，分割與網格）。
- 使用區段轉場（背景變化）來分組相關內容。
- 相似區段類型的垂直間距（內距）一致。
- 所有區段遵循正確的標題層級（主要區段使用
h2）。 - 鋸齒形佈局的行動裝置堆疊順序已邏輯定義。
- 文字較多的區段保持可讀的行長（max-width: 60-80ch）。
- 背景彩色區段的對比度比率符合 WCAG AA。