website-enchun-mgr/screenshots/UX-Structure-Analysis-Report.md

Homepage Structure & Layout Analysis Report

參考 HTML vs Localhost 結構差異深度分析

Date: 2026-02-10 Analyst: UX Expert Status: Critical Issues Found

---

🚨 關鍵發現

結構差異總覽

項目	參考 HTML	Localhost	影響等級
Body 背景色	#f2f2f2	#f2f2f2 (已修復)	✅
Body 高度	3548px	3835px (+287px)	⚠️
Painpoint Section	獨立 section	獨立 section	✅
Statistics Section	獨立 H1 + section	合併在 Painpoint region 內	❌ CRITICAL
Service Features	在 Footer 中	獨立的 ServiceFeatures section	❌ CRITICAL
Client Cases	Carousel 輪播	靜態顯示	⚠️
CTA Section	按鈕連結 heyform	按鈕連結 /contact-us	⚠️

---

1. Statistics Section 被合併問題 ❌ CRITICAL

參考 HTML 結構

body
├── [Navigation]
├── [Hero Banner]
├── H1 "你可能會遇到的煩惱"
├── [Tabs]
├── [Tabpanel]
├── H1 "數據會說話"  ← 獨立的 H1
├── P "Statistics reveal the truth"
├── [Statistics Data: 0 至今協助商家數, 0.0% 提升成長率, ...]
├── H1 "客戶案例"  ← 獨立的 H1
└── ...

Localhost 結構 (問題)

main
├── [Hero]
├── region "你可能會遇到的煩惱"
│   ├── H2 "你可能會遇到的煩惱"
│   ├── [Tabs]
│   ├── [Tabpanel]
│   ├── 0 + 服務客戶數  ← Statistics 被合併在這裡！
│   ├── 0 %% 廣告投資報酬率
│   ├── 0 + 年 行銷經驗
│   └── 0 %% 客戶滿意度
├── region "我們的服務"
└── region
    ├── P "客戶案例"
    └── ...

問題描述

StatisticsSection.astro 的內容被錯誤地合併到 PainpointSection 的 <main> 區域內

根本原因

根據 Accessibility Tree 顯示，Statistics 的數據 (0+, 0%%, 0+年, 0%%) 出現在 region "你可能會遇到的煩惱" 內部，而不是作為一個獨立的 section。

預期修復

檢查 index.astro 的組件順序，確保：

1. StatisticsSection 是一個獨立的 <section> 元素
2. 有自己的 H1 標題「數據會說話」
3. 與 PainpointSection 完全分離

---

2. Service Features 位置錯誤 ❌ CRITICAL

參考 HTML 結構

[Footer]
├── [Logo + Description]
├── [Contact Info]
├── H3 "聯絡我們"
├── H3 "行銷方案"  ← Services 在這裡！
│   └── UL
│       ├── LI Google 商家關鍵字
│       ├── LI Google Ads
│       ├── LI 社群代操
│       ├── LI 論壇行銷
│       ├── LI 網紅行銷
│       └── LI 形象影片
└── H3 "行銷放大鏡"
    └── UL [Blog Categories]

Localhost 結構 (問題)

main
├── [Hero]
├── [Painpoint + Statistics]
├── section "我們的服務"  ← 不應該在 main 內！
│   ├── H2 "我們的服務"
│   ├── P "提供全方位..."
│   └── Grid [4 Service Cards]
└── [Client Cases]

問題描述

Localhost 創建了一個獨立的 ServiceFeatures section，但參考 HTML 中 Services 只是在 Footer 的連結列表！

影響

1. 頁面結構完全不同
2. 用戶體驗差異巨大
3. Localhost 多了一個不應該存在的主要內容區塊

預期修復

從 index.astro 中移除 <ServiceFeatures /> 組件，Services 應該只在 Footer 中顯示為連結列表。

---

3. Client Cases Carousel 差異 ⚠️

參考 HTML

• Carousel 輪播效果
• 顯示 "Slide X of Y" 指示器
• 上一頁/下一頁按鈕
• 每個案例有 H2 標題

Localhost

• 靜態顯示 4 個客戶案例
• 沒有 carousel 效果
• 使用 H3 標題

預期修復

更新 ClientCasesSection.astro 實作真正的 carousel 輪播功能。

---

4. Body 高度差異 ⚠️

指標	參考 HTML	Localhost	差異
總高度	3548px	3835px	+287px (+8%)

可能原因

1. Service Features section 額外增加的內容
2. Padding/margin 設定差異
3. 字體大小或間距差異

---

修復優先級與行動

P0 - Critical (立即修復)

1. 移除 ServiceFeatures section

   • 檔案: apps/frontend/src/pages/index.astro
   • 行動: 註解或移除 <ServiceFeatures /> 組件

2. 分離 Statistics Section

   • 檔案: apps/frontend/src/pages/index.astro
   • 確認: StatisticsSection 是獨立的 <section>
   • 確認: 有 H1 標題「數據會說話」

P1 - High (優先修復)

3. 實作 Client Cases Carousel

   • 檔案: apps/frontend/src/sections/ClientCasesSection.astro
   • 行動: 添加 carousel 輪播功能

4. 調整 Body 高度

   • 檢查各 section 的 padding/margin
   • 確保與參考 HTML 一致

---

建議修復順序

1. ✅ 修復背景色 (已完成)
2. ⏳ 移除 ServiceFeatures section
3. ⏳ 驗證 Statistics Section 獨立性
4. ⏳ 實作 Carousel
5. ⏳ 重新截圖驗證

---

相關檔案清單

檔案	狀態	需要修改
apps/frontend/src/pages/index.astro	❌	是 - 移除 ServiceFeatures
apps/frontend/src/sections/ServiceFeatures.astro	⚠️	保留但不在首頁使用
apps/frontend/src/sections/PainpointSection.astro	✅	否
apps/frontend/src/sections/StatisticsSection.astro	⚠️	驗證獨立性
apps/frontend/src/sections/ClientCasesSection.astro	❌	是 - 添加 carousel
apps/frontend/src/sections/CTASection.astro	⚠️	驗證連結正確性