現代 UI 風格：從需求到第一個畫面

當我們請 AI「做一個高級的 SaaS Dashboard」時，通常只會得到幾個漂亮但互不相關的卡片。問題不在 AI 不懂 CSS，而是「高級」沒有告訴它使用者要完成什麼、哪些資訊最重要，以及哪些效果不能犧牲可讀性。

本課會建立一份小型 Visual Brief（視覺簡報），再把它轉成可以交給 AI 或前端工程師的 CSS 規則。

UI 風格究竟解決什麼問題？

風格不是效果清單。它應該幫助使用者理解介面：

同一個 Glassmorphism 效果可以用在作品集，也可以用在監控儀表板；但後者若把關鍵數值放在半透明低對比卡片裡，就是錯誤的設計決策。

第一步：寫出 Visual Brief

建立 design-brief.md：

# 客服營運儀表板

## 使用者
客服主管，在桌面螢幕上快速查看團隊狀況。

## 主要任務
1. 知道目前是否有 SLA 風險。
2. 找出等待時間最長的佇列。
3. 進入事件明細並指派處理人。

## 設計優先級
可讀性 > 任務速度 > 品牌裝飾

## 限制
- 支援 1280px 桌面與 390px 手機查詢
- 狀態不可只用顏色表達
- 圖表必須有文字摘要

這份 brief 的價值是讓 AI 在「漂亮」和「可用」衝突時有依據可選擇。

第二步：選擇風格語彙

用四個維度描述方向，不要只寫一個風格名稱：

密度：中等，重要事件置頂
形狀：8px 圓角，避免過度膠囊化
材質：卡片使用輕微半透明；表格與錯誤訊息使用不透明背景
動效：只在狀態改變和操作回饋使用 160–240ms 過渡

Glassmorphism 的安全用法

.panel {
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgb(15 23 42 / 0.08);
}

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

backdrop-filter 只是增強效果。即使瀏覽器不支援，背景、邊界與文字仍然要可讀；不要把錯誤訊息或表單輸入放在看不清楚的玻璃層。

常見錯誤

只堆效果，不做資訊層級

漸層、發光和陰影無法告訴使用者哪個 KPI 最重要。先用黑白線框確認閱讀順序，再加入色彩和材質。

把風格當成元件 API

「使用 Glassmorphism」不等於每個元件都要 blur。為 Card、Modal、Table 分別定義適用規則，才能避免視覺語言失控。

課後練習

把自己的產品寫成一份 Visual Brief，並提出兩個風格方向。每個方向都要列出一個「刻意不使用」的效果，再用一個代表頁面比較哪個方向更支援主要任務。

下一課將把這些視覺決策整理成可重用的 Design Tokens（設計 Token）。