回作品列表 Side Project

PlayBall Now

手繪貼紙風的羽球 × 排球約球揪團 App 設計案

角色
產品設計、Figma 元件系統、互動原型
期間
2026.06
範疇
行動 App、Figma、運動社群
PlayBall Now 品牌標誌與五個貼紙風 App 畫面,同時呈現羽球綠與排球藍雙主題
2
運動雙主題色系
5
核心流程畫面
76 秒
Demo 影片

背景與挑戰

我是兼職排球教練,對「臨打」有第一手體會:固定班底臨時請假、場地訂了湊不滿人,只能在群組間轉發訊息碰運氣;想打球的人則不知道哪裡缺人、程度合不合、報了名會不會被放鳥。揪團散落在對話紀錄裡,沒有報名狀態與出席紀錄,信任全靠人情。

PlayBall Now 是針對這個場景的設計案:一款羽球 × 排球的約球揪團 App,把找球友、臨打報名、行程管理、個人戰績收進同一個產品。也是我給自己的 Figma 練習題:從品牌識別、元件系統到互動原型完整走一次。

設計決策

探索頁面切換為排球藍主題的瞬間,背景仍保留羽球綠,下方標語寫著羽球 × 排球,一個 App 搞定
貼紙風介面:主題從羽球綠切換為排球藍,整個介面跟著翻轉,橘色 CTA 維持一致
Figma 元件系統:以 variants 管理雙主題色與元件狀態

成果與反思

完成手機與桌機版 Figma 設計稿,並以 HyperFrames(HTML + GSAP)製作 76 秒、1920 × 1080 的手機版 demo 影片,搭配中文字幕——影片沿用設計系統的硬邊陰影與品牌色,替這套識別做了一次跨媒材驗證。

回頭看,最大收穫是「元件系統先行」的紀律:雙主題色考驗的是 styles 與 variants 的結構是否乾淨。另一個反思是貼紙風與資訊密度的拉扯——厚描邊和硬陰影佔空間,列表畫面必須克制裝飾、讓層級讓位給內容。下一步想補完報名通知與候補遞補流程,讓設計更接近可開發的規格。