Day 8 — 介面草圖
主題：手繪或 Figma 畫出主要版面
目標：今天的任務是將昨天的網站流程圖轉化為更具體的「介面草圖 (Wireframe)」，無論是用紙筆手繪，或是使用 Figma 進行數位繪製，都要將每個頁面的 版面配置、元件位置、操作動線 具體化。
這一步的重點不在於美術設計，而是建立清晰的介面結構，幫助日後撰寫 HTML/CSS 時更快定稿，也方便後續討論與修改。
介面草圖是將「概念」轉換為「可實作版面」的重要步驟：
清楚標示元素位置：例如按鈕、標題、遊戲畫面、分數區的相對位置。
提前檢查可用性：玩家是否容易找到開始按鈕？計時器或分數是否清晰？
快速修改與測試：比起直接寫程式，草圖階段修改成本極低。
與流程圖銜接：讓昨天的網站流程（首頁 → 遊戲 → 結算）在視覺上更加具體。
草圖工具選擇
可以選擇以下兩種方式：
1.紙筆手繪
優點：快速、不受工具限制，方便臨時修改。
小技巧：使用鉛筆繪製方框代表按鈕、圓形代表圖示，並用箭頭標註互動動線。
Figma / 線上工具
優點：易於分享、調整與版本管理，之後可以直接延伸為高保真設計。
推薦工具：Figma（免費好用）、Sketch、Adobe XD、Whimsical。
主要頁面草圖規劃
根據前一天的流程圖，網站核心頁面包括首頁 → 遊戲頁面 → 結算頁面，每個頁面需要設計主要區塊與互動元件。
(1)首頁(Home Page)
核心功能：呈現遊戲名稱與簡介，吸引用戶點擊進入遊戲。
草圖元素：
標題區：遊戲名稱置中，例如「Mini Memory Game」或「Rabbit Runner」。
遊戲簡介：一段簡短文字，說明玩法與操作方式。
開始按鈕：明顯的「Start Game」按鈕，放在視覺中心。
裝飾元素 (可選)：背景插圖或簡單動畫（例如小角色待機動作）。
版面示意：
---------------------------
| [遊戲名稱] |
| [簡短說明文字] |
| |
| [Start 按鈕] |
---------------------------
(2)遊戲頁面(Game Page)
核心功能：玩家進行遊戲的主要場景。
草圖元素：
計時器/分數欄：頂部顯示遊戲時間與當前分數，方便玩家隨時掌握狀態。
遊戲區域：
翻牌遊戲：卡片網格排列，例如 4x4 方塊。
迷宮遊戲：路徑與角色的視覺化空間。
跑酷遊戲：角色與障礙物的動態場景。
操作提示/按鈕：可包含「重新開始」、「暫停」或音效開關。
版面示意：
---------------------------
| 分數：000 時間：60秒 |
---------------------------
| |
| [遊戲互動區域] |
| (卡片/迷宮/跑酷場景) |
| |
---------------------------
| [重新開始] [返回首頁] |
---------------------------
(3)結算頁面(Result Page)
核心功能：呈現最終結果並提供下一步選擇。
草圖元素：
成績顯示：分數、剩餘時間或通關提示。
結果文案：如「恭喜過關！」或「再接再厲！」的鼓勵文字。
操作按鈕：
[再玩一次]：直接返回遊戲頁面。
[回首頁]：返回首頁重新開始流程。
版面示意：
---------------------------
| 遊戲結束！ |
| 你的分數：300 |
| |
| [再玩一次] [回首頁] |
---------------------------
繪製流程
1.草稿初版：先快速畫出各頁的框架，確認所有必要元件是否齊全。
2.標註細節：在每個區塊旁標記文字，例如「這裡放按鈕」、「計時器顯示在右上角」。
3.動線檢查：確認每個按鈕的跳轉方向與流程圖一致（例如結算頁面的「再玩一次」會直接連回遊戲頁面）。
4.檢討與修改：檢查是否有過於擁擠或不直覺的區域，必要時重新排列版面。
視覺規劃小技巧
留白空間：確保遊戲區域有足夠的空間，避免按鈕與文字過於擁擠。
層次分明：標題、分數、操作按鈕分區明顯，幫助玩家快速理解介面。
未來擴充：保留空間以便增加排行榜、角色選擇或音樂設定。
Day 8 小結
已完成首頁、遊戲頁面、結算頁面三大核心介面的草圖設計。
草圖中明確標示標題、按鈕、分數區等關鍵元件，為 HTML 結構與 CSS 佈局打好基礎。
下一步可以進入視覺風格討論(色彩、字型、動畫風格)，或直接開始撰寫基本 HTML 版型，將草圖轉換為實際程式碼。
iThome鐵人賽
看影片追技術
看更多