異常監控的設計挑戰
散熱實驗裡的風扇、管路、散熱片，每個物件都帶著多項監控指標。我要處理的是怎麼組織這些資訊，讓工程師一眼看完全局。
定位異常物件
多個物件同時受監控時，如何讓工程師第一眼發現異常，不必逐一掃描數值。
資訊密度
每個物件都有多個指標，如何呈現在同一畫面又不造成認知負荷過大。
物件版本切換
處理異常的方式是更換物件的版本再重新實驗，介面要讓工程師看清換了哪個版本、前後差在哪。
具體的情境是：
設計一個散熱模擬實驗的儀表板，讓工程師發現異常時能快速定位問題物件、切換版本、重新實驗。
資訊架構
首先整理資料實體之間的關係，並發想資料欄位，作為後續介面設計的基礎。
- 一個實驗（Experiment）底下有多個物件（Object）
- 每個物件有多個指標（Metric）與多個版本（Version）
- 指標超標會自動產生異常警報（Alert）
- 實驗過程的執行狀況另外記錄成執行紀錄（Log）
佈局決策
資訊架構定案後，接著把這些實體與欄位放到介面上。我用「便當佈局」的邏輯：越重要的資訊佔越大的面積，位置也越顯眼。
在散熱實驗模擬的情境下，3D 熱圖自然成為焦點。這個大原則確定後，我評估了幾個方案：
方案 A：熱圖、關鍵指標、物件三個等分區塊
左側是 3D 熱圖，中間為關鍵指標區塊，右側為物件區塊，三個區塊對應資訊架構裡的三個實體，介面架構易於理解。
但後續設計時發現物件區塊的資訊量最大，放在等分區塊裡會需要頻繁切換，因此沒有採用這個方案。
方案 B：熱圖與關鍵指標合併，物件區塊加大（最終採用）
把關鍵指標併入左側熱圖區塊，讓出的空間用來放大物件區塊，同時容納物件列表與詳情，不用來回切換就能看完。
監控介面的關鍵資訊應同時可見，減少切換操作，讓工程師判斷更快。
異常呈現
我定義物件的狀態為三級：正常、警告、嚴重，讓工程師能判斷處理的優先順序。
物件列表會標出每個物件的異常燈號與異常數量，燈號取該物件內部所有指標中最嚴重的狀態，快速掌握目前有多少物件出狀況；列表也能依欄位排序，快速把異常物件排到頂端。
點進物件詳情，每項監控數據都用歷時圖搭配閾值線呈現，工程師能直接看出數值的變化趨勢。需要細看時可以展開放大。
處理異常
工程師發現異常後，會更換該異常物件的版本再重新實驗，若異常排除則實驗結束，沒排除就繼續回到監控。
版本更換放在 Modal 裡，以列表呈現物件的各版本資訊，並標示前次實驗所使用的版本。工程師選好版本套用後，介面會提示需要重新實驗才能取得新版本的結果，前次實驗的結果也還能回頭查看。
從設計到開發
設計稿完成後，我延伸使用 Vue 實作為互動原型，作為前端練習，也驗證這套設計邏輯的實作可行性。
實作階段我將重心放在架構規劃與邏輯，程式碼撰寫則透過 AI 輔助加速。架構上分四層：
- 元件層：Vue 3 + Element Plus，元件不直接碰資料層
- 狀態層：使用 Pinia 狀態管理
- 服務層：模擬後端 API
- 資料層：預生成的模擬資料
服務層是獨立的，未來只要抽換這一層就能串接真實後端。
學習與反思
做完這次的設計挑戰後，我整理了幾個在監控場景（不限於這次的實驗模擬）要反覆留意的地方，作為自我提醒：
- 降低認知負荷：在龐大資訊量下，善用架構與佈局引導視覺，避免畫面擁擠。
- 縮短決策時間：將異常判斷所需的關聯資訊整合於同一視角，減少來回切換。
- 避免誤觸風險：監控系統的誤操作成本高，需要適當的防呆機制。
- 思考自動化定位：這是更深一層的思考，當監控系統自動化程度越高，使用者面臨突發狀況的反應能力可能越弱，需在設計上取得平衡。