幾乎所有「看起來舒服」的版面，背後都離不開四個原則：對比（Contrast）、重複（Repetition）、對齊（Alignment）、親密性（Proximity）。取四個英文字首，常戲稱為 C.R.A.P 原則。

它們不是美學品味，而是可操作的規則。對前端來說，每一條都對應到具體的 CSS 手法。

flowchart TD
    R((版面<br/>四原則))
    R --> C["對比 Contrast<br/>拉大差異、建立焦點"]
    R --> RE["重複 Repetition<br/>一致性、設計 token"]
    R --> A["對齊 Alignment<br/>隱形格線、避免漂浮"]
    R --> P["親密性 Proximity<br/>用間距分組、相關靠近"]

親密性（Proximity）#

相關的東西靠近，不相關的東西拉開。 人眼會自動把「靠在一起」的元素視為一組。間距，而不是框線，是分組最有力的工具。

新手常見問題是「所有元素間距都一樣」，結果看不出哪些是一組。解法是建立一套間距尺度（spacing scale），用 CSS 變數統一管理：

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;
}

.card-title {
  margin-bottom: var(--space-1); /* 標題與內文：關係近 → 小間距 */
}
.card {
  margin-bottom: var(--space-4); /* 卡片之間：關係遠 → 大間距 */
}

用 Flex/Grid 的 gap 表達「一組元素內的間距」最直接：

.toolbar {
  display: flex;
  gap: var(--space-2); /* 群組內元素間距一致 */
}

對齊（Alignment）#

畫面上的每個元素都應該與某個東西對齊，不要隨意擺放。對齊建立了看不見的格線，讓版面有秩序感。最常見的毛病是元素「漂浮」——沒有和任何東西對齊。

CSS Grid 天生就是一套對齊系統：

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* 側欄與主內容共用同一條對齊線 */
  gap: var(--space-4);
}

慎用置中對齊。 整段文字置中（text-align: center）會讓每一行的起點都不同，閱讀時眼睛要重新找行首，反而更累。長文字用靠左對齊，置中保留給標題、按鈕等短內容。

重複（Repetition）#

讓設計元素在整個介面中重複出現，建立一致性與品牌感。同樣的標題樣式、同樣的卡片陰影、同樣的按鈕圓角，重複本身就是一種設計語言。

前端落實重複的方式就是設計 token + 元件化：把顏色、字級、圓角、陰影定義成一組變數，到處複用。

:root {
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  --color-primary: #2563eb;
}

.btn,
.card,
.input {
  border-radius: var(--radius); /* 圓角一致 */
}

重複不代表「全部一模一樣」。按鈕可以有 primary / secondary 變體，但它們共享圓角、字級、padding 的節奏——是「同一家族」的不同成員。

對比（Contrast）#

如果兩個元素不一樣，就讓它們「明顯」不一樣。 半吊子的差異（14px vs 12px、深灰 vs 稍深的灰）看起來像失誤，不像刻意。對比同時製造視覺焦點，引導視線。

h1 {
  font-size: 2.5rem;
  font-weight: 700;
} /* 與內文拉開「足夠大」的差距 */
p {
  font-size: 1rem;
  font-weight: 400;
  color: #444;
}

對比可以建立在多個維度上：

四個原則往往一起運作。 一張設計良好的卡片：標題與內文「親密」、卡片彼此「對齊」、所有卡片樣式「重複」、標題與內文有「對比」。當畫面看起來怪怪的，逐一檢查這四項，通常能找到問題。

一頁式檢查清單#