想用 Sketch 練習 App 設計案例 是練功＋建立作品集的絕佳方式。你可以從一個「App 概念」開始，練習 畫面規劃、元件設計、Prototype 建立、風格統一 等重要設計技能。
🧱 練習方向：設計一個完整 App 概念案例
✅ 推薦練習案例主題（挑一個你有興趣的）
| 類型 | 案例主題 | 難度 | 說明 |
|---|---|---|---|
| 生產力工具 | 任務管理 App（Taskly） | 🟡 | 多清單、卡片、分類、打勾 UI |
| 健康應用 | 飲食追蹤 App（FitFood） | 🟡 | 輸入紀錄、圖表、打卡習慣 |
| 教育類 | 語言學習 App（LingoGo） | 🔴 | 關卡進度條、學習卡片、測驗互動 |
| 商城電商 | 小型電商 App（QuickShop） | 🟢 | 商品清單、加入購物車、付款流程 |
| 社群互動 | 照片分享 App（SnapClub） | 🔴 | 帳號、貼文、like、留言 |
📱 案例任務架構範本（以「任務管理 App」為例）
🎯 App 名稱：Taskly
一個幫助用戶管理每日代辦事項的 App。主打極簡設計，快速添加與完成任務。
📄 設計任務畫面清單（建議 5~6 個畫面）
| 畫面 | 說明 |
|---|---|
| 1. 登入頁 | Email / 密碼欄位，登入按鈕，註冊連結 |
| 2. 首頁 | 顯示任務列表、完成 checkbox、加入新任務 |
| 3. 任務詳情頁 | 任務名稱、描述、截止時間、標籤 |
| 4. 新增任務 | 表單輸入畫面：任務名稱、日期、分類 |
| 5. 設定頁 | 切換主題模式、帳號資訊、通知開關 |
| 6. 首次使用引導頁（選填） | 簡單 Onboarding 三頁引導說明 |
🧩 元件 Symbol 建議
建立以下 Symbol（Sketch 中可重複使用的元件）：
| 元件類型 | Symbol 名稱 |
|---|---|
| 按鈕 | Button/Primary、Button/Icon |
| 輸入欄位 | Input/Text、Input/Multiline |
| 任務卡片 | Card/TaskItem |
| 導覽列 | Navbar/Default |
| Checkbox | Toggle/Checkbox/Checked |
| Modal 彈窗 | Modal/NewTask |
🎨 設計風格建議（Design System）
- 字體：Inter / SF Pro（標準）
- 主色：#4A90E2（藍）、#F5F5F5（背景灰）
- 圓角：按鈕、欄位建議 radius = 8px
- 間距系統：使用 8pt / 16pt / 24pt 間距邏輯
- 陰影樣式：卡片可加輕微陰影
0 2px 8px rgba(0,0,0,0.05)
🔗 Prototype 練習
你可以設計以下互動流程：
- 登入 → 首頁
- 點擊任務卡片 → 進入詳情頁
- 點選「＋」→ 新增任務頁
- 點擊 Checkbox → 任務變為完成
- 從首頁導覽進入設定頁
在 Sketch 中加入 Prototype 熱區連線（參考前面教學）
🛠 一步步製作流程建議（Day by Day）
| 天數 | 任務 | 產出 |
|---|---|---|
| 第一天 | 設定顏色字體、風格系統 | 色彩板、Text Style、按鈕樣式 |
| 第二天 | 登入頁 + 註冊頁設計 | 表單 + CTA 按鈕 |
| 第三天 | 首頁任務列表設計 | 任務卡片、標籤、滑動行為 |
| 第四天 | 詳情頁與新增任務表單 | 輸入欄位 + 日期選擇 |
| 第五天 | 組建 UI Kit | Symbol 整理 + 統一命名 |
| 第六天 | Prototype 建立 | 點擊流程設定 + 預覽 |
| 第七天 | 匯出、整理成作品集 | PNG、PDF 或上傳至 Sketch Cloud |
📤 完成後的輸出建議
| 輸出項目 | 建議做法 |
|---|---|
| Sketch 檔案 | 整理元件名稱與畫面順序 |
| Prototype | 使用 Sketch Preview 或錄製影片 |
| UI Kit 展示圖 | 用 Symbols 整理為元件展示頁 |
| 行動流程圖 | 繪製 Flow Map（使用箭頭連線） |
| 專案說明 PDF | 整理使用者故事、流程與設計理由 |