Day 10
設計規格彙整：完成完整的設計文件（區塊、配色、字體大小、互動效果

今天的任務是將前幾天討論並決定的色彩方案、字體風格、介面版面與遊戲流程，正式彙整成一份完整的設計規格文件（Design Specification）。這份文件將成為後續前端開發的「藍圖」，讓團隊在程式撰寫、切版、動畫製作時都能遵循統一的標準，避免出現風格不一致或互動混亂的情況。設計規格並不只是整理美術素材，它同時是一份細節到位的開發指南，確保視覺設計與程式邏輯可以無縫銜接。

1. 網站區塊說明
   在設計文件中，首先需要明確劃分整個網站的主要區塊，並附上簡要描述：
   首頁（Home）：包含遊戲標誌、開始遊戲按鈕、基本說明與背景動畫。
   遊戲頁面（Game Scene）：核心遊戲畫面，包含主遊戲區域、計分區、時間或生命值指示、控制按鈕等。
   結算頁（Result）：顯示玩家分數、排名、重新挑戰或返回首頁的選項。
   其他元件：例如彈出式提示視窗（開始倒數、遊戲失敗通知）、背景音樂開關、暫停選單等。

每個區塊除了需要標註名稱與功能外，最好附上簡單的示意圖或 Figma 截圖，讓開發者能立即了解排版邏輯與元件位置。

2. 配色系統
   根據 Day 9 確定的主色、輔助色與背景色，設計文件中需要精準標註色碼，例如：
   主色（Primary）：#A3D8F4 – 用於背景與主要區塊
   輔助色（Secondary）：#FFB347 – 用於按鈕、強調標題
   強調色（Accent）：#FF6B6B – 用於重要互動提示、警示訊息
   背景色（Background）：#FDFDFD – 遊戲主頁與結算頁的基底
   文字色（Text）：#333333（深灰）或 #FFFFFF（亮字體）

除了色碼外，也應列出色彩比例與使用規則（例如：背景 60%、主色 30%、強調色 10%），確保在不同頁面與元件中保持一致的視覺層次。

3. 字體規範
   字體部分不僅要指定字型名稱，還需要詳細標註字體大小、字重（Regular/Bold）、字距與行距：
   標題（H1）：40px / Bold / 字距 1.2 – 用於首頁遊戲名稱
   副標題（H2）：28px / Semi-Bold – 用於遊戲說明或分數標題
   內文（Body）：16px / Regular / 行距 1.5 – 用於規則與操作提示
   按鈕字體：18px / Bold / 全大寫 – 提升按鈕的可讀性與點擊吸引力

如果有多語系需求（例如繁體中文 + 英文），需同時標註對應的字型組合，例如：

中文：思源黑體
英文：Nunito / Poppins

4. 互動效果細節
   互動設計是遊戲網站的重要部分，文件中需列出每個元件的動態行為與動畫規則：
   按鈕狀態：正常（default）、滑鼠懸停（hover）、按下（active）、禁用（disabled）時的顏色與陰影變化。
   遊戲元素動畫：例如翻牌遊戲的卡片翻轉，可規定使用CSS transform: rotateY(180deg)搭配 transition 0.4s ease-in-out。
   頁面切換過場：例如從首頁進入遊戲頁時，背景漸入或角色淡入效果，指定keyframes與時間長度（0.6s）。
   音效與觸覺回饋：若有音效播放或震動（行動版），需標註觸發條件與檔案路徑。

5. 補充規範與資源
   圖示與插畫：提供所有使用到的 SVG/PNG 檔案與命名規則。
   排版格線：若採用 12 欄或 16 欄格線，需標註欄寬、間距。
   裝置適應性：桌面版、平板版、手機版的尺寸規範（RWD）。
   檔案結構：建議的資料夾架構，例如 /assets/images、/css/animations、/js/game。

今日成果與價值
完成這份設計規格文件後，團隊中的每個成員都能清楚了解網站的視覺元素、互動效果與程式需求，即使開發過程中需要新增功能，也能快速依據文件做延伸。這不僅能降低溝通成本，也能在之後測試與修改時提供明確依據，確保遊戲最終呈現與設計初衷一致。

結論：Day 10 的工作像是為整個專案蓋上「施工藍圖」的最後一章，讓接下來的程式開發能順利展開，並確保最終網站呈現出完整的視覺統一性與流暢的玩家體驗。