pkupuk
e9897388dc
Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
582 lines
12 KiB
Markdown
582 lines
12 KiB
Markdown
# Story 1-5 Homepage - UX Pixel-Perfect Specifications
|
||
|
||
> **UX Expert Review Document**
|
||
> 參考來源: `research/www.enchun.tw/index.html` (Webflow Export)
|
||
> 設計系統: `apps/frontend/src/styles/theme.css`
|
||
> 目標視覺保真度: 100%
|
||
|
||
---
|
||
|
||
## 🎨 Design Token 驗證
|
||
|
||
### 色彩系統 (與 Webflow 原始設計一致)
|
||
|
||
| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|
||
|------|----------|-----------|--------------|----------|
|
||
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
|
||
| 深品牌色 | Enchun Blue Dark | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
|
||
| 淺藍色 | Tropical Blue | `#c7e4fa` | `--color-tropical-blue` | ✅ 已定義 |
|
||
| 頁腳文字 | St. Tropaz | `#5d7285` | `--color-st-tropaz` | ✅ 已定義 |
|
||
| CTA 強調 | Amber | `#f6c456` | `--color-amber` | ✅ 已定義 |
|
||
| 深色文字 | Tarawera | `#2d3748` | `--color-tarawera` | ✅ 已定義 |
|
||
| 通知紅 | Notification Red | `#d84038` | --color-notification-red | ⚠️ 需新增 |
|
||
| 深藍色 | Dark Blue | `#062841` | --color-dark-blue | ⚠️ 需新增 |
|
||
| 中藍色 | Medium Blue | `#67aee1` | --color-medium-blue | ⚠️ 需新增 |
|
||
| 超淺灰 | Grey 6 | `#f2f2f2` | `--color-gray-100` | ✅ 已定義 |
|
||
| 淺灰 | Grey 5 | `#e0e0e0` | --color-grey5 | ⚠️ 需新增 |
|
||
| 中灰 | Grey 3 | `#828282` | `--color-gray-700` | ✅ 已定義 |
|
||
| 深灰 | Grey 2 | `#4f4f4f` | `--color-gray-950` | ✅ 已定義 |
|
||
|
||
### 新增設計 Token 需求
|
||
|
||
請在 `theme.css` 中新增以下變數：
|
||
|
||
```css
|
||
/* Webflow 額外色彩 */
|
||
--color-notification-red: #d84038;
|
||
--color-dark-blue: #062841;
|
||
--color-medium-blue: #67aee1;
|
||
--color-grey5: #e0e0e0;
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 Section 詳細規格
|
||
|
||
### 1. Hero Section
|
||
|
||
#### 組件檔案: `VideoHero.astro` (已存在，需調整)
|
||
|
||
#### 容器規格
|
||
```css
|
||
.centered-container-home {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
max-height: 88.5vh; /* Webflow 原始值 */
|
||
padding-top: 110px; /* Desktop */
|
||
padding-bottom: 100px;
|
||
}
|
||
```
|
||
|
||
#### 背景影片
|
||
```css
|
||
.background-video {
|
||
position: absolute;
|
||
z-index: -1;
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
```
|
||
- **Autoplay**: `true`
|
||
- **Loop**: `true`
|
||
- **Muted**: `true`
|
||
- **Playsinline**: `true`
|
||
|
||
#### 漸層遮罩
|
||
```css
|
||
.hero-overlay-home {
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(0, 0, 0, 0.8) 0%,
|
||
rgba(0, 0, 0, 0) 100%
|
||
);
|
||
}
|
||
```
|
||
|
||
#### Logo
|
||
```css
|
||
.hero_logo {
|
||
width: 135px; /* Desktop */
|
||
padding-top: 33px;
|
||
}
|
||
```
|
||
|
||
#### 標題文字
|
||
```css
|
||
.hero_title_head {
|
||
font-size: 3.39em; /* Desktop, ~64px base 19px */
|
||
line-height: 1.2;
|
||
text-align: left;
|
||
color: #ffffff;
|
||
font-family: "Noto Sans TC", sans-serif;
|
||
}
|
||
|
||
.hero_sub_paragraph-home {
|
||
font-size: 1.56em; /* Desktop, ~30px */
|
||
font-weight: 300;
|
||
line-height: 1.2;
|
||
text-align: left;
|
||
color: #f2f2f2; /* var(--grey6) */
|
||
font-family: "Quicksand", sans-serif;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | 標題字體大小 | 副標題字體大小 | Padding |
|
||
|------------|--------------|----------------|---------|
|
||
| Desktop (≥992px) | 3.39em (64px) | 1.56em (30px) | 110px/100px |
|
||
| Tablet (≤991px) | 2.45em (47px) | 1.15em (22px) | 0/0 |
|
||
| Mobile (≤767px) | 7vw | 3.4vw | 0/0 |
|
||
|
||
#### ❌ 當前實現問題
|
||
1. 當前字體大小使用 `text-6xl`，與 Webflow 的 `3.39em` 不符
|
||
2. 漸層遮罩方向需要確認
|
||
3. Logo 尺寸需要調整為 135px
|
||
|
||
---
|
||
|
||
### 2. 煩惱點區塊 (Painpoint Section)
|
||
|
||
#### 新組件: `PainpointSection.astro`
|
||
|
||
#### 容器規格
|
||
```css
|
||
.section_painpoint {
|
||
height: 80vh;
|
||
max-height: 80vh;
|
||
}
|
||
```
|
||
|
||
#### 標題區塊
|
||
```css
|
||
.section_header_w_line {
|
||
text-align: center;
|
||
}
|
||
|
||
.header_subtitle_head {
|
||
font-size: 1.8rem; /* ~34px */
|
||
text-align: center;
|
||
color: var(--color-dark-blue); /* #062841 */
|
||
}
|
||
|
||
.divider_line {
|
||
background-color: var(--color-enchunblue);
|
||
height: 1px;
|
||
width: 60px;
|
||
margin: 16px auto;
|
||
}
|
||
```
|
||
|
||
#### Tabs 系統
|
||
```css
|
||
.painpoint_tabs {
|
||
padding-top: 32px;
|
||
padding-bottom: 70px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr; /* Desktop: 2 columns */
|
||
gap: 32px;
|
||
}
|
||
|
||
.painpoint_text {
|
||
font-size: 2.08em; /* ~40px */
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
color: var(--color-dark-blue);
|
||
font-family: "Noto Sans TC", sans-serif;
|
||
cursor: pointer;
|
||
transition: text-shadow 0.3s ease;
|
||
}
|
||
|
||
.painpoint_text:hover {
|
||
text-shadow: 7px 4px 13px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.tab_panel_frame {
|
||
border: 1px solid var(--color-enchunblue);
|
||
border-radius: 10px;
|
||
position: relative;
|
||
top: -47px;
|
||
padding: 32px;
|
||
}
|
||
|
||
.painpoint_icon {
|
||
height: 110px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon_holder {
|
||
width: 130px;
|
||
height: 115px;
|
||
background-color: var(--color-gray-100); /* #f2f2f2 */
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid | 字體調整 |
|
||
|------------|------|----------|
|
||
| Desktop (≥992px) | 2 columns | 100% |
|
||
| Tablet (≤991px) | 1 column | 85% |
|
||
| Mobile (≤767px) | 1 column | 70% |
|
||
|
||
---
|
||
|
||
### 3. 數據統計區塊 (Statistics Section)
|
||
|
||
#### 新組件: `StatisticsSection.astro`
|
||
|
||
#### 容器規格
|
||
```css
|
||
.section_digi_running {
|
||
padding: var(--spacing-3xl) 0; /* 64px vertical */
|
||
}
|
||
|
||
.digi_holder_grid {
|
||
display: grid;
|
||
grid-column-gap: 85px;
|
||
grid-row-gap: 16px;
|
||
grid-template-columns: repeat(4, max-content);
|
||
justify-content: center;
|
||
max-width: 1150px;
|
||
margin: 0 auto;
|
||
}
|
||
```
|
||
|
||
#### 數字顯示
|
||
```css
|
||
.text_no {
|
||
font-size: 72px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
color: var(--color-amber); /* #f6c456 */
|
||
/* Animation: countup, duration 3s */
|
||
}
|
||
|
||
.text_percentage {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
color: var(--color-gray-700); /* #828282 */
|
||
}
|
||
|
||
.text_description {
|
||
font-size: 30px;
|
||
font-weight: 100;
|
||
line-height: 1.2;
|
||
color: var(--color-dark-blue); /* #062841 */
|
||
}
|
||
```
|
||
|
||
#### 動畫規格
|
||
- **Countup 動畫**: 持續時間 3 秒
|
||
- **Easing**: `ease-out`
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid Columns | Gap |
|
||
|------------|--------------|-----|
|
||
| Desktop (≥992px) | 4 columns | 85px |
|
||
| Tablet (≤991px) | 2 columns | 40px |
|
||
| Mobile (≤767px) | 1 column | 24px |
|
||
|
||
---
|
||
|
||
### 4. 客戶案例區塊 (Client Cases)
|
||
|
||
#### 新組件: `ClientCasesSection.astro`
|
||
|
||
#### 容器規格
|
||
```css
|
||
.section_client-case {
|
||
padding: var(--spacing-3xl) 0;
|
||
}
|
||
|
||
.client_case_sub {
|
||
font-size: 24px;
|
||
font-weight: 300;
|
||
line-height: 1.1;
|
||
color: var(--color-enchunblue); /* #23608c */
|
||
margin-top: 55px;
|
||
text-align: center;
|
||
}
|
||
```
|
||
|
||
#### 輪播設定
|
||
```css
|
||
.case_slider_wrapper {
|
||
height: 77vh;
|
||
/* Autoplay: 2500ms */
|
||
/* Animation: slide */
|
||
/* Infinite: true */
|
||
}
|
||
|
||
.case_content_grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-column-gap: 55px;
|
||
grid-row-gap: 55px;
|
||
}
|
||
```
|
||
|
||
#### 案例卡片
|
||
```css
|
||
.case_slide_image {
|
||
object-fit: cover;
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
}
|
||
|
||
.case_heading {
|
||
font-size: 1.7em;
|
||
color: var(--color-dark-blue);
|
||
font-family: "Noto Sans TC", sans-serif;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.case_job_title {
|
||
font-size: 18px;
|
||
color: var(--color-enchunblue-dark); /* #3083bf */
|
||
font-weight: 100;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.case_review {
|
||
font-size: 18px;
|
||
color: var(--color-gray-700);
|
||
font-weight: 100;
|
||
line-height: 1.6;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid | Height |
|
||
|------------|------|--------|
|
||
| Desktop (≥992px) | 2 columns | 77vh |
|
||
| Tablet (≤991px) | 1 column | auto |
|
||
| Mobile (≤767px) | 1 column | 59vh |
|
||
|
||
---
|
||
|
||
### 5. 行動呼籲區塊 (CTA Section)
|
||
|
||
#### 新組件: `CTASection.astro`
|
||
|
||
#### 容器規格
|
||
```css
|
||
.section_call4action {
|
||
padding: 105px 0 126px 0;
|
||
}
|
||
|
||
.c4a_grid {
|
||
display: grid;
|
||
grid-column-gap: 60px;
|
||
grid-template-columns: max-content max-content;
|
||
place-items: center;
|
||
justify-content: center;
|
||
}
|
||
```
|
||
|
||
#### 標題
|
||
```css
|
||
.c4a_heading {
|
||
color: var(--color-dark-blue);
|
||
font-size: 1.88em;
|
||
font-weight: 500;
|
||
line-height: 1.1;
|
||
}
|
||
```
|
||
|
||
#### 按鈕
|
||
```css
|
||
.c4a_button {
|
||
background-color: var(--color-notification-red); /* #d84038 */
|
||
border-radius: 15px;
|
||
padding: 18px 24px;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.c4a_button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.c4a_button-text {
|
||
color: #f2f2f2;
|
||
font-size: 1.56em;
|
||
line-height: 1.1;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid | Button Width |
|
||
|------------|------|--------------|
|
||
| Desktop (≥992px) | 2 columns | auto |
|
||
| Tablet (≤991px) | 1 column | auto |
|
||
| Mobile (≤767px) | 1 column | 160px (min-width) |
|
||
|
||
---
|
||
|
||
## 📱 響應式斷點總結
|
||
|
||
### 主要斷點
|
||
```css
|
||
/* Webflow 原始斷點 */
|
||
@media (min-width: 1440px) { /* Desktop Large */ }
|
||
@media (max-width: 991px) { /* Tablet */ }
|
||
@media (max-width: 767px) { /* Mobile Landscape */ }
|
||
@media (max-width: 479px) { /* Mobile Portrait */ }
|
||
```
|
||
|
||
### HTML 字體大小調整
|
||
```css
|
||
/* Desktop default */
|
||
html { font-size: 19px; }
|
||
|
||
/* Tablet */
|
||
@media (max-width: 991px) {
|
||
html { font-size: 19px; }
|
||
}
|
||
|
||
/* Mobile Landscape */
|
||
@media (max-width: 767px) {
|
||
html { font-size: 16px; }
|
||
}
|
||
|
||
/* Mobile Portrait */
|
||
@media (max-width: 479px) {
|
||
html { font-size: 13px; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 互動效果規格
|
||
|
||
### Hover 效果
|
||
```css
|
||
/* Tab 文字 Hover */
|
||
.painpoint_text:hover {
|
||
text-shadow: 7px 4px 13px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* 導航連結 Hover */
|
||
.nav-link:hover {
|
||
background-color: var(--color-dark-blue);
|
||
}
|
||
|
||
/* 連結 Hover */
|
||
a:hover {
|
||
opacity: 0.6;
|
||
}
|
||
a:active {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 按鈕 Hover */
|
||
.c4a_button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
```
|
||
|
||
### 過渡動畫
|
||
```css
|
||
/* Tabs */
|
||
--transition-tabs: ease-in-out-cubic;
|
||
|
||
/* 輪播 */
|
||
--transition-slider: ease-in-out-quint;
|
||
|
||
/* 數字 Countup */
|
||
--animation-countup: 3s ease-out;
|
||
```
|
||
|
||
---
|
||
|
||
## 🏗️ 組件實現清單
|
||
|
||
### ✅ 已實現
|
||
- [x] `VideoHero.astro` - 需調整字體大小和間距
|
||
- [x] `Header.astro` - 已完成
|
||
- [x] `Footer.astro` - 已完成
|
||
|
||
### ⏳ 需新增/修改
|
||
- [ ] `VideoHero.astro` - 調整字體大小、漸層遮罩
|
||
- [ ] `PainpointSection.astro` - 新增組件
|
||
- [ ] `StatisticsSection.astro` - 新增組件，含 countup 動畫
|
||
- [ ] `ClientCasesSection.astro` - 新增組件，含輪播功能
|
||
- [ ] `CTASection.astro` - 新增組件
|
||
|
||
---
|
||
|
||
## 📋 驗收標準 (Acceptance Criteria)
|
||
|
||
### 視覺保真度檢查
|
||
- [ ] 所有顏色與 Webflow 原始設計 100% 一致
|
||
- [ ] 所有字體大小（含響應式）與規格一致
|
||
- [ ] 所有間距（padding, margin, gap）與規格一致
|
||
- [ ] 所有圓角（border-radius）與規格一致
|
||
- [ ] 所有陰影（box-shadow）與規格一致
|
||
|
||
### 響應式檢查
|
||
- [ ] Desktop (≥1440px) 佈局正確
|
||
- [ ] Tablet (≤991px) 佈局正確
|
||
- [ ] Mobile (≤767px) 佈局正確
|
||
- [ ] Mobile Portrait (≤479px) 佈局正確
|
||
|
||
### 互動效果檢查
|
||
- [ ] Hover 效果流暢
|
||
- [ ] 動畫過渡自然
|
||
- [ ] 輪播功能正常
|
||
- [ ] Countup 動畫正常
|
||
|
||
### 效能檢查
|
||
- [ ] Lighthouse Performance ≥ 90
|
||
- [ ] 影片載入優化（WebM + MP4 fallback）
|
||
- [ ] 圖片 lazy loading
|
||
- [ ] CSS/JS minification
|
||
|
||
---
|
||
|
||
## 🔄 實現順序建議
|
||
|
||
1. **階段 1: 設計系統更新**
|
||
- 新增缺失的 CSS 變數到 `theme.css`
|
||
- 更新響應式字體大小斷點
|
||
|
||
2. **階段 2: Hero Section 調整**
|
||
- 修改 `VideoHero.astro` 字體大小
|
||
- 調整漸層遮罩方向
|
||
- 調整 Logo 尺寸
|
||
|
||
3. **階段 3: 新增 Sections**
|
||
- `PainpointSection.astro`
|
||
- `StatisticsSection.astro`
|
||
- `ClientCasesSection.astro`
|
||
- `CTASection.astro`
|
||
|
||
4. **階段 4: 響應式測試**
|
||
- 測試所有斷點
|
||
- 調整移動端佈局
|
||
|
||
5. **階段 5: 動畫與互動**
|
||
- Countup 動畫
|
||
- 輪播功能
|
||
- Hover 效果
|
||
|
||
6. **階段 6: 效能優化**
|
||
- 影片壓縮
|
||
- 圖片優化
|
||
- Code splitting
|
||
|
||
---
|
||
|
||
*此文件由 UX Expert 創建，最後更新：2026-02-10*
|
||
*參考來源：Webflow Export HTML (7.4MB)*
|