pkupuk
f6b806617e
Include supplementary documentation, research notes on Lexical/UX, and setup guides.
196 lines
5.6 KiB
Markdown
196 lines
5.6 KiB
Markdown
# 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` | ⚠️ | 驗證連結正確性 |
|