pkupuk
e9897388dc
Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
595 lines
13 KiB
Markdown
595 lines
13 KiB
Markdown
# Story 1-6 About Page - UX Pixel-Perfect Specifications
|
||
|
||
> **UX Expert Review Document**
|
||
> 參考來源: Webflow 原始設計
|
||
> 設計系統: `apps/frontend/src/styles/theme.css`
|
||
> 目標視覺保真度: 100%
|
||
|
||
---
|
||
|
||
## 🎨 Design Token 驗證
|
||
|
||
### 色彩系統 (與 Webflow 原始設計一致)
|
||
|
||
| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|
||
|------|----------|-----------|--------------|----------|
|
||
| 主品牌色 | Enchun Blue | `#3898ec` | `--color-primary` | ✅ 已定義 |
|
||
| 深品牌色 | Deep Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
|
||
| Hover Blue | Hover Blue | `#2895f7` | `--color-primary-hover` | ✅ 已定義 |
|
||
| 主文字 | Text Primary | `#333333` | `--color-text-primary` | ✅ 已定義 |
|
||
| 次要文字 | Text Secondary | `#666666` | `--color-gray-600` | ⚠️ 需確認 |
|
||
| 白色背景 | White | `#ffffff` | `--color-white` | ✅ 已定義 |
|
||
| 卡片背景 | Surface | `#f3f3f3` | `--color-surface2` | ✅ 已定義 |
|
||
| 邊框色 | Border | `#e2e8f0` | `--color-border` | ✅ 已定義 |
|
||
| 正確圖標 | Success | `#3898ec` | `--color-primary` | ✅ 已定義 |
|
||
| 錯誤圖標 | Error | `#ea384c` | `--color-badge-hot` | ✅ 已定義 |
|
||
|
||
---
|
||
|
||
## 📐 Section 詳細規格
|
||
|
||
### 1. Hero Section
|
||
|
||
#### 新組件: `AboutHero.astro`
|
||
|
||
#### 佈局結構
|
||
```html
|
||
<header class="hero-overlay-about">
|
||
<div class="hero_bg-about"></div>
|
||
<div class="centered-container w-container">
|
||
<div class="div-block">
|
||
<h1 class="hero_title_head-about">關於恩群數位</h1>
|
||
<p class="hero_sub_paragraph-about">About Enchun digital</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
```
|
||
|
||
#### CSS 規格
|
||
```css
|
||
.hero-overlay-about {
|
||
background-color: #ffffff;
|
||
padding: 120px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero_title_head-about {
|
||
color: var(--color-enchunblue); /* #23608c */
|
||
font-family: "Noto Sans TC", "Quicksand", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 3rem;
|
||
line-height: 1.2;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.hero_sub_paragraph-about {
|
||
color: var(--color-enchunblue-dark); /* #3083bf */
|
||
font-family: "Quicksand", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 1.25rem;
|
||
line-height: 1.4;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | 標題字體大小 | 副標題字體大小 | Padding |
|
||
|------------|--------------|----------------|---------|
|
||
| Desktop (≥992px) | 3rem (48px) | 1.25rem (20px) | 120px/120px |
|
||
| Tablet (≤991px) | 2.5rem (40px) | 1.125rem (18px) | 80px/80px |
|
||
| Mobile (≤767px) | 2rem (32px) | 1rem (16px) | 60px/60px |
|
||
|
||
---
|
||
|
||
### 2. 服務特色區 (Section Feature)
|
||
|
||
#### 新組件: `FeatureSection.astro`
|
||
|
||
#### 標題區塊
|
||
```css
|
||
.section_feature {
|
||
background-color: #ffffff;
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.section_header_w_line {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.header_subtitle_head {
|
||
color: var(--color-enchunblue); /* #23608c */
|
||
font-weight: 700;
|
||
font-size: 2.25rem;
|
||
line-height: 1.2;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.header_subtitle_paragraph {
|
||
color: #666666;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.divider_line {
|
||
background-color: var(--color-enchunblue);
|
||
height: 2px;
|
||
width: 100px;
|
||
margin: 0 auto;
|
||
}
|
||
```
|
||
|
||
#### 特色卡片網格
|
||
```css
|
||
.feature_grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 30px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.feature_card {
|
||
background: #ffffff;
|
||
border-radius: var(--radius-lg); /* 12px */
|
||
padding: 32px;
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.feature_card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
```
|
||
|
||
#### 特色卡片內容
|
||
```css
|
||
.feature_image {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.feature_image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.feature_head {
|
||
color: #333333;
|
||
font-weight: 600;
|
||
font-size: 1.25rem;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.feature_description {
|
||
color: #666666;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
}
|
||
```
|
||
|
||
#### 四個特色內容
|
||
|
||
| 圖標文件 | 標題 | 描述 |
|
||
|----------|------|------|
|
||
| `address-bro-在地化優先.svg` | 在地化優先 | 線上線下結合曝光渠道，整合多方資訊，帶給消費者最佳的使用體驗，展現商家的獨特之處，順利的將潛在使用者帶到你的實際門市 |
|
||
| `Banknote-bro-高投資報公率.svg` | 高投資轉換率 | 你覺得網路行銷很貴嗎？ 恩群數位善用每一分廣告預算，讓你在網路上發揮最大效益，幫助店家鎖定精準客群，達成目標 |
|
||
| `Social Dashboard-bro-數據優先.svg` | 數據優先 | 想要精準行銷? 恩群數位從數據中萃取洞察，根據數據分析廣告成效，更聰明、有策略的幫您省下行銷預算 |
|
||
| `Partnership-bro-關係優先.svg` | 關係優於銷售 | 除了幫您拓展網路上的知名度，我們更是每家公司最專業的數位夥伴，你會知道有恩群的存在，事業路上你並不孤單 |
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid Columns | Gap |
|
||
|------------|--------------|-----|
|
||
| Desktop (≥992px) | 4 columns | 30px |
|
||
| Tablet (768-991px) | 2 columns | 24px |
|
||
| Mobile (≤767px) | 1 column | 16px |
|
||
|
||
---
|
||
|
||
### 3. 差異化比較區 (Section Comparison)
|
||
|
||
#### 新組件: `ComparisonSection.astro`
|
||
|
||
#### 容器規格
|
||
```css
|
||
.section_comparison {
|
||
background-color: #ffffff;
|
||
padding: 60px 20px;
|
||
}
|
||
|
||
.comparison_holder {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.comparison_gold_madel {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.comparison_gold_madel img {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: contain;
|
||
}
|
||
```
|
||
|
||
#### 比較表格
|
||
```css
|
||
.comparison_table_holder {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
|
||
.comparison_left_holder,
|
||
.comparison_right_holder {
|
||
padding: 32px;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.comparison_left_holder {
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
.comparison_right_holder {
|
||
background-color: #f0f7ff;
|
||
border: 2px solid var(--color-primary);
|
||
}
|
||
|
||
.comparison_header {
|
||
color: #333333;
|
||
font-weight: 700;
|
||
font-size: 1.5rem;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.comparison_description {
|
||
color: #666666;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.comparison_hr {
|
||
border: none;
|
||
border-top: 1px solid #e2e8f0;
|
||
margin-bottom: 24px;
|
||
}
|
||
```
|
||
|
||
#### 比較列表項目
|
||
```css
|
||
.comparison_list_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.comparison_item_title {
|
||
color: #333333;
|
||
font-weight: 500;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.comparison_icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.comparison_icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
```
|
||
|
||
#### 比較項目內容
|
||
|
||
**其他行銷公司** ❌：
|
||
- 缺乏經驗
|
||
- 沒有成效保證
|
||
- 售後無服務
|
||
- 沒有策略
|
||
- 不了解客戶需求
|
||
- 沒有接受客戶反饋
|
||
|
||
**恩群數位** ✅：
|
||
- 實際執行經驗豐富
|
||
- 實際成效
|
||
- 售後服務架構完善
|
||
- 行銷策略有方
|
||
- 熟悉客戶需求
|
||
- 最多客戶回饋
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid |
|
||
|------------|------|
|
||
| Desktop (≥992px) | 2 columns (左右並排) |
|
||
| Mobile (≤767px) | 1 column (上下堆疊) |
|
||
|
||
---
|
||
|
||
### 4. CTA 區塊 (Call to Action)
|
||
|
||
#### 新組件: `CTASection.astro`
|
||
|
||
#### CSS 規格
|
||
```css
|
||
.section_call4action {
|
||
background-color: #ffffff;
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.c4a_grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.c4a_heading {
|
||
color: #333333;
|
||
font-weight: 600;
|
||
font-size: 1.5rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.c4a_button {
|
||
background-color: var(--color-primary); /* #3898ec */
|
||
color: #ffffff;
|
||
padding: 16px 32px;
|
||
border-radius: var(--radius); /* 6px */
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.c4a_button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.c4a_button-text {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
```
|
||
|
||
#### 按鈕圖標
|
||
- **Material Icon**: `phone_callback`
|
||
- **尺寸**: 24px
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | 按鈕寬度 |
|
||
|------------|----------|
|
||
| Desktop (≥992px) | auto |
|
||
| Mobile (≤767px) | 100% (max-width: 300px) |
|
||
|
||
---
|
||
|
||
### 5. 頁尾資訊
|
||
|
||
#### 已有組件: `Footer.astro` (需驗證一致性)
|
||
|
||
#### CSS 規格
|
||
```css
|
||
.section_footer {
|
||
background-color: #f3f3f3;
|
||
padding: 60px 20px 32px;
|
||
}
|
||
|
||
.footer_horizontal_line {
|
||
border: none;
|
||
border-top: 1px solid #e2e8f0;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.footer_grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 40px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | Grid Columns |
|
||
|------------|--------------|
|
||
| Desktop (≥992px) | 4 columns |
|
||
| Tablet (768-991px) | 2 columns |
|
||
| Mobile (≤767px) | 1 column |
|
||
|
||
---
|
||
|
||
## 📱 響應式斷點總結
|
||
|
||
### 主要斷點
|
||
```css
|
||
/* Webflow 原始斷點 */
|
||
@media (min-width: 992px) { /* Desktop */ }
|
||
@media (max-width: 991px) { /* Tablet */ }
|
||
@media (max-width: 767px) { /* Mobile */ }
|
||
@media (max-width: 479px) { /* Small Mobile */ }
|
||
```
|
||
|
||
### HTML 字體大小調整
|
||
```css
|
||
/* Desktop default */
|
||
html { font-size: 19px; }
|
||
|
||
/* Tablet */
|
||
@media (max-width: 991px) {
|
||
html { font-size: 19px; }
|
||
}
|
||
|
||
/* Mobile */
|
||
@media (max-width: 767px) {
|
||
html { font-size: 16px; }
|
||
}
|
||
|
||
/* Small Mobile */
|
||
@media (max-width: 479px) {
|
||
html { font-size: 13px; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 互動效果規格
|
||
|
||
### Hover 效果
|
||
```css
|
||
/* 特色卡片 Hover */
|
||
.feature_card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
/* 按鈕 Hover */
|
||
.c4a_button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
/* 連結 Hover */
|
||
a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
```
|
||
|
||
### 頁面載入動畫
|
||
```css
|
||
.fade-in {
|
||
animation: fadeIn 0.25s ease-in-out;
|
||
}
|
||
|
||
.slide-up {
|
||
animation: slideUp 0.25s ease-in-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(1rem);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🏗️ 組件實現清單
|
||
|
||
### ✅ 已實現
|
||
- [x] `Header.astro` - 已完成
|
||
- [x] `Footer.astro` - 已完成
|
||
|
||
### ⏳ 需新增
|
||
- [ ] `AboutHero.astro` - 關於頁面 Hero 區塊
|
||
- [ ] `FeatureSection.astro` - 服務特色區（4個特色卡片）
|
||
- [ ] `ComparisonSection.astro` - 差異化比較區
|
||
- [ ] `CTASection.astro` - 行動呼籲區塊
|
||
|
||
### 🖼️ 需要的圖標資源
|
||
|
||
| 圖標名稱 | 文件名稱 | 尺寸 |
|
||
|----------|----------|------|
|
||
| 在地化優先 | `address-bro-在地化優先.svg` | 80x80px |
|
||
| 高投資報酬率 | `Banknote-bro-高投資報公率.svg` | 80x80px |
|
||
| 數據優先 | `Social Dashboard-bro-數據優先.svg` | 80x80px |
|
||
| 關係優先 | `Partnership-bro-關係優先.svg` | 80x80px |
|
||
| 金牌獎章 | `winning medal.svg` | 60x60px |
|
||
| 錯誤圖標 | `wrong.svg` | 24x24px |
|
||
| 正確圖標 | `correct.svg` | 24x24px |
|
||
|
||
---
|
||
|
||
## 📋 驗收標準 (Acceptance Criteria)
|
||
|
||
### 視覺保真度檢查
|
||
- [ ] 所有顏色與 Webflow 原始設計 100% 一致
|
||
- [ ] 所有字體大小（含響應式）與規格一致
|
||
- [ ] 所有間距（padding, margin, gap）與規格一致
|
||
- [ ] 所有圓角（border-radius）與規格一致
|
||
- [ ] 所有陰影（box-shadow）與規格一致
|
||
|
||
### 響應式檢查
|
||
- [ ] Desktop (≥992px) 佈局正確
|
||
- [ ] Tablet (≤991px) 佈局正確
|
||
- [ ] Mobile (≤767px) 佈局正確
|
||
- [ ] Small Mobile (≤479px) 佈局正確
|
||
|
||
### 互動效果檢查
|
||
- [ ] Hover 效果流暢
|
||
- [ ] 動畫過渡自然
|
||
- [ ] 比較區卡片正確顯示
|
||
- [ ] CTA 按鈕可點擊
|
||
|
||
### 內容檢查
|
||
- [ ] 4個特色卡片內容正確
|
||
- [ ] 比較列表內容正確
|
||
- [ ] CTA 按鈕連結正確
|
||
- [ ] 圖標正確顯示
|
||
|
||
### 效能檢查
|
||
- [ ] Lighthouse Performance ≥ 90
|
||
- [ ] 圖片優化（SVG）
|
||
- [ ] CSS minification
|
||
- [ ] Lazy loading（如需要）
|
||
|
||
---
|
||
|
||
## 🔄 實現順序建議
|
||
|
||
1. **階段 1: 組件結構**
|
||
- 創建 `AboutHero.astro`
|
||
- 創建 `FeatureSection.astro`
|
||
- 創建 `ComparisonSection.astro`
|
||
- 創建 `CTASection.astro`
|
||
|
||
2. **階段 2: 圖標資源**
|
||
- 準備所有需要的 SVG 圖標
|
||
- 放置於 `public/icons/` 目錄
|
||
|
||
3. **階段 3: 響應式實現**
|
||
- 實現所有斷點佈局
|
||
- 測試移動端顯示
|
||
|
||
4. **階段 4: 互動效果**
|
||
- Hover 效果
|
||
- 載入動畫
|
||
|
||
5. **階段 5: 整合測試**
|
||
- 整合到 `about-enchun.astro` 頁面
|
||
- 視覺保真度驗證
|
||
|
||
---
|
||
|
||
*此文件由 UX Expert 創建，最後更新：2026-02-10*
|
||
*參考來源：Webflow 原始設計*
|