ui-ux-pro-max

UI/UX Pro Max

UI/UX 設計與實作的專業技能。

核心：「全部好好做」正是 AI 生成感的來源。「捨棄什麼」才是設計。

對應領域

• 登陸頁面設計
• 儀表板 UI
• SaaS 產品
• 行動應用程式（響應式）

---

行動原則（五項鐵則）

1. 動手前先質疑

• 對每個元素問「真的需要嗎？」
• 答案模糊時，先不加入再製作

2. 決定一個主角

• 每個區塊只決定一個「最想呈現的東西」
• 決定前不要寫程式碼

3. 不要並列 70 分

• 所有元素存在感相同 = 失敗
• 一個做到 120 分，其他做到 60 分

4. 與其說「可以」，不如說「不要做」

• 提議刪除而非新增
• 猶豫時就刪掉

5. 先批評再製作

• 先列出目前問題至少三項，再提出改善方案
• 禁止說「感覺不錯」

---

避免 AI 生成感

不該做的事

• 所有元素存在感相同（均勻的留白、安全的顏色）
• 缺乏決斷（A 或 B 都可以，隨你喜歡）
• 過度裝飾（無意義的漸層、動畫）

禁止說「感覺不錯」

• 完成後也要附上「如果還有改善空間的話～」
• 被要求決定時就要決定（附上理由推薦一個）

---

高級設計公式

Premium = (圖片品質 × 尺寸) + (留白) - (裝飾)

三大支柱：

1. 大圖片 - 圖片佔卡片面積 70-85%
2. 大膽留白 - 區塊間距 112px 以上
3. 節制 - 所有效果都需有理由

參考品牌： Spitfire Audio, Native Instruments, iZotope

---

圖片指南

情境	圖片尺寸	長寬比
產品卡片	卡片面積的 70-85%	16:9 或 4:3
主視覺區	滿版寬度	可變
圖庫網格	高度統一、寬度可變	混合

圖片處理：

• 圖片是內容的主角
• 文字最少化（名稱 + 一行說明）
• 不要在圖片上疊加功能列表
• 使用高品質螢幕截圖/渲染圖

---

留白 Token

Token	值	用途
--space-section	112px	區塊之間
--space-group	64px	相關內容之間
--space-element	24px	元素之間

區塊內距：

/* 高級區塊 */
padding-top: 112px;    /* py-28 */
padding-bottom: 112px;

/* 緊湊區塊 */
padding-top: 64px;     /* py-16 */
padding-bottom: 64px;

Tailwind 對應：

// 高級區塊
<section className="py-28">...</section>

// 緊湊區塊
<section className="py-16">...</section>

---

網格系統

欄數	用途	間距
4 欄	產品展示	24px (gap-6)
3 欄	功能卡片、價格	32px (gap-8)
2 欄	主視覺、比較	48px (gap-12)

---

視覺層級檢查清單

開始工作前

• [ ] 是否已具體說出「這個區塊的主角是什麼」
• [ ] 是否考慮過「有沒有可以刪除的元素」
• [ ] 能否解釋「為什麼選這個顏色」

工作進行中

• [ ] 所有元素的存在感是否相同
• [ ] 視線動線是否符合預期
• [ ] 背景是否干擾內容

工作完成前

• [ ] 在手機上看三秒內能否知道「要做什麼」
• [ ] 是否有「AI 生成感」的原因
• [ ] 是否有「這裡其實可以刪掉」的元素

---

重要：無障礙優先

本節為最高優先事項。設計美感之前先考慮無障礙。

WCAG 2.1 對比度要求

文字大小	最小對比度
一般文字 (< 18px)	4.5:1
大字體 (≥ 18px bold / ≥ 24px)	3:1
UI 元件、圖示	3:1

必須：使用專案的 globals.css

不要直接使用 Tailwind 預設顏色。 優先使用專案 globals.css 中定義的 token。

// NG：直接使用 Tailwind 預設
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>

// OK：使用專案 token
<p className="text-muted">...</p>
<p className="text-subtle">...</p>

實作前務必檢查 app/globals.css，了解已定義的 token。

徽章、標籤的對比度

同色系組合很危險：

// NG：同色系對比度不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開發中</span>

// OK：確保足夠對比度
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開發中</span>

停用狀態文字

// NG：太淡導致對比不足
<button className="text-white/50" disabled>...</button>

// OK：停用仍可閱讀的濃度
<button className="text-white/70" disabled>...</button>

---

多語言字體排版

為什麼需要： 日文在同一字體大小下比英文視覺上更重（因為筆畫較多）。相同大小會讓日文看起來擁擠、沉重，因此需要小一級以取得視覺平衡。

