Year
2024
My Role
UI/UX 設計師
Responsibility
後台 UI 設計 / 線上表單 UX + UI
專案背景
從紙本到數位
欣南天然氣的業務涵蓋裝表、拆表、定期管線檢查及現場服務作業，過去依賴紙本流程管理，案件狀態難以追蹤，師傅的現場單據也容易遺失。本專案的目標是設計一套案件管理後台，並將師傅與用戶的紙本單據轉為線上表單。
系統組成
系統由兩個部分組成，服務不同的使用者，同時涵蓋三條邏輯各異的業務線。
後台管理系統（內部員工）
統一管理三條業務線的案件，從收件、審核、派單到結案，全程在同一個介面操作。
篩選設計：更有效率的查找資料
由於案件資料分類較為複雜，為了提升使用效率，我們將「類別」、「狀態」、「申請類型」與「期間」四個篩選維度整合至右側的 Filter Panel 中。Panel 收合時不佔用畫面空間，展開後則以垂直排列的 Select 元件呈現，方便快速操作。同時，較低層級的選項內容會依據上層條件的選擇動態更新，以提供更精準的篩選結果。
依案件階段顯示對應操作
三條業務線各有 5+ 個案件階段
每個階段下的可操作項目完全不同，部分操作一旦執行就無法回溯。系統只顯示當前階段允許的操作，最重要的下一步用特別色標示，次要操作收進下拉選單。不可逆操作加二次確認視窗，文案明確說明後果。
線上表單（師傅與用戶）
將紙本單據轉為線上表單
師傅到現場掃 QR Code 後填寫工作報告；用戶透過線上申請表提交掛拆表申請。表面上是格式轉換，實際上需要處理紙本上不存在的互動問題，為了方便師傅填寫，設計了不同題型的互動邏輯。
計量表紀錄：Tab 分頁 + 編輯後對比
用戶可能有主表1、主表2、分表，為了避免頁面過長，以 Tab 呈現各計量表區塊，增加瀏覽便利性。修改完成後同時顯示新值與原始資料，檢查時可直接對比差異。
工料費題組：勾選驅動的動態展開
師傅勾選作業項目類型後，系統動態展開對應的 Tab 題組，系統會自動帶入項目費用，金額自動加總，減少手動計算錯誤。
資料確認頁：送出前一覽所有答案
表單最後一頁會呈現所有題目與答案，點擊任一項目即可跳轉回該題修改，避免師傅送出後才發現填寫錯誤。
設計系統
針對這套後台系統建立了完整的元件庫，涵蓋表單、表格、篩選等各類元件，每個元件定義了完整的互動狀態。並以 color token 統一管理色彩，確保跨頁面的視覺一致性，也讓後續維護和擴充更有彈性。
