UI/UX 指南手冊

UX 指南手冊 是做什麼的？

出色的介面來自三個要素的結合：清晰的觀點（對象、任務、感受）、一致的系統（設計代碼 + 元件），以及數百個正確的細節（狀態、動畫、無障礙、文案）。這本手冊協調了涵蓋每一部分的各項技能。

任何 UI 任務的工作流程

依規模調整：按鈕微調只需步驟 5–7；全新應用則需要全部步驟。

1. 需求簡報 (Brief) — 確認使用者是誰、要完成什麼任務（動詞）、在什麼情境/裝置下、應該給人什麼感覺（用具體詞彙形容）。從程式碼庫和請求中推斷；只在關鍵限制（平台、現有品牌、目標受眾）無法得知時，提出一個問題。
2. 設計方向 (Direction) — 在撰寫程式碼之前決定美學和互動特質。針對此畫面類型，查看 2–4 個真實參考範例 (ui-stack-advisor/references/inspiration.md)。
3. 系統 (System) — 設計代碼和 DESIGN.md（design-system-builder；色彩透過 color-theory）。已有專案？閱讀並遵循其系統；擴展它，不要另起爐竈。
4. 技術堆疊 (Stack) — 選擇元件/動畫函式庫（ui-stack-advisor）。使用可存取的基礎元件；不要手動實作對話框、選單、下拉欄、日期選擇器、提示框。
5. 建構 (Build) — 先建立結構與層次（版面、字體、間距），再處理色彩，最後是細節。使用真實內容，不要用佔位文字。涵蓋所有狀態：載入、空白、錯誤、部分資料、成功、禁用、長內容。
6. 動畫 (Motion) — 只在有意義的地方使用（反饋、連續性、狀態轉換）；請參考動畫技能。
7. 目視驗證 (Verify by looking) — 渲染它（開發伺服器 + Playwright/Chrome MCP/模擬器），在真實尺寸（390、768、1280+；小手機、平板）下檢查，兩種佈景主題，僅鍵盤操作，200% 縮放 / 最大動態字級。批次修正發現的問題。
8. 審查 (Review) — 執行下方的出貨前檢查清單或使用審查技能。

何時使用何種技能（路由）

需求	載入技能
登陸頁面、行銷、獨特視覺設計的美學方向	frontend-design
產品 UI（儀表板、SaaS、管理後台、工具），需持久化設計記憶	interface-design
設計系統、代碼、主題、跨平台代碼、DESIGN.md	design-system-builder
挑選/衍生色彩、調色盤、深色模式色彩、對比度、色盲安全	color-theory（產生）· better-colors（審計）
字體排版：字級、換行、字型功能、截斷	better-typography
版面：分組、對齊、響應式、i18n 空間	better-layout
精緻化：圓角、陰影、圖示、光學對齊	better-ui
無障礙審查/修正 (WCAG 2.2)	better-accessibility
UX 文案、標籤、錯誤訊息、空白狀態	better-writing
上述所有面向的完整畫面排名審查	better-interface · 分支/PR 審查：interface-review
選擇元件/動畫/工具函式庫	ui-stack-advisor
動畫哲學、加減速曲線、持續時間、彈簧效果、元件感受	emil-design-eng
建立網頁動畫	animate · 多元素同時動畫：choreograph
審查 / 審計 / 修正卡頓動畫	review-animations · improve-animations · animation-performance
Apple 風格的流暢動畫、手勢、材質（網頁或原生）	apple-design
讓行動網頁有原生應用感受（PWA、觸控、100vh、安全區域）	mobile-native
React Native / Expo 設計與審查	mobile-design · 動畫：animate-expo · Expo 外掛技能：expo-native-ui、expo-ui、expo-design-system、expo-animation、expo-router
shadcn/ui 相關細節	shadcn (Vercel 外掛)
元件變體 / 狀態圖庫 / 壓力測試	variant · state-machine · break（使用者呼叫）
圖表與儀表板資料視覺化	dataviz
Figma ↔ 程式碼	Figma MCP 技能 (figma-design-to-code、figma-generate-library、…)

衝突規則：當兩個技能意見不一致時，專案現有的 DESIGN.md/系統優先，其次為使用者需求簡報，再來是較專精的技能（例如在 Expo 應用中，animate-expo 優先於 emil-design-eng）。不要在單一任務上堆疊多個美學方向技能——選一個（frontend-design 或 interface-design）。

標準速查表

無障礙 (WCAG 2.2 AA — 美國 (ADA/508)、歐盟 (European Accessibility Act，2025 年 6 月起生效) 等地的法律基準)

