BACK TO WORKS
B2CLaunched

Wave Cycle App 水養力

2024

Wave Cycle — 跨界整合科技與健身的室內飛輪品牌，透過專屬 App 與智慧化課程，打造沉浸式的運動體驗。品牌核心在於將健身、社群互動與數據追蹤融合，讓運動更具動力與樂趣。

角色
UI/UX Designer
工作內容
Mobile UI Design
Wave Cycle 的網頁版與手機版預約課表並排展示

Overview

此介面設計專案，主要根據已定案的網頁版 (Web) 設計稿，遵循網頁版設計邏輯與 RWD 概念，進行 Mobile UI Design，交付頁面包含：

  • 預約課表
  • 會員訂購 / 付款資訊
  • 註冊會員、會員登入
手機版課程卡片的設計示意

預約課表 / 課程卡片 UI 設計

以使用手機的瀏覽體驗為優先考量，設想當課程卡片數量龐大時，在行動裝置的介面範圍有限情況下，仍可以簡潔清楚呈現「課程分類、易讀的卡片資訊」。

手機版 UI 間距定義的規範圖

手機版 UI 間距定義

定義手機版的間距尺寸，確保每個頁面的「區塊、標題、內文等」的套用邏輯相同，提升使用者瀏覽體驗的一致性。

Highlights

桌機版卡片是水平排版，手機版改為垂直排版的對照圖
預約課表 / 課程卡片 UI 設計
備註文字限制三行，讓卡片在手機版維持一致高度的說明圖
課程卡片的四種狀態：預約、額滿、已預約、候補
課程卡片 UI component
Wave Cycle 預約課表的網頁版與手機版完整頁面對照
預約課表 / Web & mobile

All Screen

預約課表 Timetable

  • 選擇課程日期與教練的課表頁
  • 課程詳情彈窗，可直接預約
  • 課程詳情彈窗，已額滿只能候補
  • 課程詳情彈窗，未登入時提示登入
  • 確認預約資訊與選擇車位
  • 預約成功頁
  • 候補規則說明與確認
  • 已加入候補名單頁

會員訂購 / 付款資訊 Payment

  • 訂單確認頁，顯示方案與金額
  • 選擇付款方式
  • 會員規章彈窗
  • 會員規章彈窗，捲動後
  • 付款完成頁，現金付款
  • 付款完成頁，ATM 匯款資訊
  • 付款失敗頁

註冊會員 / 會員登入 Register, Login

  • 註冊入口頁
  • 驗證手機號碼
  • 填寫個人基本資料
  • 註冊成功頁
  • 登入頁
  • 忘記密碼頁
  • 以 Email 註冊的入口頁
  • 設定密碼
  • 驗證手機號碼，含步驟指示
  • 填寫個人基本資料，含步驟指示
  • 註冊完成頁，含步驟指示

Thank you for your scrolling

Not only exercise the body, but also delight the soul!

NEXT PROJECT

MUA YIK TEA 滿溢茶