英雄區塊設計
設計使用者進入網站時看到的第一個畫面——英雄區塊。你只有2到4秒的時間來傳達：你是誰、你做什麼、以及訪客為什麼要留下來。首屏的每一個像素都是一個轉換決策。
決策要點
佈局模式決策樹
首要目標是什麼？
├── 品牌認知/記憶性 → 滿版視覺英雄區塊
├── 產品清晰度/展示 → 分割英雄區塊（左側文案，右側視覺）
├── 功能展示/比較 → 置中英雄區塊，下方搭配功能網格
└── 權威/信譽建立 → 編輯/不對稱英雄區塊
是否有強烈的產品視覺？
├── 是（應用程式截圖、儀表板、展示影片） → 分割英雄區塊
└── 否（API、服務、抽象概念） → 置中英雄區塊
目標受眾為何？
├── 開發者/技術人員 → 置中、極簡（Linear/Vercel風格）
├── 企業/公司 → 分割搭配專業視覺
├── 消費者/生活風格 → 滿版搭配生活化圖像
└── 創意/設計人士 → 編輯/不對稱佈局
內容複雜度為何？
├── 簡單價值主張（一行） → 滿版或置中
├── 中等（標題 + 副標題） → 分割或置中
└── 複雜（多項優點） → 分割搭配結構化文案
CTA策略決策樹
商業模式為何？
├── 免費增值/試用 → 「免費開始」+「查看展示」
├── 銷售導向 → 「諮詢銷售」+「查看定價」
├── 直接購買 → 「立即購買」+「了解更多」
└── 潛在客戶開發 → 「取得報價」+「成功案例」
使用者意圖程度如何？
├── 高意圖（搜尋品牌名稱） → 僅提供直接CTA
├── 中意圖（察覺到問題） → 主要CTA + 次要CTA
└── 低意圖（探索階段） → 軟性CTA + 價值導向文案
常見失敗模式
1. 輪播混淆
症狀： 英雄區塊內容自動輪播，跳出率 >70% 診斷： 使用者無法處理不斷變換的訊息，導致決策癱瘓 解決方案： 替換為單一最強訊息；使用靜態英雄區塊，搭配一個清晰的價值主張
2. CTA位於摺疊線下方
症狀： 流量高但轉換率低；行動版CTA需要捲動才能看到 診斷： 初始頁面載入時，主要動作按鈕不可見 解決方案： 降低英雄區塊高度或將CTA上移；確保在375px行動版寬度下CTA可見
3. 價值主張不明確
症狀： 跳出率高、互動時間短、使用者回饋困惑 診斷： 標題描述的是「你是什麼」，而不是「你能為使用者做什麼」 解決方案： 以成果/效益為開頭；「提升10倍出貨速度」而不是「DevOps平台」
4. 視覺層次不佳
症狀： 使用者錯過關鍵資訊，CTA點擊率低（<2%） 診斷： 所有文字元素視覺權重相同；沒有明確的閱讀順序 解決方案： 標題字級為內文的2-3倍；使用顏色和字重引導視線
5. 效能瓶頸
症狀： 行動版跳出率高；LCP得分 >3秒 診斷： 英雄區塊過大的資源阻礙了關鍵渲染路徑 解決方案： 優化圖片（WebP/AVIF），非關鍵資源延遲載入，預載英雄區塊圖片
實際範例
範例：SaaS產品英雄區塊（分割佈局）
情境： 為一款針對開發團隊的程式碼審查工具設計英雄區塊
第一步：佈局決策
- 目標：產品展示 ✓
- 強烈視覺：是（程式碼差異截圖） ✓
- 受眾：開發者 ✓
- 決策：分割式英雄區塊搭配產品視覺
第二步：文案策略
標題：「充滿信心地更快出貨程式碼」（成果導向）
副標題： 「自動化程式碼審查，在使用者發現之前就捕捉錯誤」（具體效益）
主要CTA： 「免費開始試用」（免費增值模式）
次要CTA： 「查看運作方式」（為猶豫不決的使用者提供展示）
第三步：視覺處理
- 左側：文案 + CTA（40%寬度）
- 右側：動態程式碼差異展示（60%寬度）
- 背景：微妙的點狀圖案，符合開發者美學
第四步：行動版適配
- 堆疊順序：上方文案，下方視覺
- 標題從3rem縮小到2.25rem
- CTA按鈕垂直堆疊，間距1rem
專家 vs 新手：
- 新手：使用通用的「了解更多」CTA
- 專家：使用「查看運作方式」（暗示視覺展示）
- 新手：標題「團隊適用的程式碼審查工具」
- 專家：標題「充滿信心地更快出貨程式碼」（使用者成果）
品質檢查點
- 主要CTA在375px行動版寬度下不需捲動即可看到
- 標題在10個字以內傳達價值主張
- 英雄區塊LCP ≤2.5秒（使用節流測試）
- 文字對比度 ≥4.5:1（與任何背景相比）
- 行動版佈局整齊堆疊，無水平捲動
- 包含社會證明元素（標誌、指標或見證）
- 單一清晰訊息（無旋轉內容或多個價值主張）
- CTA點擊率 ≥2%（一週後測量）
- 尊重 prefers-reduced-motion 動畫設定
- 英雄區塊圖片使用適當的載入優先級（eager/high）
不適用範圍
請勿使用此技能處理：
- 完整網站架構 → 請使用 web-design-expert
- SEO內容策略 → 請使用 seo-visibility-expert
- 部落格文章佈局 → 請使用 web-design-expert
- 電子商務產品頁面 → 請使用 ecommerce-conversion-expert
- 多步驟引導流程 → 請使用 user-experience-expert
- 品牌識別/標誌設計 → 請使用 brand-design-expert
下列情況請改為委派：
- 客戶需要完整網站重新設計 → web-design-expert
- 重點在於搜尋排名最佳化 → seo-visibility-expert
- 英雄區塊為複雜使用者旅程的一部分 → user-experience-expert