Refactoring UI
視覺設計不是天賦。它是一小套只需決定一次的系統決策，加上少數用來建立層次的技巧。這個技能就是那些系統和那些技巧。
導致業餘 UI 的最大原因就是隨意選值 — 這裡 17px，那裡 #3B82F6，懸停狀態用 lighten(5%)。永遠從一個比例開始設計。
系統 — 使用這些，不要重新推導它們
從這些列表中挑選。永遠不要發明一個不在列表裡的值。
間距和尺寸
以 16px 為基礎，由其因數和倍數建構而成：
4 8 12 16 24 32 48 64 96 128 192 256 384 512 640 768
小端緊湊，大端擴張。相鄰兩個值的差距不得小於約 25% — 這樣才能使選擇一目了然。線性的「4 的倍數」比例會失敗：它無法幫助你在 120px 和 124px 之間做出決定。
將它用於外邊距、內邊距、寬度、高度、圖示大小、邊框寬度 — 所有空間相關的屬性。也要固定一組少數的不透明度值（例如 .05 .1 .2 .4 .6 .8），用於禁用狀態、疊加層和懸停色調，而不是每次都靠目測滑桿。邏輯與其他比例相同：決定一次，到處重用。
字型比例
12 14 16 18 20 24 30 36 48 60 72
不是根據比例（4:5、2:3、黃金比例）構建的模數比例。那些會產生小數像素值，在不同瀏覽器中四捨五入不一致，且對於介面密度來說過於稀疏 — 改用手動挑選的值，依照它們給人的感覺來選擇，效果更好。
單位：僅限 px 或 rem。永遠不要用 em。 em 相對於當前字型大小，因此一個在 1.25em 父元素內的 .875em 會計算出 17.5px — 這不在你的比例中。這個比例就悄悄地不復存在了。
字型粗細
兩種粗細就夠了：
- 400 或 500 — 內文和大多數 UI 文字
- 600 或 700 — 任何需要強調的內容
在 UI 中，不要使用低於 400 的粗細。要降低強調程度，請使用較淺的顏色或較小的尺寸 — 絕對不要使用更輕的粗細。
顏色
你需要遠比五色調色盤產生器能提供的更多顏色。
- 灰色：8–10 種色調。 UI 幾乎全是灰色 — 文字、背景、面板、邊框、表單控制項。三四種色調總是不夠。從一個非常深的灰色開始，而不是真正的黑色（真正的黑色看起來不自然）。
- 主色：5–10 種色調，一種或可能兩種主色。
- 強調色：每種 5–10 種色調 — 破壞性紅色、警告黃色、正面綠色，再加上產品需要用來區分的任何其他顏色（圖表系列、日曆事件、標籤）。對於複雜的 UI 來說，十種顏色 × 5–10 種色調是正常的。
將它們命名為 100（最淺）→ 900（最深），基礎色為 500。
按此順序建構比例： 先挑選 500（對於主色/強調色，它應該是可以用作按鈕背景的色調）。然後找出邊界 — 900 通常是你的文字顏色，100 是背景色調；一個警示元件會同時用到這兩者，所以設計一個並從中讀出這兩個值。然後填入 700 和 300，作為其相鄰值之間的完美折衷，然後以同樣方式填入 800 600 400 200。
使用 HSL 而非十六進位來撰寫顏色。 hsl(220, 95%, 34%) 和 hsl(220, 65%, 61%) 在視覺上有關聯；而 #03369E 和 #507DD7 則不然。
永遠不要在執行時期產生色調，使用 lighten() / darken()。那樣做只會讓你得到 35 種稍微不同的藍色。
陰影 — 五個層級
0 1px 3px hsla(0,0%,0%,.2) /* 幾乎沒有浮起 — 按鈕 */
0 4px 6px hsla(0,0%,0%,.2) /* 下拉選單 */
0 5px 15px hsla(0,0%,0%,.2)
0 10px 24px hsla(0,0%,0%,.2)
0 15px 35px hsla(0,0%,0%,.2) /* 模態框 */
選擇的方法是問自己「這個東西在 Z 軸上位於何處？」，而不是「哪個陰影看起來不錯？」。離使用者越近 = 越多注意力。在 :active 時縮小按鈕的陰影會讓它感覺被按下；當列表項被拿起進行拖曳重新排序時，增加其陰影則反其道而行 — 它被解讀為「現在在其兄弟元素之上」，同時也充當了拖曳操作的提示。
這五個是預設值，在大多數情況下都沒問題。references/techniques.md 提供了同一個比例的雙層精煉版本 — 平行但非完全相同的值（其頂層更重）。當陰影在設計中很突出時使用該版本；當它們不突出時使用這些。不要在一個專案中混用兩者。
行高與行長
行高與字型大小成反比，與行寬成正比：
- 小文字 / 寬欄 →
1.5到2 - 大標題 →
1就可以了
行長：45–75 個字符，即 max-width: 20em–35em。這適用於段落，即使其周圍的容器更寬 — 在一個內容區域中混合寬度會看起來更精緻，而不是更糟。
（這裡使用 em 是正確的 — 測量值應與其包裹的文字一起縮放。「永遠不要用 em」的規則範圍僅限於字型比例，在該比例中 em 會因巢狀而複合。不要「修正」這個。）
邊框半徑
選擇一個並保持一致。小半徑 = 中性。大半徑 = 俏皮。無半徑 = 嚴肅/正式。在同一個介面中混合方形和圓角看起來總是更糟。
流程
1. 從功能開始，而不是佈局。 不要設計「應用程式」— 在你知道產品裡有什麼之前，你無法在頂部導航和側邊欄之間做出決定。設計一個真實的功能部分（搜尋表單、訊息撰寫器），然後讓整體結構自然浮現。
2. 細節稍後再處理。 早期忽略字型、陰影和圖示。先以灰階工作 — 這迫使層次來自間距、對比度和尺寸，而非顏色。一旦佈局可行再加入顏色。
3. 不要過度投資於低保真度。 草圖、線框圖和模型都是可拋棄的 — 沒有人能使用應用程式的靜態圖片。它們的存在是為了探索想法；一旦做出決定就捨棄它們，然後去建構真實的東西。
4. 設計最小可用的版本，然後建構它。 以設計→程式碼的短週期工作。不要暗示你還沒準備好要建構的功能 — 一個帶有你還無法上線的附件區的評論框會阻塞整個功能。錦上添花的功能稍後再設計。
5. 透過排除法來選擇。 當從比例中挑選一個值時：猜測你認為對的那個，然後將它與兩邊相鄰的值進行比較。其中有兩個會明顯錯誤。如果外側的選項勝出，則以該值作為新的中間值重新進行比較。
6. 從過多的空白開始，然後再移除它。 增加空間直到某物看起來不錯為止，會給你最小值。從寬裕開始然後修剪，會給你正確的量。密集的 UI（儀表板）是合理的 — 但這是一個刻意的決定，而不是預設值。
7. 縮小畫布。 在 1400px 的畫板上設計一個小組件往往會蔓延，因為有空間可以填滿。從 ~400px 開始，先在真正有約束條件的地方設計行動版佈局 — 然後再將它放到大螢幕上，只放鬆那些真正感到擁擠的地方。你會發現需要改變的部分比你預期的少。
層次 — 效果最顯著的技巧
螢幕上的所有東西都位於一個金字塔中：主要、次要、第三級。當所有東西都在競爭時，UI 看起來就像雜訊。這就是讓設計看起來「經過設計」的原因 — 而不是風格。
尺寸不是一切。 僅依賴字型大小會讓你得到太大的主要內容和太小的次要內容。改用粗細和顏色來傳達強調，並保持尺寸合理。
最多三種文字顏色：
- 深色 — 主要內容
- 灰色 — 次要內容
- 更淺的灰色 — 第三級內容（腳註、版權資訊）
這三種顏色都可以承載實際的正文大小文字，因此都需要 4.5:1 的對比度。「更淺的灰色」指的是仍然能滿足此對比度的最淺色調 — 大致上是 9 階漸層的中間，而不是淺色端。淺色調僅用於禁用狀態和大文字。
透過降低強調來強調。 當重要的元素無法脫穎而出，而且沒有更多東西可以添加到它時，改為淡化與它競爭的元素。淡化非活躍的導航項目；降低側邊欄的背景顏色，使主要內容向前突出。
操作按鈕： 根據層次而非語義來設定樣式。
- 主要 → 實心，高對比度。通常每頁只有一個。
- 次要 → 輪廓線，或低對比度背景。
- 第三級 → 樣式像連結一樣。
破壞性 ≠ 大紅色按鈕。如果「刪除」不是頁面上的主要操作，就給它第三級處理 — 然後在確認對話框內部讓它變成一個大紅色的主要按鈕，在那裡它確實是主要操作。
標籤是最後的手段。 標籤：值 給每一段資料相同的重要性。大多數資料可以透過其格式（$19.99、電子郵件地址）或上下文來自動識別。當確實需要標籤時，將其合併到值中（「庫存剩餘 12 件」，而不是「庫存：12」），或者將其作為明顯的次要內容添加。例外情況：在規格表風格的頁面上，使用者會搜尋標籤，此時應改為強調標籤。
平衡粗細與對比度。 實心圖示在視覺上很重，會蓋過旁邊的文字 — 降低它們的顏色飽和度來補償。反過來也適用：當 1px 的邊框在柔和顏色中太微妙，但一旦加深又顯得太刺眼時，保持柔和的顏色並改用 2px。增加重量來修復低對比度；降低對比度來修復過多的重量。
視覺層次 ≠ 文件層次。 語義標記和視覺重量是兩個獨立的決定。章節標題通常是標籤，而不是標題 — 一個 16px 的 h1 是可以的，有時標題應該完全在視覺上隱藏，因為內容本身已經說明了一切。
硬性規則
偏離這些規則會產生特定、可識別的失敗。
- 永遠不要在彩色背景上使用灰色文字。 灰底白字有效是因為它降低了對比度；彩色背景上的灰色看起來只是髒髒的。降低不透明度的白色看起來褪色且像被禁用，並且會讓圖案透過字元顯示出來。應手動挑選一種帶有背景色調的顏色，調整飽和度和明度。
- 永遠不要將
em用於字型比例。 使用px或rem。 - 永遠不要在執行時期產生色調。 事先定義它們。
- 永遠不要對不該縮放的東西使用百分比寬度。 側邊欄使用固定寬度；主要區域進行彈性伸縮。元素應設定
max-width，並且僅在螢幕實際較小時縮小 — 一個登入卡片不應該在中型螢幕上比在大螢幕上更寬。 - 永遠不要在斷點處按比例縮放東西。 大的元素必須比小的元素縮小得更快。在 14px 的行動版內文上，一個 2.5em 的標題會計算出 35px — 太大；它在行動版上應該要 20–24px。同樣地，按鈕的內邊距應隨著按鈕縮小而按比例變緊，而不是與其字型大小一起縮放。
- 始終保持群組外部的空間大於群組內部的空間。 這可以修復「哪個標籤屬於哪個欄位」、擁擠的項目符號列表，以及看起來連接到錯誤段落的標題。模糊的間距是一個功能性的錯誤，而不僅僅是美觀問題。
- 永遠不要只使用顏色作為唯一信號。 添加圖示、形狀或文字提示。對於圖表，透過對比度（一種顏色的淺→深色調）來區分系列，而不是透過色相 — 色盲使用者可以可靠地讀取明度，但色相則不然。
- 最低對比度要求： 普通文字為 4.5:1。3:1 的寬限僅適用於大文字，WCAG 將其定義為 24px 常規字重或 18.66px 粗體 — 而不是 18px。除非文字真的那麼大，否則預設使用 4.5:1。當白字在彩色背景上失敗時，反過來做：在淺色色調上使用深色文字（參見
references/systems.md）。另外，3:1 也適用於非文字（WCAG 1.4.11）：如果邊框是識別控制項的唯一方式 — 例如輸入框的輪廓、核取方塊的邊緣 — 則它與其背景之間需要 3:1 的對比度。僅用於分隔內容的細線則不需要。這是兩個不同的標記，而不是同一個。 - 永遠不要將圖示縮放至遠離其預期尺寸。 一個 16–24px 的圖示在 48px 時看起來笨重且缺乏細節。應將其改為放置在一個彩色圓圈內。
參考資料
assets/tokens.css — 一個完整、經過對比度驗證的起始集，包含上述所有內容作為 CSS 自訂屬性：間距、字型、粗細、邊框寬度、固定不透明度比例、9 階冷灰色漸層、9 階主色、三個強調色三元組、五個層級、一個語義角色層（--surface、--text-primary、--action…）和一個深色模式區塊，該區塊僅覆蓋這些角色。將其複製進來，並調整色相，而不是從這些文字中重新推導比例。在元件中參考角色，而不是原始漸層 — 這是讓深色模式運作的關鍵。每個文字/表面組合在兩種模式下都已驗證 ≥4.5:1，每個功能性邊框 ≥3:1；故意低於閾值的色調（禁用狀態、裝飾性分隔線、僅限大文字的色階）根據標準被豁免，並在行內註解中標明。
當工作需要時載入這些檔案：
references/systems.md— 從零開始建立調色盤：選擇基礎色、在淺色和深色端保持飽和度、色相偏移、暖/冷灰色，以及達到對比度比率而不使用難看顏色的兩種逃脫方法。references/diagnose.md— 症狀 → 修復對照表。每當任務是改進現有的 UI 而不是建構新的 UI 時，首先載入這個。references/techniques.md— 深度和光線模擬、雙層陰影、基準線對齊、字距調整、跳出預設元件形狀，以及處理使用者上傳的圖片。