UI/UX 與
無障礙設計

UI ≠ UX

UX 七大原則

1. 能見性（Visibility）：重要功能要看得到。把「結帳」藏三層選單裡的就不要做電商。
2. 回饋（Feedback）：每個操作都要有反應。按了按鈕跳變色、loading 轉圈圈、成功彈出綠色提示。
3. 一致性（Consistency）：同樣的東西長一樣。所有「主要按鈕」都綠色，所有「危險按鈕」都紅色。
4. 容錯（Error Tolerance）：使用者一定會點錯。提供「取消」、「上一步」、「確認你要刪除嗎」。
5. 減少記憶負擔：不要叫使用者背東西。表單留下他剛輸入的、最近搜尋顯示出來。
6. 效率：常用功能要快。鍵盤快捷鍵、自動完成、最近用過的選項排前面。
7. 美觀：好看的網站使用者會原諒它的小問題。這是真的。

視覺層次：眼睛要往哪看

使用者打開網頁第一秒看到什麼？這是你決定的，不是運氣。

層次三大武器

• 大小：標題 48px、內文 16px。差距要拉開。
• 顏色與對比：重要的亮、次要的暗。
• 間距：留白比加東西重要。

F 型 vs Z 型閱讀

使用者眼球在文字多的頁面是 F 型（橫掃左到右、再掃下一行短一點），在視覺豐富的頁面是 Z 型（左上 → 右上 → 左下 → 右下）。

• logo 放左上（這是宇宙鐵則）
• CTA 按鈕（call-to-action）放右上 / 中央 / 區塊右側
• 長文章標題有 keyword，引人往下看

60-30-10 配色法則

• 60% 主色（背景、大區塊）
• 30% 副色（次要元素）
• 10% 強調色（按鈕、重點）

互動細節：讓網站「順手」

1. 載入狀態

{loading ? <Spinner /> : <ProductList />}

API 通常 200~800ms。沒有 loading 使用者會以為當機。骨架屏（skeleton）比轉圈好看。

2. 空狀態

沒資料的時候畫面不能空白。畫個圖、寫一句「還沒有訂單，去逛逛」+ 按鈕。

3. 錯誤狀態

網路爆了不要只丟「錯誤」兩字。「網路有點問題，點這裡重試」。

4. 成功提示

送出表單後綠色 toast：「已寄出！我們會在 24 小時內回覆」。

5. 微互動（micro-interaction）

• 按鈕 hover 抬高 2px + 陰影變深
• 愛心點擊時放大彈跳
• 輸入錯誤時欄位輕輕震動
• 成功時打勾動畫

表單體驗

表單是賺錢的地方。表單體驗差客戶就跑。

10 條表單聖經

1. 欄位越少越好，能不問就不問
2. label 在欄位上方（不要左邊、不要 placeholder 假裝）
3. 必填星號要清楚，選填用「(選填)」標明
4. 錯誤訊息放在欄位下方，紅色但不刺眼
5. 即時驗證但不要太早（離開欄位才驗，不是邊打邊驗）
6. 密碼有「眼睛圖示」可切換顯示
7. 長表單分步驟，顯示進度（1/3 → 2/3 → 3/3）
8. 用對 input type，手機才會跳對的鍵盤
9. autocomplete 屬性寫好（瀏覽器會幫使用者填）
10. 送出按鈕送出後立刻 disabled，避免重複送

無障礙設計（a11y）

a11y = accessibility（中間 11 個字母）。不只是「給身障者用」，視力下降的長輩、單手抱小孩的媽、手機在太陽下的所有人，都需要無障礙設計。

台灣 2017 起政府網站強制 WCAG 2.0 AA。私人網站雖然沒法律強制，但接政府案、學校案、大企業案都會檢查。

WCAG 四大原則 (POUR)

• Perceivable（可感知）：使用者要感受得到內容
• Operable（可操作）：使用者要能用鍵盤、語音操作
• Understandable（可理解）：內容易讀、操作可預期
• Robust（夠堅固）：各種輔具都能讀

實作清單

// 1. 圖片 alt
<img src="cat.jpg" alt="我的橘貓在窗邊曬太陽">

// 純裝飾用空 alt
<img src="pattern.png" alt="" role="presentation">

// 2. icon 按鈕加 aria-label
<button aria-label="關閉視窗">×</button>

// 3. 表單 label 配對
<label for="email">Email</label>
<input id="email" type="email">

// 4. 錯誤訊息給 aria 提示
<input aria-invalid="true" aria-describedby="err-1">
<p id="err-1">Email 格式錯誤</p>

// 5. 跳過導覽連結（給螢幕閱讀器用）
<a href="#main" class="skip-link">跳到主內容</a>

顏色對比

• 內文 4.5:1 以上
• 大字（18pt+）3:1 以上
• 用 WebAIM Contrast Checker 檢查

鍵盤可操作

把滑鼠拔掉，看你的網站還能用嗎？

• 所有互動元素 Tab 走得到
• focus 狀態看得見（不要 outline: none 不補一個）
• 選單可用方向鍵切換
• 視窗（modal）開啟時 focus 鎖在裡面，Esc 可關閉

檢測工具

1. Chrome DevTools → Lighthouse → Accessibility
2. axe DevTools 擴充套件
3. 用 NVDA（Windows）或 VoiceOver（Mac）真的試聽

順暢感：性能就是 UX

網站慢 = 體驗差。Google 研究：載入時間從 1 秒變 3 秒，跳出率多 32%。

三大指標（Core Web Vitals）

• LCP（最大內容繪製）≤ 2.5 秒
• INP（互動到下次繪製）≤ 200ms
• CLS（累計版面位移）≤ 0.1

優化清單

1. 圖片用 WebP / AVIF，比 JPG 小 30~50%
2. loading="lazy" 讓圖片捲到再載
3. 圖片標 width/height 防止版面跳動（CLS）
4. 字型用 font-display: swap
5. JS 用 code splitting 別一次全載
6. 用 CDN（第 11 章）
7. 用 Brotli 壓縮