• 對比度：一般文字 4.5:1，大字與 UI 元件/有意義圖形 3:1
• 所有操作可透過鍵盤執行；焦點可視 (2.4.7) 且不被黏性 UI 遮蔽 (2.4.11)；邏輯順序
• 觸控目標尺寸 ≥ 24×24 CSS px (2.5.8) — 設計時以 44×44 為目標
• 拖曳操作需提供單一指標替代方案 (2.5.7)
• 每個輸入欄位都有標籤，錯誤需以文字標示，不得僅用顏色傳達資訊
• 文字可縮放至 200% / 在 320px 寬度下可重新排版而不出現水平捲軸 (1.4.10)
• 尊重減少動畫設定；無超過 3 次/秒的閃爍；自動移動內容超過 5 秒需可暫停
• 一致的說明位置 (3.2.6)，無重複輸入要求 (3.3.7)，可存取的驗證方式——無認知測試，允許貼上/密碼管理員 (3.3.8)
• 語意化 HTML 優先；ARIA 僅用於填補缺口。原生平台：iOS 使用 accessibility labels/traits，Android/Compose 使用 contentDescription/semantics，React Native 使用 accessibilityLabel/accessibilityRole

平台

• iOS (HIG)：44×44pt 觸控目標，頂層導航使用分頁列 (≤5)，含返回滑動手勢的導航堆疊，含 detents 的 sheets，SF Symbols，Dynamic Type，語意色彩，控制層使用 Liquid Glass (iOS 26+)，有意義的事件提供觸覺回饋
• Android (Material 3 / Expressive)：48×48dp 觸控目標，依寬度類別使用導航列/導航軌/抽屜，預測性返回，全螢幕含邊界距離，動態色彩，M3 字體級數
• 細節與差異：references/mobile-standards.md

效能 (Core Web Vitals，第 75 百分位)：LCP ≤ 2.5 秒 · INP ≤ 200 毫秒 · CLS ≤ 0.1。在約 100 毫秒內回應輸入；超過 400 毫秒 (Doherty 閾值) 的操作顯示進度；內容使用 skeleton，動作使用 spinner；安全的情況下採用樂觀更新。行動裝置：60/120fps，保持 JS 執行緒空閒 (Reanimated worklets)，清單虛擬化。

UX 原則：尼爾森 10 項啟發式評估 + UX 法則 (Fitts、Hick、Jakob、Miller/分塊、Tesler、Doherty、峰終定律、美感可用性、Von Restorff、格式塔)。表單、導航、搜尋、表格、新手上路、空白/錯誤/載入狀態、通知、設定、破壞性動作的模式指引：references/ux-principles-and-patterns.md。

倫理：不使用暗黑模式 (confirmshaming、取消訂閱陷阱、預先勾選同意、虛假急迫性、隱藏成本、煩人的推播)。這些作法日益被視為違法 (歐盟 DSA/DMA、FTC 點擊取消規則、GDPR 同意規則) 且會侵蝕信任。

出貨前 UI 檢查清單

• 每個畫面在 5 秒內可理解其目的；每個畫面有一個主要操作
• 瞇眼看時層次可辨 (大小/粗細/對比度，而非僅靠顏色)
• 間距、圓角、字體、色彩均來自代碼；與 DESIGN.md 一致
• 已設計載入、空白、錯誤、部分資料、離線和長內容狀態
• 表單：標籤、正確的輸入類型/自動完成、內嵌錯誤、錯誤時保留輸入、不阻擋貼上
• 鍵盤：Tab 順序、可視焦點、Escape 關閉覆蓋層、焦點返回觸發元件
• 螢幕閱讀器：名稱/角色/狀態、非同步更新的即時區域、標題結構
• 在兩種主題下測量對比度；無僅靠顏色傳達資訊
• 在 320 / 390 / 768 / 1024 / 1440 寬度下響應式；觸控目標 ≥ 44；無僅靠懸停的操作提示
• 動畫有意義、UI 動畫 ≤ 300 毫秒、可中斷、尊重減少動畫設定
• 文案：按鈕使用具體動詞、錯誤說明如何修正、用詞一致、可進行 i18n（無字串串接、預留 30–40% 文字空間、使用 RTL-safe 邏輯屬性）
• 效能：圖片已調整大小/惰性載入、字體預先載入/交換、無版面位移、長清單已虛擬化
• 已查看渲染結果（真實尺寸截圖），不僅僅是程式碼

完整規則集的網頁程式碼審計（焦點、表單、動畫、排版、內容、圖片、效能、導航、觸控、主題、i18n、水合、文案、反模式）：閱讀 references/web-interface-guidelines.md，並以 檔案:行號 - 問題 格式回報。

參考資料

• references/web-interface-guidelines.md — Vercel 的網頁介面指南 (vendored, MIT)，用於程式碼審計
• references/ux-principles-and-patterns.md — 啟發式評估、UX 法則及模式層級的最佳實務
• references/mobile-standards.md — iOS HIG + Material 3 要點及平台差異
• references/arsenal.md — 所有已安裝的 UI 技能：來源、授權、用途、更新方式；其他選項