refactoring-ui

Refactoring UI 設計系統

一套實用且具觀點的 UI 設計方法。在產生前端程式碼、審查設計或提供視覺改善建議時套用這些原則。

核心原則

先以灰階設計，最後再加入色彩。 這強迫你在依賴色彩作為拐杖之前，先透過間距、對比與字型建立正確的層級。

基礎： 好的 UI 不是靠天賦，而是靠系統。受限的間距、字型、色彩與陰影尺度能持續產出專業的結果。從過多的留白開始，再逐步移除；將細節（圖示、陰影、微互動）留到版面與層級確定之後再處理。

評分

目標：10/10。 計算快速診斷中符合的項目（8 個是/否檢查）來評分：score = round(satisfied / 8 × 10)。分數區間如下：10 = 全部 8 項通過（層級在模糊與灰階下可讀，每個值都在尺度上）；9 = 剛好 1 項缺失（通常是層級薄弱或留白不足）；6-8 = 2-3 項缺失；<=5 = 4 項以上缺失（任意間距、色彩取代了層級應有的功能，或對比不足）。務必說明當前分數以及需要修正的特定診斷項目，以達到 10/10。

Refactoring UI 框架

無設計師也能打造專業介面的七項原則：

1. 視覺層級

核心概念： 並非所有元素都同等重要。透過三個槓桿建立層級：尺寸、粗細與色彩。

為何有效： 當每個元素都在爭奪注意力時，沒有一個能脫穎而出；刻意弱化次要內容，能讓主要內容因對比而顯得突出。

關鍵見解：

• 組合槓桿，而非疊加——主要文字 = 大 或 粗 或 深色，而非三者並用；將「三者並用」留給唯一最重要的元素
• 標籤是次要的——表單標籤、表格標題與後設資料應支援資料，而非與之競爭；使其更小、更淡或使用全小寫
• 語意色彩 ≠ 視覺重量——對於例行性的破壞性操作，一個低調的次要按鈕通常勝過醒目的紅色

產品應用：

情境	層級技巧	範例
表單欄位	弱化標籤，強調數值	小字全大寫標籤在上，大字數值在下
儀表板	關鍵指標放大，背景資訊縮小	"$42,300" 大字，"vs 上個月" 小字
表格	弱化表頭，強調資料	表頭全小寫灰色小字，資料正常顯示

設計模式：

• 三層級層級：尺寸（大/中/小）、粗細（粗/中/正常）、色彩（深/中/淺灰）
• 按鈕層級：主要（填滿）、次要（外框或低調）、第三級（僅文字）

倫理界限： 不要使用層級技巧隱藏重要資訊，如價格、條款或取消選項。

設計超出靜態版面的元件時，請參閱 references/advanced-patterns.md——互動/懸停/焦點狀態、表單設計、空狀態、邊框圓角系統、文字截斷與響應式斷點。

2. 間距與尺寸

核心概念： 使用受限的間距尺度，而非任意數值。間距定義關係——距離越近的元素，關聯性越強。

為何有效： 任意間距（padding: 13px）會造成不一致；固定的尺度強迫做出經過深思熟慮的決定，並產生和諧的版面。寬鬆的間距感覺高級；緊湊的間距則令人感到壓迫。

關鍵見解：

• 使用尺度：4, 8, 16, 24, 32, 48, 64px
• 從過多的留白開始，再逐步移除——你幾乎永遠不會移除足夠的量
• 群組之間的間距必須大於群組內部的間距
• 限制寬度：文字 45-75 個字元（max-w-prose），表單 300-500px；幾乎不該使用全寬

產品應用：

情境	間距策略	範例
圖示 + 標籤	緊密耦合（4px）	小間距保持連結
卡片區塊	區塊分隔（24px）	標題、內容、頁尾區塊
頁面區塊	主要區塊（48-64px）	主視覺、特色、推薦

CSS 模式：

• p-1(4px) p-2(8px) p-4(16px) p-6(24px) p-8(32px) p-12(48px) p-16(64px)
• max-w-prose(65ch) max-w-md(28rem) max-w-lg(32rem) max-w-xl(36rem)
• 相關項目使用 gap-2，區塊分隔使用 gap-6

3. 字型

核心概念： 使用模組化字型尺度，根據情境限制行高，並限制最多使用兩種字體家族。

為何有效： 模組化尺度（每次增加約 1.2 倍）能創造自然的視覺節奏；標題使用緊湊行高、內文使用寬鬆行高，能在各自情境中提升可讀性。

關鍵見解：

• 尺度：12, 14, 16, 18, 20, 24, 30, 36px（約 1.2 模組化，手動微調）
• 標題：緊湊行高（1.0-1.25）；內文：寬鬆（1.5-1.75）；文字越寬，行高需越大
• 內文避免使用低於 400 的字重；使用粗體（600-700）強調，而非全部加粗
• 最多兩種字體：一種用於標題，一種用於內文（或同一家族透過字重變化）

