為什麼留白不是浪費空間
一個常見的誤解：留白 = 沒設計好，空間沒有「利用充分」。
但看看蘋果、Dyson、無印良品的官網——大量的留白、極度的克制。這些是預算最充裕、設計團隊最強的品牌故意做出來的選擇，不是設計師偷懶。
為什麼？因為留白做到幾件事：
留白的 5 個作用
作用 1：引導視覺焦點
元素越擠，每個元素吸引的注意力越少。留白讓特定元素「站出來」，讓眼睛知道要看哪裡。
蘋果產品頁面的做法：一個產品，一個標題，大量空白。你的眼睛沒有其他地方可以去，只能看那個產品。
作用 2：增加閱讀舒適度
文字周圍的空白（行高、字間距、段落間距）直接影響可讀性。
研究顯示：適當的行高（1.5–1.8 倍）可以讓閱讀理解度提升 20%。擁擠的文字讓人讀起來費力——費力的東西人們就不讀了。
作用 3：傳遞品牌調性
留白多 → 精緻、高端、從容
留白少 → 繁忙、實惠、資訊密度高
這兩種風格都有其適合的品牌，但它們傳遞的是不同的訊息。高端服務、設計師品牌、精品——通常選擇大量留白。
作用 4：讓設計「呼吸」
沒有留白的設計讓人感覺壓迫和焦慮。留白給了頁面「空氣」，讓訪客在瀏覽時感覺輕鬆，更願意繼續往下看。
作用 5：建立元素之間的關係
「格式塔（Gestalt）鄰近原則」：距離近的元素會被大腦歸類為一組。
用留白「隔開」不同的組，讓頁面的信息結構清晰——哪些東西是一組的，哪些是分開的。
留白的 3 種類型
微留白（Micro Whitespace）
元素內部和小元素之間的空間：
- 文字的行高（line-height）
- 字母間距（letter-spacing）
- 列表項目之間的間距
- 按鈕的內距（padding）
微留白對可讀性的影響最直接，也最容易被忽略。
宏留白（Macro Whitespace）
頁面的主要布局空間：
- 頁面的左右外邊距
- 各個板塊之間的間距
- Hero 區塊的高度
宏留白決定了頁面的整體「呼吸感」。
積極留白（Active Whitespace）
刻意留下的空白，用來強調某個元素——讓它因為周圍的空曠而更顯眼。
例如：一段重要的引語，周圍有大量空白，讓它自己說話。
常見的留白錯誤
錯誤 1：為了「塞滿」而加元素
每當你想在留白處「加一些東西」，先問自己：「這個元素是為了傳達資訊，還是為了填充空間？」
如果是後者，不加是更好的選擇。
錯誤 2：手機版留白不夠
桌機設計有足夠的留白，但手機版因為想「省空間」而壓縮了段落間距和外邊距。
結果是：訪客覺得手機版擠、難讀，早早就離開了。
錯誤 3：所有區塊用同樣的間距
如果 H1 和 H2 之間的間距，跟 H2 和正文之間的間距一樣大——大腦就無法分辨它們的層級關係。
使用不同的間距來強化視覺層次：更重要的分隔用更大的間距，同一組內的元素用更小的間距。
錯誤 4：把留白加在錯誤的地方
留白應該加在元素之間，而不是在重要元素的內部（例如讓一張圖人為縮小，在圖片旁邊留出大量空間，讓圖看起來很小）。
在 Tailwind CSS 中的留白系統
Tailwind 的間距系統（1 = 4px，每個單位加 4px）讓你可以用一致的「音階」建立你的留白系統：
- 元素內距離：p-4（16px）、p-6（24px）、p-8（32px）
- 元素間距離：gap-8（32px）、gap-12（48px）
- 板塊上下間距：py-24（96px）、py-28（112px）、py-40（160px）
重要原則：建立並遵守你的間距系統，不要在不同地方任意使用不同的數值，這樣整個頁面才有視覺一致性。
測試你設計的留白是否足夠
簡單的測試方法：瞇著眼看你的設計（讓細節模糊），你還能看出頁面的主要元素和層次結構嗎？
如果瞇眼後什麼都融在一起，說明留白不夠，需要增加更多的視覺分隔。
好的留白設計，即使在模糊的狀態下，視覺重量的分配也是清楚的。