散熱模擬監控儀表板

異常監控的設計挑戰

散熱實驗裡的風扇、管路、散熱片等物件，各自帶著多項監控指標，設計的挑戰在於如何組織這些資訊，讓工程師一眼掌握全局。

具體的情境是：

設計一個散熱模擬實驗的儀表板，讓工程師發現異常時能快速定位問題物件、切換版本、重新實驗。

資訊架構

首先整理資料實體之間的關係，並發想資料欄位，作為後續介面設計的基礎。

• 一個實驗（Experiment）底下有多個物件（Object）
• 每個物件有多個指標（Metric）與多個版本（Version）
• 指標超標會自動產生異常警報（Alert）
• 實驗過程的執行狀況另外記錄成執行紀錄（Log）

佈局決策

資訊架構定案後，下一步是把這些實體與欄位呈現在介面上。我採用「便當佈局」的邏輯，越重要的資訊佔越大的面積，並放在最顯眼的位置。

在散熱實驗模擬的情境下，3D 熱圖自然成為焦點。這個大原則確定後，我評估了幾個方案：

方案 A：熱圖、關鍵指標、物件三個等分區塊

左側是 3D 熱圖，中間為關鍵指標區塊，右側為物件區塊，三個區塊直接對應資訊架構裡的三個實體，易於理解介面架構。

但後續設計發現物件區塊資訊量最大，在這個方案內可能產生頻繁切換操作而降低效率，故不採用。

方案 B：熱圖與關鍵指標合併，物件區塊加大（最終採用）

把關鍵指標併入左側熱圖區塊，讓出的空間用來放大物件區塊，同時容納物件列表與詳情，不用再頻繁切換操作，查看效率較高。

監控介面的關鍵資訊應同時可見，減少切換操作，讓工程師判斷更快。

異常呈現

我定義物件的狀態為三級：正常、警告、嚴重，讓工程師能判斷處理的優先順序。

物件列表會標出每個物件的異常燈號與異常數量，燈號取該物件內部所有指標中最嚴重的狀態，快速掌握目前有多少物件出狀況；列表也能依欄位排序，快速把異常物件排到頂端。

點進物件詳情，每項監控數據都用歷時圖搭配閾值線呈現，符合監控場景持續追蹤數據變化的需求，需要細看時可展開放大查看完整圖表。

處理異常

工程師發現異常後，會更換該異常物件的版本再重新實驗，若異常排除則實驗結束，沒排除就繼續回到監控。

版本更換的任務交由 Modal 處理，以列表呈現物件的各版本資訊，並標示前次實驗所使用的版本。工程師可選擇要套用的版本進行更換，更換後介面提示需要重新實驗才能取得新版本的結果，亦可回溯查看前次實驗的結果。

Figma 設計稿 (會在新分頁開啟)

從設計到開發

設計稿完成後，我延伸開發成一個真的能跑的 Vue 3 原型，作為前端練習，也用來驗證這套設計邏輯的實作可行性。

實作階段我將重心放在架構規劃與邏輯，程式碼撰寫則透過 AI 輔助加速。架構上分四層：

• 元件層：Vue 3 + Element Plus，元件不直接碰資料層
• 狀態層：使用 Pinia 狀態管理
• 服務層：模擬後端 API
• 資料層：預生成的模擬資料

透過服務層獨立的設計，未來只需抽換該層，即可串接真實後端。

查看互動原型（僅桌面版） (會在新分頁開啟)

學習與反思

做完這次的設計挑戰後，我歸納出一些在「監控場景」（不限於本次的實驗模擬監控）中，應反覆留意的設計要點，作為自我提醒：

• 降低認知負荷：在龐大資訊量下，善用架構與佈局引導視覺，避免畫面擁擠。
• 縮短決策時間：將異常判斷所需的關聯資訊整合於同一視角，減少來回切換。
• 避免誤觸風險：監控系統的誤操作成本高，需要適當的防呆機制。
• 思考自動化定位：這是更深一層的思考，當監控系統自動化程度越高，使用者面臨突發狀況的反應能力可能越弱，需在設計上取得平衡。