專案定位
把研究型視覺任務轉成容易進入的 App 體驗
蓋博符號辨識如果直接做成實驗畫面，第一次使用的人會很難進入。因此我把它整理成比較像 App 的流程：先理解任務、進入準備、完成題目，再查看結果。
角色與範圍
負責 UI 設計、任務互動與前端實作
我負責規劃流程、在 Figma 設計手機介面，並用 Nuxt 4 做出可操作的原型。這個專案重點是讓訓練流程清楚、可使用，不是用來證明醫療或臨床成效。
問題背景
視覺訓練若缺乏回饋，容易變得抽象
這個任務要使用者辨識細微的角度差異，但真正的 UX 問題更基本：使用者可能不知道該看哪裡、不知道還剩幾題，也不知道最後分數代表什麼。
設計目標
讓任務精準、平靜且可重複
我的目標是保留任務的精準度，但讓整個 App 更容易跟著操作。畫面不能干擾符號本身，回饋要清楚但不能太吵，紀錄也要讓使用者下次回來時看得懂。
互動洞察
降低感知任務周圍的視覺噪音
任務的主角應該是蓋博符號本身。所以我讓指令、進度與回饋保持可見，但不要太搶眼，避免把注意力從題目上拉走。
困難與取捨
在精準渲染與 App 化互動之間取得平衡
比較難的地方是平衡「符號要準確」和「App 要好用」。我用 Canvas 處理蓋博符號，但沒有把任務畫面做得太像遊戲。獎勵、音效和完成回饋都保持輕量，讓使用者仍然專注在題目上。
關鍵設計決策
圍繞訓練循環設計，而不只設計任務畫面
- 在任務網格前後補上必要步驟，避免使用者一進來就面對看不懂的畫面。
- 任務畫面維持簡單，只保留題目、進度、符號和回饋這幾個重點。
- 結合 Supabase 與 LocalStorage 持久化，讓進度能同時支援登入同步與裝置本機使用情境。
主要畫面展示
用專注任務網格支援細微視覺辨識
這些畫面呈現 App 如何說明任務、讓訓練畫面保持專注，以及讓使用者在完成後回顧進度。
行動 App 案例
為短時間每日訓練設計的流程
這個 App 是為短時間每日練習設計的。使用者從每日目標開始，進入任務、完成訓練，想回顧時再查看紀錄。
- 簡潔的進度模型協助使用者理解本次訓練還剩多少任務。
- 設定與音效控制讓體驗能適應不同練習環境。
前端原型案例
為視覺刺激設計重視效能的互動
我做出可操作原型，不只停留在靜態畫面。這讓我可以檢查完整訓練流程中的進度、分數、回饋、紀錄儲存與休息計時。
- Canvas 渲染讓符號生成維持可控制性，並避免不必要的 UI 層負擔。
- Capacitor 架構讓同一套產品流程可延伸到 iOS 封裝與 OAuth deep link 登入情境。
這個專案不宣稱臨床成效。我主要從產品體驗角度檢查原型：使用者是否能理解任務、看懂進度、完成一次訓練，並在切換畫面後保留紀錄。
- 8 個路由
- 串成一套 App 流程
- 60 FPS 目標
- Canvas 符號渲染目標
- 行動優先
- 檢查文字可讀性與觸控操作
反思與下一步
下一版應讓訓練進步更容易理解
目前原型已經有主要任務流程。下一步會先讓紀錄頁更好懂，讓使用者知道分數、連續練習與難度變化代表什麼。
- 第一步，在紀錄頁更清楚說明準確率、連續達標與難度變化。
- 第二步，檢查不同螢幕亮度與深色模式下，任務是否仍然舒適。
- 第三步，如果之後訓練模型更進階，再讓難度變化更容易理解。