針對麥寮電廠機台監控情境進行 Dashboard UI/UX 設計規劃， 建立一致性的資訊架構、版面配置與操作模式， 提升監控資訊的辨識效率與使用操作體驗。 本案聚焦於 KPI、歷史訊息、異常資訊及 Popup 等主要使用情境， 透過共用 Dashboard 模板與 UI 元件規劃， 建立後續監控系統介面設計的基礎。
PROJECT OVERVIEW
麥寮電廠 Dashboard 模版 UI/UX 設計規劃，針對電廠資訊監控情境進行介面架構與操作流程規劃，建立一致性的 Dashboard 視覺與資訊呈現模式，提升資訊辨識效率與使用操作體驗。
本案以機台監控資訊為核心，規劃 KPI、歷史訊息、異常資訊及 Popup 等主要介面情境，建立後續監控系統可延伸使用的共用 Dashboard 模板。
透過資訊架構、版面配置及 UI 元件規劃，將不同資訊建立清楚的視覺層級，讓使用者能快速掌握重要狀態與監控資訊。
PROJECT TYPE｜ Dashboard Design・UI/UX Design
DESIGN STAGE｜ UX規劃・UI設計
PROJECT YEAR｜ 2024
EXECUTION｜ Dashboard 模板設計・資訊架構與版面配置・使用者操作行為優化・UI切版
DESIGN CHALLENGE
電廠監控資訊量大且資訊類型複雜，需要在有限的畫面空間中清楚呈現 KPI、歷史訊息與異常資訊。
不同資訊具有不同的重要程度，若缺乏明確的資訊層級，使用者需要花費較多時間查找及判讀監控狀態。
因此設計上需要兼顧資訊密度、閱讀效率與操作流程，建立可延伸且一致的 Dashboard 介面模板。
大量監控資訊需要在有限畫面中清楚呈現。
依資訊重要程度建立清楚的視覺層級。
強化重要狀態與異常訊息的辨識。
簡化操作流程，降低查找及操作成本。
建立共用 Dashboard 模板，支援後續介面延伸。
DESIGN SOLUTION
從資訊架構、版面配置與 UI 元件開始， 建立 KPI、歷史訊息及 Popup 等共用版型， 再依不同監控情境延伸介面， 讓資訊呈現與操作方式維持一致。
DASHBOARD
建立 KPI、歷史訊息及彈出視窗等共用版型，作為後續監控系統介面設計基礎。
INFORMATION
依監控資訊的重要程度重新安排資訊區塊與視覺層級，提升資訊閱讀效率。
USER FLOW
簡化操作流程，強化重要資訊、狀態與異常訊息的辨識。
UI DESIGN
建立電腦版 Dashboard 介面，支援 1920px 寬度的監控畫面呈現。
FRONT-END
完成前端介面實作，將設計規劃轉化為可實際使用的 UI 介面。
DESIGN COVERAGE
透過資訊架構、版面配置及共用模板，將電廠監控資訊建立在一致的設計架構上。
DASHBOARD SYSTEM
KPI → POPUP → HISTORY → LOGIN → TEMPLATE → DESKTOP UI
建立電廠機台監控 KPI Dashboard，集中呈現重要監控資訊。
規劃 2 組 Popup 介面，支援監控資訊及操作情境。
建立歷史訊息介面，提供監控資訊的查閱與呈現。
建立系統登入介面，延續整體 Dashboard 視覺與操作規範。
建立可延伸使用的 Dashboard 共用介面模板。
建立支援 1920px 寬度的電腦版監控介面。
依使用情境調整操作流程與資訊呈現方式，降低查找及操作成本。
完成前端介面實作，將 Dashboard 設計轉化為實際操作介面。
PROJECT SERVICES
PROJECT ROLE
亞米負責 整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計、UI 切版，透過完整的 Design Specification 與 Component Library，協助開發團隊將設計成果落實於實際系統。
