留白與對齊：大多數醜都醜在間距
「講唔出邊度醜，總之就係醜」，這句評價八成在説間距。顏色字體一處沒動，只把間距捋順，介面就能上一個檔次。這一節給你兩條規律和一張現成的數字表。
間距只有兩條規律。親密性：相關的元素靠近，無關的離遠，讀者靠距離判斷「哪些是一夥的」。一致性：同層級用同間距，卡片和卡片之間是 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 等著）。