台電試驗管理系統

背景與挑戰

這是台電綜合研究所化檢組「試驗管理系統」的前端 prototype，涵蓋案件、試驗、結果、報告、資源、顧客服務等模組，共 250+ 個頁面。化檢組的日常是大量實驗數據與密集的紙本稽核表格，客戶的核心需求只有一句：「在一個畫面裡，盡可能多地檢視資料。」我負責整套介面的 UI/UX 設計與切版，以純手刻 HTML / CSS / SCSS 搭配 jQuery 完成，基礎元件庫為 Bootstrap 5 與 Tabler。

整個專案我只圍繞一條主軸做設計：把空間還給資料，把選擇權還給使用者。

設計決策

雙卡排版經分隔線拖曳調整後，左側案件列表加寬、右側個人案件進度縮窄 — 彈性雙卡排版：分隔線拖曳調寬，左右比例由使用者自己決定。

試驗結果頁的科學數據表，包含檢量線、添加標準品分析、回收率與試樣分析等多層表頭區塊 — 科學數據表：檢量線、品管判定與多層表頭的 HTML 還原。

另外兩個版面決策，同樣在為資料區的高度服務。

成果與反思

最終交付涵蓋上述模組、共 250+ 頁的前端 prototype，以及一份統一空狀態、彈窗與提示行為的設計規範書。受限於保密協議，本頁展示的畫面均經過去識別化處理。

這個專案讓我把「資訊密度」當成可被設計的命題：不是把字縮小塞滿，而是用彈性排版與元件化，讓使用者自己決定此刻要看多少。也更確信在 250+ 頁的尺度下，樣式系統化不是工程效率問題，而是設計一致性能否存活的前提。