字體排版 Token（已在 globals.css 中定義）

Token	用途	英文 (桌機)	日文 (桌機)
.text-hero	登陸頁面主標題	96px	80px
.text-section	區塊標題（h2）	48px	40px
.text-headline	功能標題、產品標題	30px	24px
.text-subhead	標語、導言	24px	20px

使用方法

// NG：直接指定 Tailwind（未依語言調整）
<h1 className="text-5xl md:text-8xl font-bold">...</h1>

// OK：使用 token（自動對應語言）
<h1 className="text-hero text-white">...</h1>

響應式對應

Token 已包含手機、平板、桌機的響應式尺寸。不需要額外指定斷點。

// NG：冗餘的斷點指定
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>

// OK：僅使用 token
<h1 className="text-hero">...</h1>

適用對象

• 登陸頁面標題（h1, h2）
• 區塊標題
• 產品名稱、功能名稱
• 標語、導言

注意： 不適用於內文（p 元素的長文）。內文請使用 text-white/80 等一般樣式。

---

設計 Token 遵守規則

原則： 不要直接使用 Tailwind 預設值，應使用 globals.css 中定義的設計 token。

圓角（Border Radius）

Token	值	用途
--radius-sm	8px	小徽章、標籤
--radius-md	12px	按鈕、輸入欄位
--radius-lg	16px	卡片、彈窗
--radius-full	999px	膠囊按鈕、頭像

// NG：直接指定 Tailwind
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>

// OK：使用 token
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>

顏色

// NG：直接使用 Tailwind 顏色
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>

// OK：使用專案 token
<p className="text-muted">...</p>
<div className="bg-muted-bg">...</div>

Token 違規檢查

實作後用以下指令檢查違規：

# 搜尋直接指定圓角的 Tailwind
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/

# 搜尋直接指定顏色的 Tailwind
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/

偵測到的項目請逐一替換為 token。

---

按鈕樣式

Primary CTA（預設：白底）

<button className="bg-white text-black px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/90 transition-colors cursor-pointer">
  立即下載
</button>

Secondary（僅邊框）

<button className="border-2 border-white text-white px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/10 transition-colors cursor-pointer">
  了解更多
</button>

品牌專屬（有限使用）

彩色按鈕使用條件：

• 僅限品牌專屬區塊（如 MUEDear amber 等）
• 每頁最多 1-2 處
• 不作為預設

// MUEDear 用：amber
<button className="border-2 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-white ...">
  下載 App
</button>

Disabled

<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
  已停用
</button>

---

背景樣式

使用的背景

// 高級：僅單色
<section className="bg-black">...</section>
<section className="bg-[#0f0f0f]">...</section>
<section className="bg-white">...</section>

避免的裝飾

模式	問題	替代方案
浮動光暈球	分散注意力	刪除
bg-gradient-to-b from-violet-900/20	裝飾性雜訊	單色
顆粒紋理	不必要的複雜度	刪除
動畫背景	效能惡化	靜態

---

卡片樣式

圖片中心卡片（預設）

<div className="bg-[#0f0f0f] rounded-[var(--radius-lg)] overflow-hidden">
  {/* 圖片：卡片的 70-85% */}
  <div className="aspect-video">
    <Image src="..." alt="..." fill className="object-cover" />
  </div>
  {/* 文字：最少化 */}
  <div className="p-6">
    <h3 className="text-white text-lg font-medium">產品名稱</h3>
    <p className="text-white/60 text-sm">一行說明</p>
  </div>
</div>

Glass Card（有限使用）

注意： Glassmorphism 僅在特定情境（價格表、功能比較等）使用。不要設為預設。

<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[var(--radius-lg)] p-6">
  <h3 className="text-white font-semibold">標題</h3>
  <p className="text-white/80">描述</p>
</div>

使用 Glass Card 的注意事項：

• 文字使用 text-white 或 text-white/80 以上
• 不要使用 text-slate-* 或 text-gray-*
• 背景半透明，對比度計算較複雜

---

指示升級協定

根據使用者的表達調整對應等級：

使用者的表達	解讀	需要的對應
「Spitfire 等級」「Native Instruments 等級」	全面視覺改造	不是微調而是完全重新設計
「更高級一點」	實質性變更	刪除效果、增加留白
「乾淨一點」	中等程度清理	刪除 30% 裝飾元素
「調整」「微調」	小幅修正	僅 CSS 變更

重要規則： 如果提到參考品牌，在提案前要先將目前實作與該品牌比較。

---

實作檢查清單

實作前檢查