產品應用：

情境	字型規則	範例
主視覺標題	36px，行高 1.1，粗體	大型有力陳述
內文	16px，行高 1.75，正常	舒適閱讀
說明/標籤	12-14px，行高 1.5，中灰	次要資訊

CSS 模式：

• text-xs(12px) text-sm(14px) text-base(16px) text-lg(18px) text-xl(20px)
• font-normal(400) font-medium(500) font-semibold(600) font-bold(700)
• leading-tight(1.25) leading-normal(1.5) leading-relaxed(1.75)

4. 色彩

核心概念： 建立系統化的調色盤，每種顏色 5-9 個色階，為灰色加入微妙的飽和度，並先以灰階設計。

為何有效： 隨機的顏色會衝突；預先定義的色階系統確保一致性，而 HSL 調整能創造出自然感覺的更亮與更暗變體。

關鍵見解：

• 每種顏色需要 5-9 個色階，從接近白色到接近黑色（50-900）；最深的不是純黑——使用 #111827，而非 #000000
• 純灰色看起來死氣沉沉——加入色調（冷色 UI：藍色如 #64748b；暖色 UI：黃/棕色如 #78716c）
• HSL：更亮 = 提高亮度、降低飽和度、色相趨近 60°；更暗 = 相反，色相趨近 0°/240°
• 對比度最低要求：內文 4.5:1，大字（18px+）3:1；在白色上使用 #374151（gray-700），而非更淺的灰色

產品應用：

情境	色彩策略	範例
主要調色盤	品牌色的 9 個色階（50-900）	Blue-500 按鈕，Blue-100 背景
語意色彩	成功/警告/錯誤搭配色階範圍	Green-500 成功，Red-500 錯誤
文字色彩	三層級：深、中、淺	text-gray-900，text-gray-600，text-gray-400

CSS 模式：

• text-gray-900(深) text-gray-600(中) text-gray-400(淺)
• 微妙背景使用 bg-blue-50，主要操作使用 bg-blue-500
• 微妙邊框使用 border-gray-200，較強邊框使用 border-gray-300

建立深色主題時，請參閱 references/theming-dark-mode.md——十六進位色階尺度、為何最深色使用 #111827 而非黑色（光暈效應），以及透過亮度而非陰影傳達層次。當涉及對比度、焦點環、鍵盤導航或螢幕閱讀器支援時，請參閱 references/accessibility-depth.md——完整的 WCAG 2.1 AA 檢查清單與修正方法。

5. 深度與陰影

核心概念： 使用陰影尺度來傳達層次——小陰影用於略微抬起的元素，大陰影用於浮動的元素。

為何有效： 眼睛會將陰影大小解讀為距離頁面的高度；一致的尺度讓層次易於辨識，使用者能直覺判斷哪些是可互動的、浮動的或背景的。

關鍵見解：

• 小陰影 = 略微抬起（按鈕、卡片）；大陰影 = 浮動（模態框、下拉選單）
• 好的陰影有兩部分：一個緊密的深色陰影提供清晰度，加上一個較大的柔和陰影營造氛圍
• 無陰影的深度：上方淺色邊框 + 下方深色邊框、微妙的漸層、重疊元素
• 不要過度使用——如果所有東西都浮動，就沒有深度；陰影顏色應為透明深色，絕非不透明灰色

產品應用：

情境	陰影層級	範例
按鈕	shadow-sm（微妙抬起）	略微高於表面
下拉選單	shadow-lg（浮動）	選單明顯高於內容
模態框	shadow-xl（最高）	疊加層脫離頁面

CSS 模式：

• shadow-sm：0 1px 2px rgba(0,0,0,0.05)
• shadow-md：0 4px 6px rgba(0,0,0,0.1)
• shadow-lg：0 10px 15px rgba(0,0,0,0.1)
• shadow-xl：0 20px 25px rgba(0,0,0,0.15)

為互動元素加入動態效果時，請參閱 references/animation-microinteractions.md——持續時間、緩動曲線、載入狀態，以及 prefers-reduced-motion 規則。

6. 圖片與圖示

核心概念： 將圖片視為設計元素，而非事後添加。刻意調整圖示大小，並使用疊加層讓圖片上的文字保持可讀。

為何有效： 尺寸不當的圖示看起來尷尬，未經樣式處理的圖片破壞一致性；經過刻意處理（疊加層、object-fit、圓角）能讓介面感覺精緻。

關鍵見解：

