QVR Center | Dashboard
專案類型
Web Design
專案時間
2024.09
專案角色
UI Design
專案背景
QVR Center 是一套監控中控軟體。原有 Dashboard 主要因應特定客戶情境設計，缺乏適用於一般使用者的通用型 Overview Dashboard。此次專案的目標，是重新整理首頁資訊架構，建立一套能支援多數使用情境的通用版 Dashboard。
定義問題
無法直觀判斷斷線發生的確切時間、頻率以及修復耗時。
儲存容量缺乏直觀的量化資訊，難以預判錄影中斷風險。
大量攝影機資訊混雜，導致定位特定設備 IP 與故障細節的操作過於繁瑣。
我的任務
與UX偕同梳理討論定義層級關係，協助使用者(IT工程師)能在系統發生不可預期錯誤時快速查找問題根源。
理解規格
劃出RWD變化版本
規格限制
在設計過程中，我需要同時考量以下系統限制：
Connection Status：Server 與 Camera 各自有不同狀態定義與顯示邏輯
Hardware Status：需整合 Disk、System Fan、PSU 三類硬體狀態，且僅顯示當前狀態
Recording Status：同時涵蓋 Recording Space 與 Backup 狀態
Filter Design：需支援從 Dashboard 直接點擊異常數字進行篩選
Disconnection Record：保留既有 30 / 90 天紀錄邏輯，並可展開查看詳細清單
Online Users：整合 Web 與 Client 端的即時在線使用者資訊
解決方法
為了協助 IT 工程師在系統異常時更快找到問題根源，我重新整理了 Dashboard 的資訊優先順序，讓排查流程能從總覽逐步深入細節。
1. 依照除錯流程重組資訊層級
我將介面的檢查路徑調整為：
Server Status → Hardware / Recording →→ Disconnection Record→ Camera / Channel → Online Users
讓使用者能先掌握整體狀態，再逐步縮小問題範圍，而不是一開始就被大量細節淹沒。
2. 聚焦異常資訊，降低資訊負擔
在 Camera / Channel 區塊中，不再平均呈現所有設備，而是優先列出有問題的頻道，並以警示圖示與排序強化異常可見性。以能避免使用者在大量正常設備中搜尋異常項目。
3. 減少頁面切換成本
針對 IP 與異常細節，我使用彈窗承接補充資訊，並搭配詳情頁內的 Filter 設計，讓使用者不需要在列表頁與詳情頁之間反覆切換。
這樣能有效降低操作成本與記憶負擔，讓排查流程更連續。
RWD 畫面
Go Back