• [ ] 是否有高品質產品螢幕截圖？
• [ ] 文字能否減少 50%？
• [ ] 是否確認了想參考的美感水準？
• [ ] 是否對應了該節制程度？

實作中檢查

問題	「否」時的動作
區塊內距 >= 100px？	增加到 py-28 以上
圖片佔卡片面積 60% 以上？	放大圖片
按鈕是白色或僅邊框？	從彩色改為白色
背景是單色（無漸層）？	刪除裝飾元素

實作後檢查

1. 瞇眼測試： 瞇著眼看。能辨識產品嗎？如果效果太搶眼就減少。
2. 「刪除一個」測試： 從每個區塊刪除一個元素。還能運作嗎？如果可以，表示它不需要。
3. Spitfire 比較： 將螢幕截圖與 Spitfire.com 並排。視覺「重量」相似嗎？

---

應避免的模式（明確禁止清單）

「Claude 預設會選擇安全的選項」——如果不明確禁止，就會收斂到通用選擇。

背景、裝飾

禁止模式	問題	替代方案
過度使用 bg-white/5 backdrop-blur-xl	「2023 模板」感	bg-black 或 bg-[#0f0f0f]
bg-gradient-to-b from-violet-900/20	裝飾性雜訊	刪除
bg-gradient-to-br from-indigo-500/10	同上	刪除
動畫 blob 背景	分散注意力、效能惡化	靜態、單色
顆粒紋理 (noise.svg)	不必要的複雜度	刪除
浮動光暈球	2020 年代初期趨勢	刪除

陰影、光暈

禁止模式	問題	替代方案
shadow-lg shadow-indigo-500/20	人工「彈出」感	無陰影或 shadow-sm shadow-black/20
shadow-xl shadow-violet-500/30	同上	同上
shadow-2xl shadow-amber-500/25	同上	同上
hover:shadow-*-500/40	懸浮時強調光暈	使用 hover:bg-white/10 等低調效果
drop-shadow-[0_0_*px_rgba()]	自訂光暈	刪除

版面

禁止模式	問題	替代方案
附圖示的三欄功能網格	通用 SaaS 設計	大圖片 + 最少文字
等大的三欄卡片（相同尺寸）	「全部存在感相同」	一個放大，其他縮小
py-12 以下的區塊間距	擁擠	py-28 (112px) 以上
全部置中	過於安全	考慮靠左或非對稱

元件

禁止模式	問題	替代方案
hover:scale-105 + hover:shadow-*	過度的懸浮效果	僅 hover:bg-white/10
transition-all duration-300	沉重、不可預測	transition-colors duration-200
group-hover:translate-x-2 箭頭	常見模式	刪除或 translate-x-1
彩色 CTA 按鈕（預設使用）	AI 安全選擇	白底或白邊框

動畫

禁止模式	問題	替代方案
散落的微互動	缺乏統一感	集中在一個頁面載入效果
過度使用 animate-pulse	分散注意力	刪除或僅一處
持續 animate-bounce	同上	僅在使用者操作時
多元素同時動畫	混亂	使用 staggered delays 依序

顏色（AI 安全選擇）

禁止模式	問題	替代方案
白底上的紫色漸層	最通用的 AI 選擇	單色深色
from-violet-600 to-indigo-600	同上	刪除
預設使用 text-indigo-400	濫用品牌色	text-white 或 text-white/80
同色系徽章（indigo on indigo）	對比度不足	白底 + 黑字

---

圖示

• 使用函式庫： Lucide Icons
• 禁止： 不要使用表情符號作為圖示

import { Music, Brain, Sparkles, Check, X } from 'lucide-react';

---

響應式斷點

/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */

應驗證的畫面寬度：

• 320px（最小手機）
• 768px（平板）
• 1024px（桌機）
• 1440px（大螢幕）

---

交付前檢查清單

• [ ] Lighthouse 無障礙 100%（最重要）
• [ ] 使用專案的 globals.css token
• [ ] 圖片是否成為主角
• [ ] 區塊間距 >= 112px (py-28)
• [ ] 按鈕是否為白色/邊框基底
• [ ] 背景是否為單色
• [ ] 不使用表情符號圖示（使用 Lucide）
• [ ] 支援深色模式
• [ ] 可點擊元素加上 cursor-pointer
• [ ] 響應式支援
• [ ] 效能最佳化（圖片、動畫）

---

對比度確認方法

實作後務必用 Lighthouse 檢查無障礙：

# 本機確認
npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view

# 查看詳細失敗項目
lighthouse http://localhost:3000 --only-categories=accessibility --output=json | jq '.audits["color-contrast"]'

目標：Lighthouse 無障礙分數 100%