英雄區塊設計系統 是做什麼的？
目的
英雄區塊設計系統提供了一套方法論，用於設計網頁最關鍵的空間區域：介紹性區塊。雖然 Growth 類別中的 hero-section-optimization 著重於訊息傳遞與轉換，但此設計系統專注於英雄區塊的視覺解剖、空間構成與層疊技術。它能確保內容與視覺元素和諧運作，建立品牌權威，維持視覺層級，並引導視線朝向所有裝置類型上的主要行動呼籲。
使用案例
- 設計首頁與著陸頁的主要入口點
- 為深層產品或服務頁面建立「次英雄」介紹區塊
- 在多頁面網站上建立一致的介紹模式
- 管理文字、圖像與互動元素的複雜層疊
- 設計沉浸式、媒體豐富的介紹區塊的響應式適配
何時不應使用
- 全球站點導航： 使用
site-navigation-system處理持續性頁首 - 頁面層級導引： 使用
page-header-system處理注重工具功能的介紹（例如儀表板或設定），這類頁面優先考慮後設資料而非視覺衝擊 - 內容文章： 當重點僅在於簡單標題與作者署名時，使用標準排版或
page-header-system - 模態視窗或疊加層： 使用
overlay-and-dialog-system處理暫時性的介面層
輸入
- 內容優先級： 主標題（H1）、副標題與主要行動呼籲（CTA）
- 視覺素材： 攝影作品、插圖、影片或抽象圖案
- 佈局模式： 這是分割、置中還是滿版構成？
- 流體間距系統： 用於一致的邊距、內距與垂直節奏
- 品牌色板： 用於背景處理與疊加層的可讀性
輸出
- 英雄解剖規格： 定義內容區域（介紹、核心、行動、視覺）
- 構成藍圖： 對齊方式（靠左 vs. 置中）與媒體關係的規則
- 視覺層疊策略： 文字疊加層、遮罩與深度的規則
- 響應式轉換地圖： 英雄區塊如何從橫向視口適應為直向視口
工作流程
1. 選擇構成模式
根據內容與媒體的關係選擇模式：
- 分割（50/50）： 文字在一側，視覺在另一側。最適合清晰度和技術型產品
- 置中堆疊： 所有內容置中，通常搭配背景圖片或影片。最適合強而有力、衝擊性強的陳述
- 內嵌內容： 內容位於一個內含的方塊中，置於滿版背景之上。最適合高質感或編輯風格的感覺
- 偏移疊加： 文字部分重疊於視覺元素之上，以創造深度
2. 定義空間層級（解剖）
將 visual-hierarchy-system 應用於英雄區域：
- 介紹/眉題（可選）： H1 上方的一個小型標記或標籤，提供上下文
- 主標題（H1）： 頁面上最大的文字元素
- 副標題： 提供細節的輔助文字（最多 2-3 行）
- 行動區： 主要（及可選次要）行動呼籲按鈕
- 錨點（視覺）： 支持敘事的視覺焦點
3. 建立層疊與易讀性
如果使用背景媒體，確保文字可讀：
- 遮罩與漸層： 應用「易讀性層」（來自
imagery-and-media-system），確保 4.5:1 的對比度 - 模糊處理： 使用背景過濾器柔化文字後方的雜亂背景
- 深度： 使用陰影或微妙的偏移來區分內容「平面」與背景「平面」
4. 應用垂直節奏與間距
使用 fluid-spacing-system 定義「呼吸空間」：
- 上/下內距： 確保英雄區塊有足夠的垂直高度（桌機上通常為 60vh 到 90vh）
- 內部間距： 在 H1、副標題與 CTA 之間使用一致間距（通常為
--space-m到--space-xl）
5. 規劃響應式轉折點
規劃佈局如何在較小螢幕上轉換：
- 堆疊： 分割佈局通常會堆疊，視覺在上方（提供上下文）或下方（優先顯示 H1）
- 比例轉換： 背景圖片應從橫向（16:9）切換為正方形或直向（1:1 或 4:5）以維持焦點
- 文字縮放： 使用
fluid-typography-system確保 H1 能優雅地縮小
決策規則
- 單一 H1 規則： 英雄區塊必須包含頁面上的唯一 H1
- 清晰優先於複雜： 如果視覺素材讓文字變得稍微難以閱讀，則優先採用更簡單的背景或更重的遮罩
- 「拇指」區域： 在行動裝置上，確保 CTA 位於螢幕下方 2/3 處，方便觸及
- 視覺重量： H1 與主要 CTA 應是英雄區塊中視覺上最突出的兩個元素
- 焦點對齊： 在分割佈局中，圖像的「主體」應面向內容，而非背離內容
限制條件
- 無障礙性： 圖片上的文字必須符合 WCAG AA（4.5:1）對比度。標題必須使用語意化的
<h1>標籤。如果英雄區塊包含自動播放的背景影片或動畫，需提供可見的暫停控制（WCAG 2.2.2）並尊重prefers-reduced-motion - 響應式： 英雄區塊不得引起水平溢出。佈局應為流體，而非固定高度，以容納不同長度的文字。避免在行動裝置上鎖定
100vh，因為這會與動態瀏覽器界面行為不良——建議使用100dvh或帶有流體內距的最小高度 - 效能： 背景影片應為靜音，並備有「海報」圖片作為連線緩慢時的備援
常見失敗模式
- 「對比失敗」： 將白色文字放在雜亂或淺色圖像上而未使用遮罩，導致標題無法閱讀
- 行動呼籲被埋沒： 將 CTA 放置過低，以至於在較小的筆記型電腦上被「折線以下」截斷
- 媒體過載： 使用過於干擾的背景影片，阻礙使用者閱讀價值主張
- 「行動裝置擠壓」： 在行動裝置上強制使用桌機分割佈局，導致文字過小且圖片擁擠
驗證標準
- 英雄區塊包含一個清晰的 H1，且為最突出的文字元素
- 主要 CTA 在視覺上突出，並遵循
interactive-state-system - 文字疊加層符合 WCAG AA 對比度要求（4.5:1）
- 空間構成（例如分割、置中）與品牌目標一致
- 垂直間距（內距/間隙）使用流體間距系統中的記號
- 佈局在行動裝置視口上仍保持功能正常且可讀
- 在響應式堆疊過程中，圖像中的焦點得以保留
- 自動播放的影片/動畫具有暫停控制，並尊重
prefers-reduced-motion