🌐 English version · 繁體中文（正本 / canonical）

Mobile UI 美觀判準手冊

「好看」不是品味玄學，是一致性、層級、密度、對比四件事的副產品。本手冊把它們寫成可裁決的數字與判準。

核心原則

1. 美觀是一致性的副產品：token（間距/字級/色彩/圓角）先於畫面——畫面只消費 token，不自創數值；每個「就地微調」都在借高利貸。
2. 淺色＋預設字級＋大螢幕＋短資料的綠燈不算數：深色模式、放大字級、小螢幕真機、長字串／真實資料是四條獨立驗證軸，各自能單獨讓 UI 崩壞。
3. 層級靠大小、字重、明度差、位置表達，不靠裝飾：陰影、漸層、分隔線是最後 10% 的收尾，不是層級不清的補救藥。
4. 可點的東西必須夠大、夠像可點：觸控目標 ≥44×44pt（iOS）/48×48dp（Android），互動元素與純文字要有可辨差異。
5. 動效是狀態變化的說明書：元素的出現/消失/移動要有過渡（小元件 100–200ms、畫面轉場 250–350ms）；超過 500ms 使用者體感是「卡」，不是「華麗」。

開工分流

紅線（絕對禁止）

• 禁止在 widget/view 內硬編碼色值、字級、間距數字——深色模式與改版時全面崩壞；所有數值走 theme/token。
• 禁止觸控目標小於 44×44pt / 48×48dp——點不中與誤觸是使用者體感「廉價」的最直接來源；視覺可以小，hit area 不行。
• 禁止內文對比低於 4.5:1（大字 3:1，WCAG AA）——低對比在戶外陽光下直接不可讀；「設計稿就是這個灰」不是理由。
• 禁止把淺色主題逐色反轉當深色模式——深色模式是重新指派 semantic role（surface 升明度表達 elevation、降飽和），不是 invert。
• 禁止照設計稿固定寬高硬排——長使用者名、德文標籤、130% 字級任一個就爆版；一律彈性布局＋極端資料驗。
• 禁止一個畫面出現第 3 種強調色或第 4 檔圓角——想加新值時回 token 層裁決，不准就地發明。
• 禁止只在淺色模式＋預設字級＋模擬器大螢幕驗過就宣告 UI 完成——四軸各是獨立故障域，零證據力交集。

失敗訊號（該回頭，不是重試）

references 索引

• references/design-tokens.md — 間距標尺、type scale、semantic color、深色模式、圓角/elevation 檔數、token 的機器強制。動手排版前讀。
• references/layout-hierarchy.md — 對齊、視覺層級、密度、觸控目標、動效時長、「看起來怪」五步診斷。畫面不對勁時讀。
• references/release-checklist.md — UI 出貨前必查：四軸驗證、極端資料、對比與觸控目標稽核。出貨前逐條打勾。
• references/test-scenarios.md — 判準測驗集，驗證接手模型是否照走。不給執行中的模型讀。