返回作品列表

App 介面設計 · 2026

自主概念專案 Concept Project

蓋博符號

把研究型的視覺訓練任務，設計成第一次使用也跟得上的行動 App 流程。

角色

UI 設計、互動流程、前端原型

成果

設計從教學、任務到紀錄的完整路徑，讓使用者知道怎麼開始、怎麼完成、怎麼回顧。

工具與技術

Figma · Material Design 3 · Nuxt 4 · Vue 3 · Tailwind CSS · Canvas API

Gabor Patch App Interface Preview

設計重點

  • 任務流程：規劃從每日目標、教學、任務網格到完成頁與紀錄的完整路徑
  • 互動狀態：定義進度、正誤回饋、連續達標與成就狀態，支援可持續的重複練習
  • 設計系統：以 Material Design 3 token 建立色彩、間距與觸控規則，並支援深色模式

專案定位

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

蓋博符號辨識如果直接做成實驗畫面，第一次使用的人很難進入。我把它整理成 App 流程：先理解任務、進入準備、完成題目，再查看結果。我負責規劃流程、在 Figma 設計手機介面，並用 Nuxt 4 做出可操作原型。專案重點是訓練體驗是否清楚可用，而不是證明醫療成效。

問題與目標

保留任務精準度，同時讓流程好跟

這個任務要使用者辨識細微的角度差異，但真正的 UX 問題更基本：使用者可能不知道該看哪裡、還剩幾題，也不知道分數代表什麼。我的目標是保留任務的精準度，同時讓流程好跟——畫面不能干擾符號本身，回饋要清楚但不能太吵，紀錄也要讓使用者下次回來時看得懂。

關鍵設計決策

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

  • 在任務網格前後補上教學與結果步驟，避免使用者一進來就面對看不懂的畫面。
  • 任務畫面只保留題目、進度、符號與回饋，把符號周圍的視覺噪音降到最低。
  • 獎勵、音效與完成回饋都保持輕量，避免畫面太像遊戲而把注意力拉走。

主要畫面展示

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

這些畫面呈現 App 如何說明任務、讓訓練畫面保持專注，以及讓使用者在完成後回顧進度。

Gabor Patch 教學畫面，說明原理與如何觀察蓋博符號。
教學：在開始答題前，先說明需要觀察什麼。
桌機版任務網格答題中：進度條已過半，剛選中的符號被圈起回饋，它的條紋角度與其他符號明顯不同。
答題進行中：答對時只在該符號上出現一圈回饋，上方進度條則持續顯示這一輪還剩多少。
桌機版紀錄畫面，呈現連續達成天數、日曆與訓練統計。
訓練紀錄：用連續達成、日曆與基本統計，回顧過去的練習。

行動 App 案例

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

使用者從每日目標開始，進入任務、完成訓練，想回顧時再查看紀錄。

  • 簡潔的進度模型讓使用者知道本次訓練還剩多少。
  • 設定與音效控制讓體驗能適應不同練習環境。
手機版任務網格答題中：進度條已填過半、題目在最上方、十二個符號排成三欄，剛選中的那個被圈起。
手機任務：改成三欄讓每個符號都留在拇指好按的尺寸，答對的回饋維持同一種圈選樣式。
手機版紀錄畫面，包含連續達成天數、月曆與訓練統計。
手機紀錄：月曆與統計垂直排列，讓進度仍容易掃讀。
手機版個人資料畫面，呈現等級、經驗值與成就徽章。
個人資料：用等級、XP 與徽章，作為持續練習的小型回饋。

前端原型案例

把整段流程做成原型，而不只畫靜態畫面

我做出可操作原型，用來檢查完整流程中的進度、分數、回饋、紀錄儲存與休息計時，而不是只停留在靜態畫面。

  • Canvas 渲染讓符號生成維持可控，任務畫面也保持流暢。
  • 實作流程時，才發現靜態稿看不出來的狀態缺口。
桌機版休息計時畫面，包含倒數文字與多層藍色波浪動畫。
休息計時：在專注訓練後提供比較平靜的收尾。
成果與檢查

這個專案不宣稱臨床成效。我從產品體驗角度檢查原型：使用者能否理解任務、看懂進度、完成一次訓練，並在切換畫面後保留紀錄。

8 個畫面
串成一套訓練流程
60 FPS
任務動畫流暢度目標
行動優先
檢查文字可讀性與觸控目標

反思與下一步

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

原型已經有主要任務流程。下一步是紀錄頁，讓使用者知道分數、連續練習與難度變化代表什麼。

  • 在紀錄頁更清楚說明準確率、連續達標與難度變化。
  • 檢查不同螢幕亮度與深色模式下，任務是否仍然舒適。