打造 Glassmorphism 監控儀表板

專案目標

我們要為值班工程師建立一個首頁。使用者打開頁面後，需要在十秒內回答三個問題：服務現在健康嗎？哪個區域有風險？我下一步要處理什麼？

本範例的重點不是把每張卡片變成玻璃，而是學會在資訊層級確定後，安全地加入 Glassmorphism。

1. 先畫出內容結構

Dashboard
├── Page header：標題、最後更新時間、重新整理
├── Health summary：整體狀態、可用率、延遲、事件數
├── Incident list：依嚴重度排序的事件
└── Detail panel：選取事件的時間線與處理動作

先用沒有顏色的 HTML 讓閱讀順序成立：

<main>
  <header class="page-header">
    <div>
      <p class="eyebrow">Operations</p>
      <h1>服務健康度</h1>
      <p>最後更新：剛剛</p>
    </div>
    <button type="button">重新整理</button>
  </header>

  <section aria-labelledby="summary-title">
    <h2 id="summary-title">目前摘要</h2>
    <!-- KPI cards -->
  </section>
</main>

2. 建立玻璃容器

:root {
  --page-start: #eef2ff;
  --page-end: #f8fafc;
  --ink: #0f172a;
  --muted: #475569;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(135deg, var(--page-start), var(--page-end));
}

.panel {
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 16px 40px rgb(15 23 42 / 0.08);
}

@supports (backdrop-filter: blur(12px)) {
  .panel { backdrop-filter: blur(12px); }
}

注意：表格、錯誤訊息和主要文字不要使用過度透明的背景。backdrop-filter 是視覺增強，不是可讀性的前提。

3. 設計狀態

type ServiceHealth = 'healthy' | 'degraded' | 'down';

type Incident = {
  id: string;
  service: string;
  severity: 'warning' | 'critical';
  summary: string;
  updatedAt: string;
};

頁面至少要有載入、沒有事件、API 失敗和資料過期狀態。空白卡片不是 empty state，使用者需要知道目前沒有事件，或資料根本尚未載入。

4. 響應式調整

桌面版可以把摘要排成四欄；390px 手機則改成單欄，並讓事件明細先出現。不要只把桌面布局縮小：操作按鈕、表格欄位和文字換行都需要重新決定。

驗收

關閉 blur 後，文字和狀態仍然可讀。
健康、警告和中斷不只靠顏色區分。
手機可完成重新整理和查看事件。
純鍵盤能進入事件操作，focus ring 清楚可見。

延伸練習

新增一個「事件已指派」狀態，要求使用者能在不離開頁面的情況下指派處理人，並補上儲存中、成功和失敗回饋。

UI UX Pro Max

實戰範例 001：打造 Glassmorphism 監控儀表板