票據辨識系統的電腦端管理後台與手機端手檢工作台 Mockup

愛國獎券數位整理工具

針對大量實體獎券整理需求設計的資料管理工具。採用手機端採集與電腦端校對的跨裝置流程,將紙本票券轉化為可供檢索、分類與統計的結構化資料,並留存原始照片作為對照紀錄。

Contribution

規劃產品流程、資料欄位規則與 UI/UX 介面。透過 AI 輔助實作程式碼,反覆進行功能驗證與操作動線調校。後續以實際獎券進行建檔測試,累積整理近 7,000 筆資料。

Role
產品規劃、UX/UI 與 AI 協作實作
Scope
跨裝置採集流程/OCR 與人工校對/資料規則與管理/介面設計/功能驗證
Methods & Tools
Wireframe/使用反饋迭代/人工校對流程/Codex/Gemini API
01 / COLLECTION CONTEXT
歷史紙質愛國獎券與老舊實物照片
從實體票券整理出發的工具需求
源自愛國獎券的整理情境。由於票券年代、版型與紙質保存狀態各有不同,票券年代、版型與面額資訊不同,整理時需要逐張辨識並建立資料,也直接影響使用流程與資料欄位的規劃方式。
02 / WORKFLOW
復古課本插畫風格的獎券數位化收集、辨識與資料管理使用者流程圖
手機端採集,電腦端校對整理
手機端負責拍攝、初步辨識與資料傳送,電腦端則集中進行校對、入庫與管理,依裝置特性分攤操作步驟。 兩端透過 ZIP 交換圖檔,辨識資料則以結構化 JSON 格式留存。
03 / PRODUCT ITERATION
筆記型電腦螢幕展示 Figma 軟體中的 UI 線框圖與設計畫布 Mockup
介面流程驗證與版本迭代
初期先以 Wireframe 驗證操作路徑,後續配合實際整理反饋,持續調整版面配置與資訊層級。 歷經三次版本調整,逐步建立對應批次校對與資料管理的作業介面。
愛國獎券整理工具 UI 介面 Mockup 展示
04 / OCR & DATA
桌上型電腦與筆電展示愛國獎券資料管理後台與獎券資料管理與統計畫面
愛國獎券實體影像的 AI OCR 辨識與標註框選對照圖
由文字辨識轉換為結構化資料
OCR 用於產生初步欄位資料,辨識結果經人工校對後再送入正式列表。 為保留單張票券影像憑證,除了由 Gemini 提取期數、券號、日期與面額等欄位外,也記錄四角座標作為裁切定位依據。 資料入庫後可提供搜尋、篩選與期數統計,供後續分類查閱。
獎券 OCR 辨識手機工作台 App 介面設計 Mockup
05 / MOBILE EXPERIENCE
手機採集端的介面視覺規劃
考慮到手機端常面臨連續拍攝的操作情境,介面提供標準版與圖像風格兩種呈現方式,在維持原有拍照與辨識動線的同時,提供不同的視覺互動感受。
Figma 畫布中的吉祥物角色與票券掃描 UI 元件設計
童趣版 / 標準版