pkupuk
e9897388dc
Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
326 lines
7.0 KiB
Markdown
326 lines
7.0 KiB
Markdown
# Story 1-7 Solutions Page - UX Pixel-Perfect Specifications
|
||
|
||
> **UX Expert Review Document**
|
||
> 參考來源: Webflow 原始設計
|
||
> 設計系統: `apps/frontend/src/styles/theme.css`
|
||
> 目標視覺保真度: 100%
|
||
|
||
---
|
||
|
||
## 🎨 Design Token 驗證
|
||
|
||
### 色彩系統
|
||
|
||
| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|
||
|------|----------|-----------|--------------|----------|
|
||
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
|
||
| 深色 | Dark Blue | `#062841` | `--color-dark-blue` | ⚠️ 需新增 |
|
||
| 淺藍色 | Tropical Blue | `#c7e4fa` | `--color-tropical-blue` | ✅ 已定義 |
|
||
| 淺藍色 2 | Light Blue | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
|
||
| 中藍色 | Medium Blue | `#67aee1` | `--color-medium-blue` | ⚠️ 需新增 |
|
||
| CTA 強調 | Amber | `#f6c456` | `--color-amber` | ✅ 已定義 |
|
||
| Hot 標籤 | Notification Red | `#d84038` | `--color-notification-red` | ⚠️ 需新增 |
|
||
| 文字主要 | Grey 3 | `#828282` | `--color-gray-700` | ✅ 已定義 |
|
||
| 背景 | Grey 6 | `#f2f2f2` | `--color-gray-100` | ✅ 已定義 |
|
||
|
||
### 新增設計 Token 需求
|
||
|
||
```css
|
||
/* Webflow 額外色彩 */
|
||
--color-notification-red: #d84038;
|
||
--color-dark-blue: #062841;
|
||
--color-medium-blue: #67aee1;
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 Section 詳細規格
|
||
|
||
### 1. Hero Section
|
||
|
||
#### 新組件: `SolutionsHero.astro`
|
||
|
||
#### CSS 規格
|
||
```css
|
||
.hero-overlay-solution {
|
||
background-color: var(--color-dark-blue); /* #062841 */
|
||
max-height: 63.5vh;
|
||
padding: 120px 20px 80px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.hero_title_head-solution {
|
||
color: #ffffff;
|
||
font-family: "Noto Sans TC", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 3.39em; /* Desktop: ~64px */
|
||
line-height: 1.2;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.hero_sub_paragraph-solution {
|
||
color: var(--color-gray-100); /* #f2f2f2 */
|
||
font-family: "Quicksand", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 1.56em; /* Desktop: ~30px */
|
||
line-height: 1.2;
|
||
}
|
||
```
|
||
|
||
#### 響應式調整
|
||
|
||
| Breakpoint | 標題字體大小 | 副標題字體大小 |
|
||
|------------|--------------|----------------|
|
||
| Desktop (≥992px) | 3.39em (~64px) | 1.56em (~30px) |
|
||
| Tablet (≤991px) | 2.45em (~47px) | 1.15em (~22px) |
|
||
| Mobile (≤767px) | 7vw | 3.4vw |
|
||
|
||
---
|
||
|
||
### 2. 服務項目列表
|
||
|
||
#### 新組件: `ServicesList.astro`
|
||
|
||
#### 佈局規格 (Zig-zag Pattern)
|
||
```css
|
||
.section_service-list {
|
||
background-color: #ffffff;
|
||
padding: 60px 20px;
|
||
}
|
||
|
||
.service-item {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 40px;
|
||
align-items: center;
|
||
margin-bottom: 60px;
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* 交替佈局 - 單數項目圖在右 */
|
||
.service-item:nth-child(odd) {
|
||
grid-template-areas: "content image";
|
||
}
|
||
|
||
/* 交替佈局 - 雙數項目圖在左 */
|
||
.service-item:nth-child(even) {
|
||
grid-template-areas: "image content";
|
||
}
|
||
|
||
.service-item-content {
|
||
grid-area: content;
|
||
}
|
||
|
||
.service-item-image {
|
||
grid-area: image;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.service-item {
|
||
grid-template-columns: 1fr;
|
||
grid-template-areas: "image" "content" !important;
|
||
gap: 24px;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 服務卡片規格
|
||
```css
|
||
.service-category-tag {
|
||
display: inline-block;
|
||
padding: 6px 14px;
|
||
background-color: var(--color-enchunblue); /* #23608c */
|
||
color: white;
|
||
border-radius: 20px;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.service-title {
|
||
font-family: "Noto Sans TC", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 1.75rem;
|
||
color: var(--color-dark-blue); /* #062841 */
|
||
margin-bottom: 16px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.service-divider {
|
||
width: 60px;
|
||
height: 2px;
|
||
background-color: var(--color-enchunblue);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.service-description {
|
||
font-family: "Quicksand", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
color: var(--color-gray-700); /* #828282 */
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.service-hot-badge {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
background-color: var(--color-notification-red); /* #d84038 */
|
||
color: white;
|
||
padding: 6px 12px;
|
||
border-radius: 20px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
}
|
||
```
|
||
|
||
#### 間距規格
|
||
|
||
| Breakpoint | 左右間距 |
|
||
|------------|----------|
|
||
| Desktop (≥992px) | 40px |
|
||
| Tablet (≤991px) | 24px |
|
||
| Mobile (≤767px) | 12px |
|
||
|
||
---
|
||
|
||
### 3. 八個服務項目
|
||
|
||
#### 1. 社群經營代操
|
||
- **圖標**: Facebook, Instagram
|
||
- **標籤**: "海洋專案"
|
||
- **Hot 標籤**: ✅ 顯示
|
||
|
||
#### 2. Google 商家關鍵字
|
||
- **圖標**: Google Maps
|
||
- **標籤**: "Google"
|
||
- **Hot 標籤**: ✅ 顯示
|
||
|
||
#### 3. Google Ads 關鍵字
|
||
- **圖標**: Google Ads
|
||
- **標籤**: "Google"
|
||
- **Hot 標籤**: ❌ 不顯示
|
||
|
||
#### 4. 網路新聞媒體
|
||
- **圖標**: News
|
||
- **標籤**: "媒體行銷"
|
||
- **Hot 標籤**: ❌ 不顯示
|
||
|
||
#### 5. 網紅行銷專案
|
||
- **圖標**: YouTube
|
||
- **標籤**: "口碑行銷"
|
||
- **Hot 標籤**: ✅ 顯示
|
||
|
||
#### 6. 論壇行銷專案
|
||
- **圖標**: Dcard
|
||
- **標籤**: "口碑行銷"
|
||
- **Hot 標籤**: ❌ 不顯示
|
||
|
||
#### 7. 形象網站設計
|
||
- **圖標**: ❌ 隱藏
|
||
- **標籤**: "品牌行銷"
|
||
- **Hot 標籤**: ❌ 不顯示
|
||
|
||
#### 8. 品牌形象影片
|
||
- **圖標**: ❌ 隱藏
|
||
- **標籤**: "品牌行銷"
|
||
- **Hot 標籤**: ❌ 不顯示
|
||
|
||
---
|
||
|
||
## 📱 響應式斷點總結
|
||
|
||
### 主要斷點
|
||
```css
|
||
/* Desktop */
|
||
@media (min-width: 992px) { /* Zig-zag 佈局 */ }
|
||
|
||
/* Tablet */
|
||
@media (max-width: 991px) {
|
||
html { font-size: 19px; }
|
||
.service-item { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
|
||
/* Mobile */
|
||
@media (max-width: 767px) {
|
||
html { font-size: 16px; }
|
||
.service-item { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* Small Mobile */
|
||
@media (max-width: 479px) {
|
||
html { font-size: 13px; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 互動效果規格
|
||
|
||
### Hover 效果
|
||
```css
|
||
.service-item:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.service-item:hover .service-title {
|
||
color: var(--color-enchunblue);
|
||
}
|
||
|
||
.service-item-image img {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.service-item:hover .service-item-image img {
|
||
transform: scale(1.05);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🏗️ 組件實現清單
|
||
|
||
### ⏳ 需新增
|
||
- [ ] `SolutionsHero.astro` - 行銷方案 Hero 區塊
|
||
- [ ] `ServicesList.astro` - 服務項目列表（含 zig-zag 佈局）
|
||
- [ ] `ServiceCard.astro` - 單一服務卡片
|
||
|
||
### 🖼️ 需要的圖標資源
|
||
|
||
| 圖標名稱 | 來源 |
|
||
|----------|------|
|
||
| Facebook | Material Icons / SVG |
|
||
| Instagram | Material Icons / SVG |
|
||
| Google Maps | Material Icons / SVG |
|
||
| Google Ads | Material Icons / SVG |
|
||
| News | Material Icons / SVG |
|
||
| YouTube | Material Icons / SVG |
|
||
| Dcard | Custom SVG |
|
||
|
||
---
|
||
|
||
## 📋 驗收標準
|
||
|
||
### 視覺保真度檢查
|
||
- [ ] Hero 背景色正確 (#062841)
|
||
- [ ] 服務卡片 Zig-zag 佈局正確
|
||
- [ ] Hot 標籤顯示在正確位置
|
||
- [ ] 分類標籤顏色正確
|
||
|
||
### 響應式檢查
|
||
- [ ] Desktop Zig-zag 交替顯示
|
||
- [ ] Tablet 保持雙欄
|
||
- [ ] Mobile 單欄堆疊
|
||
|
||
### 互動效果檢查
|
||
- [ ] Hover 效果流暢
|
||
- [ ] 連結可點擊
|
||
|
||
---
|
||
|
||
*此文件由 UX Expert 創建，最後更新：2026-02-10*
|