• 根據情境調整圖示大小；使用筆畫寬度與風格一致的圖示集
• 絕不拉伸或變形——使用 object-fit: cover 搭配固定長寬比，並刻意裁切
• 圖片上的文字需要疊加層（半透明漸層）
• 空狀態是機會——使用插圖加上明確的 CTA，而非僅有文字

產品應用：

情境	圖片/圖示技巧	範例
主視覺圖片	半透明漸層疊加層	任何照片上文字都可讀
頭像	一致尺寸、圓角、備用縮寫	40px 圓形，object-fit cover
空狀態	自訂插圖 + CTA	友善插圖搭配「開始使用」

CSS 模式：

• 使用 object-fit: cover 搭配固定 aspect-ratio 以保持一致顯示
• 圖示尺寸：行內 w-4 h-4，導航 w-6 h-6，功能圖示 w-8 h-8
• 疊加層：圖片上的文字使用 bg-gradient-to-t from-black/60 to-transparent

7. 版面與構圖

核心概念： 不要將所有東西置中。使用對齊、重疊與強調變化來創造吸引人的構圖。

為何有效： 一致的左邊緣讓眼睛每行有固定的返回點，因此掃描成本更低；置中的多行文字每行都會移動那個邊緣，減慢閱讀速度。

關鍵見解：

• 預設靠左對齊；僅置中短標題、主視覺、單一動作 CTA 與空狀態
• 卡片不需要包含所有東西——讓圖片延伸到邊緣或重疊容器
• 在列表與動態消息中變化視覺處理——突出某些項目，弱化其他項目
• 使用對齊在不相關的元素之間建立關係

產品應用：

情境	版面策略	範例
主視覺區塊	置中文字，寬鬆間距	短標題 + 副標題 + 單一 CTA
部落格動態	不同卡片大小以強調重點	第一篇文章大，其餘以 2 欄網格呈現
內容頁面	限制寬度，靠左對齊	max-w-prose 容器搭配靠左文字

CSS 模式：

• 預設 text-left，僅主視覺與短標題使用 text-center
• 功能網格使用 grid grid-cols-3 gap-6；頁面容器使用 max-w-4xl mx-auto
• 卡片搭配 object-fit: cover 圖片延伸至邊緣時使用 overflow-hidden

編排版面中的圖表、表格或儀表板時，請參閱 references/data-visualization.md——圖表類型選擇、圖表中的色彩使用、表格密度與儀表板構圖。

常見錯誤

錯誤	失敗原因	修正方法
「看起來很業餘」	留白不足、寬度未限制	增加留白，限制內容寬度
「感覺很平面」	沒有深度區別	微妙的陰影、區塊底部邊框
「文字難以閱讀」	行高不足、太寬、對比度低	增加行高、限制寬度、提高對比度
「所有東西看起來都一樣」	沒有視覺層級	在主要與次要之間變化尺寸/粗細/色彩
「感覺很雜亂」	所有地方間距相同	分組相關項目，群組之間加大間距
「顏色衝突」	隨機選擇，沒有系統	降低飽和度，增加灰色，限制在調色盤內
「按鈕不突出」	與周圍對比度低	增加對比度，加入陰影
任意數值	如 13、17、23 的 px 值導致不一致	堅持使用間距與字型尺度

快速診斷

稽核任何 UI 設計：

問題	若否	行動
瞇眼看（模糊測試）時層級是否可讀？	元素互相競爭	增加主要/次要對比度
在灰階下是否可行？	色彩是拐杖	強化尺寸/粗細/間距層級
是否有足夠的留白？	可能沒有——多數設計過於密集	增加間距，尤其是群組之間
標籤是否相對於數值被弱化？	標籤與資料競爭	更小、更淡或全小寫標籤
間距是否遵循一致的尺度？	任意間距 = 視覺噪音	僅使用 4/8/16/24/32/48/64
文字寬度是否受限？	長行讓讀者疲勞	套用 max-w-prose（約 65ch）
色彩是否有足夠的對比度？	無障礙失敗	檢查 WCAG；在白色上使用 gray-700+
陰影是否與層次相符？	元素浮動在錯誤層級	將陰影尺度對應到元素用途

延伸閱讀

如需包含視覺前後範例的完整系統：

• 《Refactoring UI》 by Adam Wathan & Steve Schoger（完整書籍，數百個視覺範例）
• 《設計的心理學》 by Don Norman（基礎設計思維與可用性）
• 《別讓我思考》 by Steve Krug（網頁可用性原則，補充 Refactoring UI）
• Refactoring UI——官方網站，提供資源與範例

關於作者

Adam Wathan，Tailwind CSS 的創作者，以及 Steve Schoger，其設計語言的視覺設計師，共同撰寫了《Refactoring UI》，教導開發者系統化、可重複的設計技巧。他們的方法以受限的系統——固定的間距、字型、色彩與陰影尺度——取代藝術天賦，產出專業的結果。