UX／UI 設計入門

一句話：UX 讓產品「好用、好懂」；UI 讓介面「清楚、一致、好看」。Full Stack 開發者懂兩者，才能把功能做成真正可交付的體驗。

本課給初學者與一人公司：概念、流程、實作檢查清單與官方資源。建議在學 React／前端前先讀一遍。

1. UX 與 UI 差在哪？

• UX（User Experience）：使用者完成目標的整段旅程——研究、資訊架構、流程、可用性、回饋。
• UI（User Interface）：螢幕上看得見、摸得到的部分——版面、色彩、字級、元件、狀態、動效。
• 比喻：UX 是「路線與路標」；UI 是「路面材質與招牌設計」。兩者缺一不可。
• 開發者視角：API 正確 ≠ 體驗好；少一步確認、錯誤訊息不清，就是 UX 問題。

2. 設計流程（可落地）

1. 釐清問題：誰？要完成什麼？成功怎麼量（轉換、完成率、錯誤率）？
2. 研究輕量版：訪談 3–5 人、看競品、畫使用者旅程（happy path + 失敗路徑）。
3. 資訊架構：內容分組、導覽標籤、命名一致；先紙筆或白板。
4. 線框（Wireframe）：灰階框線，專注流程與層級，不要一開始就上色。
5. 高保真／原型：在 Figma 等工具做可點原型，做 5 人可用性測試再改。
6. 交付開發：間距、狀態（hover／disabled／error）、空狀態、載入；寫清 edge cases。

一人公司簡化版：問題一頁 → 線框 → 可點原型 → 找 2 個朋友試用 → 再寫碼。

3. UI 基礎原則

• 視覺層級：標題＞內文＞輔助；用大小、粗細、對比引導視線，不要全頁同等搶眼。
• 對齊與間距：8pt／4pt 網格；相關元素靠近（Gestalt 接近律）。
• 色彩：主色 1、輔助 1–2、中性灰階；狀態色（成功／警告／錯誤）固定語意。
• 字體：正文字級可讀（約 16px 起）；行高約 1.5；中英混排注意字重。
• 回饋：按鈕有載入／成功；錯誤說「怎麼修」；空狀態告訴下一步。
• 一致性：同功能同元件；不要每個頁自己發明按鈕樣式。

練習：把你現有頁面截圖，標出「主行動按鈕」是否一眼可見、對比是否足夠。

4. 無障礙（Accessibility）

• 文字與背景對比符合 WCAG（一般文字建議 ≥ 4.5:1）。
• 鍵盤可操作：Tab 順序合理、可見 focus、對話框可 Esc 關閉。
• 語意 HTML：button 用 button、連結用 a；表單有 label；圖片有有意義的 alt。
• 不要只靠顏色傳達狀態；動畫可減少（prefers-reduced-motion）。

5. 工具、設計系統與 AI

• Figma：業界主流；元件、Auto Layout、Prototype、Dev Mode 對開發友善。
• 設計系統：顏色／字級／間距／元件一套規格；可參考 Material、Fluent、Carbon。
• 與程式銜接：CSS 變數對齊 design tokens；React 元件對齊 Figma 元件命名。
• AI 輔助：用 AI 產生線框文案、多方案色盤、無障礙檢查清單——但最終以真實使用者測試為準。

銜接本站：HTML/CSS/JS → React → 零成本建站 上線驗證。

6. 官方與優質連結