🎮 GameLab｜遊戲活動數據平台 UI/UX & App Redesign
📱 專案類型：Mobile App Redesign / UX Research / Front-End Structure
🧩 角色：UI/UX 設計師、產品規劃協作
🟪 專案簡介
GameLab 是一款用於查詢遊戲活動、統計虛擬道具掉落率與模擬轉蛋的應用程式。本專案針對原始版本進行完整的UI/UX 重設與視覺風格優化，並從使用者流程、互動邏輯到前端元件結構進行重構，打造一款輕量、簡約且資料導向的移動端平台。
🎯 設計目標
- 優化使用者操作流程，使活動查詢與統計查閱更加直覺快速
- 建立清晰的視覺分層，提升可讀性與操作易用性
- 導入視覺化資料圖表，幫助使用者更輕鬆理解機率與掉落統計
- 加入「Q&A / 教學說明」等引導機制，降低新手使用門檻
- 建立完整 APP 頁面設計系統，支援未來模組擴充
🧭 UX 流程設計
- 需求分析：針對遊戲玩家使用情境進行角色假設與任務拆解
- 使用者流程（User Flow）：從進入 App、查詢活動、查看統計、模擬抽卡，全流程設計
- 資訊架構設計：以卡片式排版分類資訊區塊，設計模組化架構
- Wireframe 草圖：低保真線框優先聚焦互動邏輯與內容佈局
- 高保真原型製作：Figma 製作全系列高保真畫面並串接原型互動
🖌 視覺設計重點
- 配色風格：海洋紫藍 × 現代白，兼具科技感與舒適感
- 數據圖表視覺化：使用環形圖、折線圖與柱狀圖呈現掉落統計
- 模組化設計：各區塊均採獨立元件開發，可重複應用與延展
- 字體與排版：使用 Noto Sans / 微軟正黑體，保有清晰可讀性
📲 APP 關鍵畫面介紹
| 頁面名稱 | 功能說明 |
|---|---|
| 首頁總覽 | 顯示即將結束活動、搜尋功能、參與活動摘要 |
| 活動頁面 | 展示詳細活動資訊與模擬抽卡按鈕 |
| 掉落統計 | 顯示統計圖表（多圓圖、柱狀圖）與實際掉落比例 |
| Q&A 區塊 | 引導新手了解抽卡規則與平台使用方式 |
🛠 技術考量（App開發建議）
- 前端建議使用：Flutter / React Native（支援跨平台、動畫元件豐富）
- 狀態管理：推薦 Bloc 或 Redux 結合模組化元件
- 資料統計來源：可串接後台 API 統計模擬記錄與實際掉落率資料
- 數據視覺化套件：使用 [charts_flutter] 或 [Victory Native] 呈現統計圖表
✅ 成果與反饋
- 🧭 使用流程平均簡化 35%（從原本5步驟縮短為3步驟）
- 📈 使用者理解掉落率提升，統計圖表平均停留時間增加至 2.1 倍
- 💬 測試用戶反映「頁面整齊有邏輯」、「資訊清楚易懂」、「風格年輕有感」
📎 補充說明
本作品為設計實作練習專案，目前為 Prototype 階段，若需進一步串接資料與開發，建議進行 API 後端設計與跨平台框架整合。
