留白與對齊：大多數醜都醜在間距
「說不上哪裡醜，反正就是醜」，這句評價八成在說間距。顏色字型一處沒動，只把間距捋順，介面就能上一個檔次。這一節給你兩條規律和一張現成的數字表。
間距只有兩條規律。親密性：相關的元素靠近，無關的離遠，讀者靠距離判斷「哪些是一夥的」。一致性：同層級用同間距，卡片和卡片之間是 16，就處處是 16。剩下的問題是「具體填幾」，答案是 8pt 網格：間距只從 8、16、24、32 裡挑。不必糾結 13 還是 15，選項少了，一致性反而自動達成。這套網格也是給 AI 下指令的好詞彙：跟它說「間距全走 8pt 網格」，比說「好看一點」有效得多。
同一張註冊表單，內容一個字不改，只動間距。拖動滑塊，從 4px 拉到 32px，感受「擠成一團」到「呼吸感」的過程。
親密性在《About Face 4》裡有一筆算得清清楚楚的畫素帳：工具欄裡同組圖示相距 4px，組和組之間留 8px，分組就成立了，一條邊框都不用畫。Cooper 順帶點名了反面做法：很多介面入目之處邊框充斥，有時一兩個元素也圍上一圈。這是笨拙的分組方式，還製造視覺噪音。同一條工具欄，兩種分法，自己切換感受。
8pt 網格聽著像行業黑話，出處其實很樸素。《About Face 4》講網格系統時給了一個概念：原子網格單位，介面裡的最小間距。精心設計的網格裡，元素和組之間的距離都取原子的整數倍。定了原子是 8，頁面上的間距就只會是 8、16、24、32。間距彼此成倍數，眼睛就能讀出秩序，這正是上一個滑塊裡呼吸感的骨架。
| 網格換來什麼 | 怎麼換來的 |
|---|---|
| 可用性 | 元素位置變得可預期，讀者不用每屏重新找一遍標題和按鈕在哪 |
| 美感 | 間距互為倍數產生秩序感，說不出好在哪，但看得出有人管過 |
| 效率 | 「這裡空多少」不再逐處爭論，間距決策從幾十次減到一次 |
這三條好處來自《About Face 4》對網格系統的總結。給 AI 下指令時同理：先說定原子（間距全走 8 的倍數），它就少了幾十次自由發揮的機會。
下面的設定頁乍看還行，細看有三處沒對齊。覺得哪裡彆扭就點哪裡，點中會亮出來並解釋。
卡片和分欄定什麼比例？《About Face 4》先給了兩個久經驗證的候選：黃金比（約 1.61）和 √2（約 1.41，A4 紙的比例）。但它更強調另一條：比例必須乾脆。差不多是個正方形，不行；幾乎是黃金矩形，也不行。要麼精確到位，要麼明顯拉開，卡在中間的比例會讓讀者隱隱覺得不穩，還說不出為什麼。
眼睛讀屏有慣性：從左上走到右下。《About Face 4》管順應這個慣性的佈局叫邏輯路徑：讓視線從標題走到內容再走到按鈕，一路不回頭。它還補了一條容易被誤會的原則：完美對稱的佈局反而缺層次，平衡的不對稱才能給螢幕一個視覺入口。下面的註冊頁，兩種鋪法。
說不上哪裡醜，先查間距。親密性管分組（相關的靠近），一致性管秩序（同層級同間距）。
分組先用間距：組內 4px、組間 8px 就能分清，一條邊框不用畫。邊框留給非圍不可的場合。
8pt 網格的底層是原子單位：定一個最小間距，處處取它的倍數，一致性自動達成。這個詞也能直接寫進給 AI 的指令裡。
比例要乾脆：1:1、√2、黃金比都行，差不多正方形最傷。差異要麼消除，要麼明顯拉開。
對齊是最便宜的高階感。交付前花兩分鐘：捋一遍左邊緣、圖示基線、按鈕間距，再順著左上到右下走一遍視線路徑。
內容來源：小山學堂「審美工程」專題原創；部分設計原則整理自《About Face 4：互動設計精髓》第 17 章（Alan Cooper 等著）。