website-enchun-mgr/specs/001-users-pukpuk-dev/ux-story-1-8-contact-spec.md

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

佈局結構

.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);
}

表單標題

.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. 表單區塊

表單容器

.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);
}

輸入框規格

.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. 提交按鈕

.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. 成功/錯誤訊息

.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. 欄位錯誤狀態

.input_field.error {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

---

📱 響應式斷點總結

主要斷點

/* 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; }
}

---

🎯 互動效果規格

輸入框聚焦

.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);
}

平滑滾動

html {
    scroll-behavior: smooth;
}

.contact-section {
    scroll-margin-top: 80px;
}

---

🏗️ 組件實現清單

✅ 已實現

• 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 驗證屬性示例

<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