一致性：系統感從哪來
有一種介面，單看每處都還行，合起來卻透著一股散裝味。它缺的說到底就一樣東西：一套大家共同遵守的變數。這一節講 design token，變數先行，樣式跟隨。
散裝感的來路很具體：這個按鈕高 36，那個高 40；這張卡圓角 8，那張 16；這裡的玫紅深一點，那裡淺一點。每處都是當時隨手寫的，單看都說得過去，拼起來就露餡。解法是把這些「隨手寫」收編成變數：先定 token（主色、圓角、控制項高度、間距檔位），所有樣式從 token 取值。寫樣式的人少做決定，介面自然長得像一家人。
一致性聽著像潔癖，其實買的是真金白銀的東西。《About Face 4》引尼爾森的帳：統一的介面標準靠可預見性提高產出、減少錯誤，使用者在一個地方學會的規律，換個頁面還管用，學習成本和培訓費用都在降。蘋果和微軟都樂於讓第三方應用長得像自家系統，圖的就是使用者到哪都不用重新學。
| 一致，使用者賺到什麼 | 不一致，使用者賠上什麼 |
|---|---|
| 按鈕長這樣、行為就那樣，閉著眼預判 | 每個新頁面都要重新試探一遍 |
| 學一次，全站通用 | 「上一頁明明是點右上角儲存的」 |
| 介面退到背景，注意力全給內容 | 差異不斷把注意力拽向介面本身 |
同一本書也把醜話說在前頭：標準管的是外觀和感覺這層語法，管不了更深的邏輯，把標準當靈丹妙藥，和以為有了格式手冊就能寫出好小說一樣不可取。所以這一節教的是給介面立變數，不是給創造力上鎖。
這不是課堂虛構。本站課程列表頁 learn.html 的原始碼裡就躺著這樣兩行變數，原註釋一併抄給你：
你正在看的這個網站，頂欄那五個按鈕就是被這兩個變數管著的：誰也不許自帶尺寸，統一讀 36px 高、10px 圓角。哪天想全站換風格，改這兩行就夠了。
注意剛才發生了什麼：你只改了一個變數，按鈕、卡片、輸入框、頭像框、彈窗一起變。風格是變數的取值，系統感是變數的存在。取值可以爭論，變數必須先有。
token 立好之後，剩下的功夫是揪漂移。下面這頁設定乍看還算正常，其實藏著五處不一致，AI 生成的介面裡這五類漂移天天見。找到就點它。
《About Face 4》把一致性的裁判標準說成兩句話：任何元素的存在要有足夠的理由，任何差異的存在也要有足夠的理由。刪除按鈕比別的按鈕紅，理由充分：行為不同的元素，就該在視覺上明顯區分，長得一樣卻做不一樣的事才坑人。反過來，同一層級的兩張卡圓角一個 8 一個 16，誰也說不出為什麼，那就是該收編的漂移。這本書還給了個順手的槓桿思路：與其加新元素，不如讓一個元素多做幾件事，元素越少，一致性越容易守住。
這一節學的東西最後要變成一段話，放在你讓 AI 寫介面的 Prompt 最前面。下面這張變數表拿去就能用，取值按自己產品改，關鍵是讓每個決定都有出處，AI 就沒機會替你隨手寫。
這張表管的是「從今天起新寫的介面」。要是專案已經跑了一陣、樣式早就各寫各的，光給變數表不夠，得先把散落的實現收回來——那是一臺手術，步驟在 Vibe Coding · 樣式收斂：一個按鈕不要八套 CSS：怎麼盤點欠債、怎麼分批合併、哪些差異該留著。
系統感來自共同變數：先定 token（主色、圓角、控制項高度），樣式從 token 取值，散裝感自然消失。
檢查一致性最快的辦法：把兩屏截圖並排放，盯著按鈕、圓角、主色深淺，看有沒有各自漂移。
讓 AI 做介面時，先交變數表：把主色、圓角、控制項高度寫進 Prompt，再讓它動手，產出的一致性立刻不同。
裁判標準兩句話：任何元素的存在要有理由，任何差異的存在也要有理由。刪除按鈕的紅留下，說不出理由的圓角收編。
內容來源：小山學堂「審美工程」專題原創；一致性與標準的價值、「差異要有理由」等原則整理自《About Face 4：互動設計精髓》第 17 章（Alan Cooper 等）。