網頁設計模式
適用於生產級介面的 CSS 實作模式。若要了解設計原理與決策過程，請參閱 ui-design。此技能專注於程式碼實作。
另請參閱：
ui-design（字體/色彩/間距理論）、frontend-design（創意美學）
安裝
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install web-design
版面原則
使用 CSS Grid 處理二維版面，使用 Flexbox 處理一維流向。根據情境選擇合適的工具。
| 版面需求 | 工具 | 原因 |
|---|---|---|
| 頁面層級結構 | CSS Grid (grid-template-areas) | 命名區域、明確的行列控制 |
| 導覽列 | Flexbox | 單軸對齊、使用 gap 控制間距 |
| 卡片網格 | Grid (auto-fill / auto-fit) | 無需 media queries 即可響應 |
| 置中 | Grid (place-items: center) | 最短、最可靠的置中方式 |
| 側邊欄 + 內容 | Grid (grid-template-columns: 250px 1fr) | 固定側邊欄的比例大小 |
| 堆疊重疊 | Grid + grid-area: 1/1 | 無需 position: absolute 即可疊加元素 |
空間構成
跳脫可預測的版面。刻意的不對稱、重疊元素與打破網格的強調點能創造視覺趣味。使用 Grid 堆疊（grid-area: 1/1）取代 position: absolute 來實現重疊元素。為奢華/編輯美學選擇寬敞的負空間，或為資料密集的介面選擇受控的密度——選擇必須是刻意的。
字體排版
字體排版承載了設計中 90% 的性格。選擇與介面目的相符的字體。
| 情境 | 顯示字體方向 | 內文字體方向 | 範例搭配 |
|---|---|---|---|
| 編輯/雜誌 | 高對比襯線字 | 中性人文無襯線字 | Playfair Display + Source Sans 3 |
| SaaS 儀表板 | 幾何無襯線字 | 相同粗細無襯線字 | DM Sans + DM Mono（資料） |
| 創意作品集 | 表現性展示字 | 清晰可讀無襯線字 | Syne + Outfit |
| 電子商務奢華 | 細現代襯線字 | 優雅無襯線字 | Cormorant Garamond + Jost |
| 開發者工具 | 等寬顯示字 | 等寬內文字 | JetBrains Mono + IBM Plex Mono |
字級比例
使用一致的比率。1.25（大三度）比例適用於大多數介面：text-xs 0.64rem、text-sm 0.8rem、text-base 1rem、text-lg 1.25rem、text-xl 1.563rem、text-2xl 1.953rem、text-3xl 2.441rem、text-4xl 3.052rem。將內文設為 1rem（最小值 16px），行高 1.5（內文）、1.1–1.2（標題）。限制行長度為 60–75ch。
色彩
建立調色盤
每個調色盤需要五個功能角色：
| 角色 | 目的 | 範例用途 |
|---|---|---|
| 主要色 | 品牌識別、主要動作 | 按鈕、連結、啟用狀態 |
| 中性色 | 文字、邊框、背景 | 內文、卡片、分隔線 |
| 強調色 | 次要動作、重點標示 | 標籤、徽章、次要按鈕 |
| 成功/警告/錯誤 | 語意回饋 | Toast、表單驗證、狀態 |
| 表面色 | 分層背景 | 頁面上的卡片、覆蓋層上的模態框 |
對比與深度
透過表面分層而非僅依賴陰影來創造深度：
:root {
--surface-0: hsl(220 15% 8%); /* 頁面背景 */
--surface-1: hsl(220 15% 12%); /* 卡片 */
--surface-2: hsl(220 15% 16%); /* 凸起元素 */
--surface-3: hsl(220 15% 20%); /* 彈出框 / 模態框 */
}
使用 HSL 或 OKLCH 進行感知均勻的色彩操作。主導色搭配銳利強調色優於均勻分布的調色盤。務必驗證 WCAG 對比度：一般文字 4.5:1，大型文字 3:1。
間距
一致的間距創造節奏。使用 8px 基底單位（密集介面可使用 4px）：
| 代號 | 值 | 用途 |
|---|---|---|
--space-1 | 0.25rem (4px) | 行內圖示間隙、緊湊內距 |
--space-2 | 0.5rem (8px) | 輸入框內距、緊湊列表 |
--space-3 | 0.75rem (12px) | 按鈕內距、卡片內部間距 |
--space-4 | 1rem (16px) | 預設元素間距 |
--space-6 | 1.5rem (24px) | 區段內距、卡片間距 |
--space-8 | 2rem (32px) | 區段分隔 |
--space-12 | 3rem (48px) | 主要區段分隔 |
--space-16 | 4rem (64px) | 頁面層級垂直節奏 |
一致地應用間距：在 Grid/Flexbox 容器上使用 gap，而非在子元素上使用 margin。這能消除 margin 重疊錯誤並簡化響應式調整。
視覺層級
透過大小、粗細、色彩與空間的刻意對比引導視線。
層級技巧
| 技巧 | 方式 | 影響 |
|---|---|---|
| 大小對比 | 主標題為內文大小的 3–4 倍 | 立即的視覺焦點 |
| 粗細對比 | 粗體標題 + 一般內文 | 可掃讀性 |
| 色彩對比 | 主要文字 vs 淡化次要文字 | 資訊分層 |
| 空間分組 | 組內緊密間距、組間寬闊間距 | 完形鄰近性 |
| 立體感 | 陰影 / 表面分層 | 互動意涵 |
| 留白隔離 | 關鍵元素周圍的空白空間 | 透過留白強調 |
實用模式 — 卡片層級
在卡片內建立層級：輔助行（xs、大寫、淡化）→ 標題（xl、半粗體）→ 內文（base、次要色、1.6 行高）→ 動作（使用 margin-top 分隔）。使用表面色進行區隔，並透過間距代號維持一致的內距。
響應式設計
斷點策略
| 斷點 | 目標 | 方法 |
|---|---|---|
< 640px | 手機 | 單欄、堆疊導覽、觸控目標 ≥ 44px |
640–1024px | 平板 | 雙欄選項、可收合側邊欄 |
1024–1440px | 桌上型 | 完整版面、啟用懸浮互動 |
> 1440px | 寬螢幕 | 最大寬度容器（1280px），防止超寬行長度 |
流體技巧
盡可能使用流體尺寸取代固定斷點：
/* 流體字體 — 在 640px 到 1440px 視口之間縮放 */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
/* 流體間距 */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
/* 內在網格 — 無需 media queries */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }
當元件的版面應回應其容器而非視口時，使用容器查詢（@container）實現元件層級的響應性。
無障礙設計
無障礙設計不是選項。從一開始就建立它。
| 需求 | 實作 | 標準 |
|---|---|---|
| 色彩對比 | 一般文字 4.5:1，大型文字/UI 3:1 | WCAG 2.1 AA |
| 鍵盤導航 | 所有互動元素均可聚焦且可操作 | WCAG 2.1.1 |
| 焦點指示器 | 可見的 :focus-visible 環，偏移 2px 以上 | WCAG 2.4.7 |
| 語意 HTML | 使用 <button>、<nav>、<main>、<article> 等 | WCAG 1.3.1 |
| 替代文字 | 資訊型圖片提供描述性文字，裝飾型圖片使用 alt="" | WCAG 1.1.1 |
| 動態安全 | 尊重 prefers-reduced-motion | WCAG 2.3.3 |
| 觸控目標 | 互動區域最小 44×44px | WCAG 2.5.8 |
| 必要時使用 ARIA | 僅在原生語意不足時使用 aria-label、aria-live、role | WCAG 4.1.2 |
/* 穩固的焦點指示器 */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* 尊重動態偏好 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
元件設計
良好設計的元件結構
每個 UI 元件都應具有清晰的狀態、一致的間距與可預測的行為：
| 狀態 | 視覺處理 | 範例 |
|---|---|---|
| 預設 | 基礎樣式 | 按鈕靜止狀態 |
| 懸浮 | 微妙變化 — 背景、陰影或縮放 | background 變亮 5-10% |
| 啟用/按下 | 壓縮感 — 減少陰影、輕微內凹 | transform: scale(0.98) |
| 焦點 | 高可見度環，不移除外框 | :focus-visible 環 |
| 停用 | 降低不透明度、cursor: not-allowed | opacity: 0.5 |
| 載入中 | 旋轉圖示或骨架，停用互動 | 行內旋轉圖示取代標籤 |
設計代號架構
為維護性將代號結構分為三層：
/* 第1層：原始值 */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;
/* 第2層：語意別名 */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);
/* 第3層：元件專屬 */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);
這種三層方法允許透過重新對應第2層來切換主題，無需觸碰元件。
互動模式
動作與動畫
使用動作來傳達狀態變化，而非用來裝飾。專注於高影響力的時刻：
| 互動 | 持續時間 | 緩動函數 | 目的 |
|---|---|---|---|
| 按鈕懸浮 | 150ms | ease-out | 確認互動 |
| 模態框開啟 | 250ms | ease-out | 吸引注意力 |
| 模態框關閉 | 200ms | ease-in | 快速取消 |
| 頁面轉場 | 300ms | ease-in-out | 維持空間脈絡 |
| 交錯顯示 | 每項延遲 50–80ms | ease-out | 依序內容載入 |
| 微回饋 | 100ms | ease-out | 切換、核取方塊、開關 |
/* 交錯進入動畫 */
.stagger-item {
opacity: 0;
translate: 0 1rem;
animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
@keyframes reveal {
to { opacity: 1; translate: 0 0; }
}
滾動驅動效果
使用原生 animation-timeline: scroll()（置於 @supports 後）實現視差與顯示效果，無需 JavaScript。以功能偵測包裹，優雅降級。
設計品質檢查清單
在交付前，依據以下標準進行驗證：
- 字體排版：有意的字體搭配、一致的比例、可讀的行長度
- 色彩：一致的調色盤、符合 WCAG 對比、定義語意回饋色彩
- 間距：使用間距代號的一致節奏，無臨時像素值
- 層級：清晰的視覺流程——視線路徑遵循預期的閱讀順序
- 響應式：在手機、平板、桌上型環境測試；無水平溢出
- 無障礙：鍵盤可導航、焦點可見、螢幕閱讀器測試、動態安全
- 狀態：所有互動元素具備懸浮、啟用、焦點、停用與載入中狀態
- 個性：設計有明確的觀點——非通用模板美學
- 效能：圖片已最佳化、字體已子集化、動畫使用 GPU 加速（
transform、opacity） - 深色模式：如有支援，表面使用分層亮度，而非反轉色彩