環保監控平台
Waste Monitoring Dashboard
專案背景
相較於 ESG監控平台著重於企業層級的永續指標與年度目標追蹤，本平台聚焦於工廠現場的實際排放監控，負責追蹤各製程環節在不同樓層中的廢棄物排放狀況。由於製程複雜、空間區域多樣，各樓層所產生的廢棄物種類與數值存在差異，若無即時掌握，將可能造成超標或違規風險。
專案問題
經過與實際使用者訪談與需求討論後，歸因出傳統報表平台雖可逐棟樓查看廢棄物排放數據，但在使用者訴求中總結明顯痛點，「逐棟查看」數據，像在森林裡看樹；而使用者其實需要的是能「在樹林裡看到哪裡著火」——即整體視角下快速掌握重點異常。
設計流程
Design Process
使用者研究
User Research
定義問題
Problem Definition
1. 缺乏一眼可辨的全局視角，難以掌握風險熱區使用者需逐棟比對數據，無法即時判斷是否有異常發生或風險集中，造成資訊斷裂與延誤。
2. 多重參數查詢流程繁瑣，無法有效聚焦重點指標雖熟悉重要指標，但每次查閱皆需手動篩選多層條件，導致操作耗時、效率低落。
3. 欠缺異常預警機制，需倚賴經驗判讀
系統未提供即時數據標示與視覺警示，使用者難以迅速察覺臨界值變化，存在潛在風險盲點。
設立目標
Design Goals
1. 建構全局視角，強化異常感知能力
優化資訊階層，讓使用者能在第一時間掌握風險集中區域，提升決策效率與反應速度。
2.簡化操作流程，降低查詢負擔
重構查詢機制，聚焦常用重點指標，減少重複操作並提高資訊可得性。
3.建立異常識別邏輯，提升預警能力
導入視覺提示與狀態標示機制，輔助使用者即時辨識異常，減少對經驗判讀的依賴。
設計原則
Design Principles
任務導向 Task Orientation
介面設計需對應實際工作情境，根據使用者角色與操作任務提供最佳入口與資訊組合，避免一體適用的冗長流程。
資訊優先順序 Information Hierarchy
視覺與結構需根據資訊重要性、異常程度與情境需求設計層級，幫助使用者聚焦最關鍵的指標。
清晰性 Clarity
使用紅黃綠等通用色彩意義帶入分類標籤與狀態指示，讓使用者第一眼就能辨識風險等級，無需點擊進入細節。
讓資訊一目了然，減少判斷錯誤或資訊延遲。
系統狀態可見性 Visibility of system status
為降低使用者在切換地圖或是點進第二層級時的資訊理解負擔，優化了互動設計以強化系統狀態的可見性，包括當前層級指示、轉場動畫、載入回饋等，讓使用者能清楚理解「目前在哪」、「剛做了什麼」、「接下來會看到什麼」。
設計產出
Design Deliverables
1.地圖導向的首頁總覽
為什麼會採用地圖作為互動設計，在使用者研究中，我們觀察到工廠規模如同一個大型社區，樓棟與排放口分布複雜，若僅以表格檢視，很難在第一時間判斷異常集中在哪個區域。主管與助理皆反映，他們需要一種「一眼就能看到問題點」的視覺方式，而非逐棟篩選。
2.即時視覺標示
透過 紅、黃、綠等通用色彩語言，將其運用在分類標籤與狀態指示上，讓使用者第一眼即可辨識風險等級。
例如使用者可以藉由下方中控篩選器控制是否要顯示預警或超標項目。當異常發生時，標籤會隨顏色變化即時反映狀態，幫助使用者更快識別問題，縮短判讀時間並提升反應效率。
3.逐層鑽取（Drill-down）介面
首頁以地圖作為核心視覺，預設呈現簡潔狀態，不造成額外干擾。使用者可透過下方中控篩選器選擇想關注的數據類別，並依需求逐步展開更深入的資訊。
Drill-down逐層鑽取這樣的設計方式，先從全局的高層概覽開始，再逐層點選進入細節，讓使用者能在需要時快速鎖定異常並探索背後的細節，而不會在一開始就被大量數據淹沒。
在首頁面臨超載頁面能呈現的圖表時，除了可以在圖表區域用滑鼠滾動的動作切換，但就會衍生使用者不知道有更多圖表可以查看，我在圖表邊上設計一個切換列的按鈕，可在預覽列當中去切換想看的項目，設計靈感來至於ＰＴＴ佐側預覽列表。
4.互動轉場優化
針對層級切換設計平滑轉場，讓使用者清楚感知功能切換並降低操作認知負擔。
設計成果
Outcome
1.異常排查效率提升
改版後首頁地圖可一眼辨識危險狀態，使用者僅需 2–3 次點擊即可完成異常確認，比過去使用者流程縮短 67% 的排查時間。
2. 減少重複操作
透過中控篩選器與分層資訊架構，過去需在不同系統反覆設定條件的流程被優化，重複篩選作業降低約 80%。
3.風險管理價值
新增即時預警與視覺警示機制，幫助管理單位提早發現潛在異常，降低違規與罰則風險。
畫面設計
做第一版設計時，我被很多華麗的3D設計稿吸引，但很快意識到現實的限制，專門承攬 3D 可視化的公司是靠遊戲引擎和規模化生產去實現的，而我們設計師設計稿畫的再美，而是最後也必須落到「有限技術與時間能不能執行」的現實，雖然用向量方式達到3Ｄ效果 不是問題，但會面臨擴充困難，我不可能因應一個地圖上的一個變動就馬上就又去產生對應圖示，面臨現實骨感的挫折是一種常態。
我重新思考樓棟的角色，使用者真正需要的是知道「哪一棟、哪一層、哪個排口出了狀況」，所以樓棟不只是裝飾，而是位置資訊的承載區塊。如果因技術不能在地圖上呈現他，我們還是可以在下一層細節資訊中在依據需要得知樓層的需求的這個需求用視覺化展示他。
在這些迭代中，我逐漸把重新拉回模組化的核心思想，我開始反思設計不能只想「做得漂亮」，還要考慮「怎麼做得到」和模板規模化複製得以以一應百去應用。
在這個思考之上，我把樓層想像成樂高，層層堆疊成樓棟，對應到原子設計的思路：原子 → 分子 → 樓棟，來回的使用者訪談中請對方調查到一棟樓最多六層，加上頂樓就是七個單位，我就把這七個unit做成圖片模組，工程師只需要把後端數據綁到這些圖片，就能快速複用到幾百棟樓的情境中。這樣既保留了設計的清晰與美感，也能確保在有限資源下真正落地，幫助團隊兼顧效率與功能。
與工程師合作的反思
即使團隊已經使用了付費的dev模式，我在做設計時也嘗試以「前端box思維」去構築畫面，但在實際合作中我發現，並不是每位工程師都具備深厚的前端切版經驗，有些人熟悉前端前沿的邏輯方法，也有些人原本是後端臨時調派來做前端，這讓我意識到，交付並不只是交出設計稿，而是需要持續監督並協作，確保設計能真正落地。
為了縮短設計與落地之間的距離，我會把自己的設計「黑盒子」拆解給對方，我會直接將畫面分解成盒子結構，並用更直觀的標記方式標出堆疊邏輯。除此之外，我們團隊也會透過文件紀錄哪些地方沒有符合設計稿，針對問題進行討論，並設定時程追蹤修正，這種方式讓過程更透明，也避免問題被忽略。
最終，這些努力都是為了同一個目標—讓產品能更忠實地呈現設計稿的價值。
☞ More Projects
HHTD24
設計系統
永續監控平台
廟宇App