pkupuk
e9897388dc
Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
412 lines
8.0 KiB
Markdown
412 lines
8.0 KiB
Markdown
# Story 1-8 Contact Page - UX Pixel-Perfect Specifications
|
||
|
||
> **UX Expert Review Document**
|
||
> 參考來源: `research/www.enchun.tw/contact-us.html`
|
||
> 設計系統: `apps/frontend/src/styles/theme.css`
|
||
> 目標視覺保真度: 100%
|
||
|
||
---
|
||
|
||
## 🎨 Design Token 驗證
|
||
|
||
### 色彩系統
|
||
|
||
| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|
||
|------|----------|-----------|--------------|----------|
|
||
| 主品牌色 | Primary Blue | `#3898ec` | `--color-primary` | ✅ 已定義 |
|
||
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
|
||
| 深品牌色 | Enchun Blue Dark | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
|
||
| 主文字 | 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 Green | `#d4edda` | -- | ⚠️ 需新增 |
|
||
| 錯誤訊息 | Error Red | `#f8d7da` | -- | ⚠️ 需新增 |
|
||
| 錯誤文字 | Error Text | `#721c24` | -- | ⚠️ 需新增 |
|
||
|
||
---
|
||
|
||
## 📐 Section 詳細規格
|
||
|
||
### 1. Hero Section
|
||
|
||
#### 現有頁面: `contact-us.astro`
|
||
|
||
#### 佈局結構
|
||
```css
|
||
.contact-section {
|
||
padding: 4rem 0;
|
||
background: var(--color-background);
|
||
}
|
||
|
||
.contactus_wrapper {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 3rem;
|
||
align-items: center;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.contact-image {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.contact-image img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
```
|
||
|
||
#### 表單標題
|
||
```css
|
||
.contact_head {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
color: var(--color-text-primary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.contact_parafraph {
|
||
font-size: 1.125rem;
|
||
font-weight: 400;
|
||
line-height: 1.6;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.contact_reminder {
|
||
font-size: 0.875rem;
|
||
font-style: italic;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: 2rem;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 2. 表單區塊
|
||
|
||
#### 表單容器
|
||
```css
|
||
.contact_form {
|
||
padding: 2rem;
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.contact-form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.contact_field_wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.contact_field_name {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin-bottom: 0.5rem;
|
||
display: block;
|
||
}
|
||
|
||
.contact_field_name span {
|
||
color: var(--color-primary);
|
||
}
|
||
```
|
||
|
||
#### 輸入框規格
|
||
```css
|
||
.input_field {
|
||
width: 100%;
|
||
padding: 0.75rem 1rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius);
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
background: var(--color-background);
|
||
transition: all var(--transition-fast);
|
||
font-family: inherit;
|
||
}
|
||
|
||
.input_field:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.1);
|
||
}
|
||
|
||
.input_field::placeholder {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
#Message {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 3. 提交按鈕
|
||
|
||
```css
|
||
.submit-button {
|
||
background: var(--color-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
padding: 0.875rem 2rem;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
text-align: center;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 200px;
|
||
width: 100%;
|
||
}
|
||
|
||
.submit-button:hover {
|
||
background: var(--color-primary-hover);
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.submit-button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.submit-button[data-wait="送出中"] {
|
||
background: var(--color-gray-400);
|
||
cursor: not-allowed;
|
||
opacity: 0.8;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4. 成功/錯誤訊息
|
||
|
||
```css
|
||
.w-form-done,
|
||
.w-form-fail {
|
||
padding: 1rem 1.5rem;
|
||
border-radius: var(--radius);
|
||
margin-top: 1rem;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
animation: slideUp 0.3s ease-out;
|
||
}
|
||
|
||
.w-form-done {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.w-form-fail {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(1rem);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 5. 欄位錯誤狀態
|
||
|
||
```css
|
||
.input_field.error {
|
||
border-color: #dc3545 !important;
|
||
background-color: #fff5f5;
|
||
}
|
||
|
||
.error-message {
|
||
color: #dc3545;
|
||
font-size: 0.875rem;
|
||
margin-top: 0.25rem;
|
||
display: block;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 響應式斷點總結
|
||
|
||
### 主要斷點
|
||
```css
|
||
/* Desktop (預設) */
|
||
html { font-size: 16px; }
|
||
|
||
/* Tablet */
|
||
@media (max-width: 991px) {
|
||
html { font-size: 19px; }
|
||
.contactus_wrapper {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
}
|
||
|
||
/* Mobile Landscape */
|
||
@media (max-width: 767px) {
|
||
html { font-size: 16px; }
|
||
.contact_form { padding: 1.5rem; }
|
||
.contact-form-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 1rem;
|
||
}
|
||
}
|
||
|
||
/* Mobile Portrait */
|
||
@media (max-width: 479px) {
|
||
html { font-size: 13px; }
|
||
.contact_form { padding: 1rem; }
|
||
.contact_head { font-size: 1.5rem; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 互動效果規格
|
||
|
||
### 輸入框聚焦
|
||
```css
|
||
.input_field:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.1);
|
||
transform: translateY(-1px);
|
||
}
|
||
```
|
||
|
||
### 平滑滾動
|
||
```css
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
.contact-section {
|
||
scroll-margin-top: 80px;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🏗️ 組件實現清單
|
||
|
||
### ✅ 已實現
|
||
- [x] `contact-us.astro` - 基礎框架存在
|
||
|
||
### ⏳ 需修改/新增
|
||
- [ ] 更新表單樣式符合 pixel-perfect 規格
|
||
- [ ] 新增欄位驗證 JavaScript
|
||
- [ ] 新增成功/錯誤訊息處理
|
||
|
||
---
|
||
|
||
## 📋 驗收標準
|
||
|
||
### 視覺保真度檢查
|
||
- [ ] Hero section 佈局與原網站一致
|
||
- [ ] 標題字體大小和顏色匹配
|
||
- [ ] 表單欄位排列與間距一致
|
||
- [ ] 按鈕樣式和 hover 效果匹配
|
||
|
||
### 功能檢查
|
||
- [ ] 表單欄位驗證正常
|
||
- [ ] Email 格式驗證正確
|
||
- [ ] 提交按鈕 loading 狀態顯示
|
||
- [ ] 成功/錯誤訊息顯示
|
||
- [ ] 表單重置功能正常
|
||
|
||
### 可訪問性檢查
|
||
- [ ] 所有輸入框有正確 label
|
||
- [ ] ARIA 屬性正確設置
|
||
- [ ] 鍵盤導航正常
|
||
- [ ] 錯誤訊息可被螢幕閱讀器讀取
|
||
|
||
---
|
||
|
||
## 📝 表單欄位規格
|
||
|
||
### 必填欄位驗證
|
||
|
||
| 欄位 ID | 名稱 | 類型 | 必填 | 驗證規則 |
|
||
|---------|------|------|------|----------|
|
||
| Name | 姓名 | text | ✅ | 2-256 字元，中文/英文 |
|
||
| Phone | 聯絡電話 | tel | ✅ | 數字、連字號、加號 |
|
||
| Email | Email | email | ✅ | 有效 Email 格式 |
|
||
| Message | 聯絡訊息 | textarea | ✅ | 10-5000 字元 |
|
||
|
||
### HTML5 驗證屬性示例
|
||
```html
|
||
<input
|
||
type="text"
|
||
id="Name"
|
||
name="Name"
|
||
required
|
||
minlength="2"
|
||
maxlength="256"
|
||
pattern="[\u4e00-\u9fa5a-zA-Z\s]+"
|
||
title="請輸入有效的姓名"
|
||
>
|
||
|
||
<input
|
||
type="tel"
|
||
id="Phone"
|
||
name="Phone"
|
||
required
|
||
pattern="[0-9\-\s\+]+"
|
||
title="請輸入有效的電話號碼"
|
||
>
|
||
|
||
<input
|
||
type="email"
|
||
id="Email"
|
||
name="Email"
|
||
required
|
||
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
|
||
title="請輸入有效的 Email"
|
||
>
|
||
|
||
<textarea
|
||
id="Message"
|
||
name="Message"
|
||
required
|
||
minlength="10"
|
||
maxlength="5000"
|
||
title="請輸入至少 10 個字元的訊息"
|
||
></textarea>
|
||
```
|
||
|
||
---
|
||
|
||
*此文件由 UX Expert 創建，最後更新：2026-02-10*
|