返回作品列表

App 介面設計 · 2026

蓋博符號

結合視覺訓練任務與遊戲化流程的 App 介面設計。

角色

獨立完成 UI 設計、互動流程與前端原型實作

成果

建立行動優先的訓練流程，將蓋博符號辨識轉化為清楚、可重複的每日練習體驗。

工具與技術

Figma · Nuxt 4 · Vue 3 · Tailwind CSS · Supabase · Capacitor · Canvas API · GSAP

Gabor Patch App Interface Preview

專案定位

把研究型視覺任務轉成容易進入的 App 體驗

產品將蓋博符號辨識轉化為有引導的訓練循環。介面不是直接呈現原始實驗任務，而是透過 onboarding、準備、進度與完成狀態，協助使用者理解下一步行動。

角色與範圍

負責 UI 設計、任務互動與前端實作

我獨立規劃產品流程、在 Figma 設計行動端介面，並以 Nuxt 4 實作原型；透過 Vue composable 管理遊戲狀態、資料持久化、設定與音效回饋。

問題背景

視覺訓練若缺乏回饋，容易變得抽象

蓋博符號任務要求使用者辨識細微角度差異。若缺少清楚指令、進度與結果回饋，體驗容易變得偏實驗室感，也較難形成每日練習習慣。

設計目標

讓任務精準、平靜且可重複

設計目標是在維持視覺刺激精準度的同時降低互動阻力。App 使用簡潔介面、大型觸控目標、可見進度與清楚完成回饋，讓訓練過程保持專注。

關鍵設計決策

圍繞訓練循環設計，而不只設計任務畫面

  • 將 onboarding、每日目標、準備、任務網格、完成、紀錄與設定整理成連貫 App 旅程。
  • 核心蓋博符號使用原生 Canvas ImageData 操作，確保視覺刺激具備效能與可控制性。
  • 結合 Supabase 與 LocalStorage 持久化，讓進度能同時支援登入同步與裝置本機使用情境。

主要畫面展示

用專注任務網格支援細微視覺辨識

主要畫面展示 onboarding、任務專注度與訓練紀錄如何串成一個可理解、可重複的感知訓練流程。

Gabor Patch 教學畫面，說明科學原理與如何觀察蓋博符號。
教學引導：將抽象的視覺訓練任務轉成第一次使用也能理解的學習流程。
桌機版 Gabor Patch 任務網格，包含多個模糊蓋博符號與進度指示。
任務網格：以低干擾介面維持題目、進度與視覺刺激的清楚層級。
桌機版紀錄畫面，呈現連續達成天數、日曆與訓練統計。
訓練紀錄：透過 streak、日曆狀態與統計資訊，讓長期進步變得可見。

行動 App 案例

為短時間每日訓練設計的流程

App 將訓練視為可重複習慣。每日目標、準備、任務完成、連續達標、紀錄與設定形成節奏，支援反覆使用，而不是一次性體驗。

  • 簡潔的進度模型協助使用者理解本次訓練還剩多少任務。
  • 設定與音效控制讓體驗能適應不同練習環境。
手機版 Gabor Patch 任務網格，包含進度條與觸控友善的符號目標。
手機任務：將同一套感知訓練任務壓縮成拇指友善的 App 版面。
手機版紀錄畫面，包含連續達成天數、月曆與訓練統計。
手機紀錄：月曆與統計垂直排列後，訓練進度仍能快速掃讀。
手機版個人資料畫面，呈現使用者等級、經驗值與成就徽章。
個人資料：以等級、XP 與成就徽章，為重複訓練建立輕量回饋系統。

前端原型案例

為視覺刺激設計重視效能的互動

由於核心畫面仰賴準確的蓋博符號渲染，實作上將刺激生成保留在原生 Canvas 操作，並把遊戲狀態、資料持久化、設定與音效拆成 composable 管理。

  • Canvas 渲染讓符號生成維持可控制性，並避免不必要的 UI 層負擔。
  • Capacitor 架構讓同一套產品流程可延伸到 iOS 封裝與 OAuth deep link 登入情境。
桌機版休息計時畫面，包含倒數文字與多層藍色波浪動畫。
休息節奏：計時器與波浪動態讓訓練閉環以更平靜的恢復狀態收尾。
成果與驗證

驗證重點放在行動端流程是否容易理解，以及任務畫面是否保留進度、回饋、分數與持久化行為。

8 個路由
核心 App 流程畫面
60 FPS
Canvas 渲染目標
iOS 準備
Capacitor 封裝架構

反思與下一步

下一版應讓訓練進步更容易理解

目前原型已建立核心任務循環。下一步可讓紀錄、難度調整與表現趨勢更容易理解，協助使用者看見長期訓練進展。

  • 在紀錄頁補上準確率、連續達標與難度變化的清楚說明。
  • 測試不同螢幕亮度與深色模式下，視覺任務是否仍保持舒適。