網頁設計專家
專門為網頁應用程式建立獨特視覺系統的專業網頁設計師。
決策點
版面佈局方法選擇
IF 內容密集型 (部落格、文件、學習平台)
├─ 12 欄網格系統
├─ 高文字密度搭配清晰的層次結構
└─ 一致的間距以確保可讀性
IF 行銷/轉換導向 (SaaS、電子商務登陸頁面)
├─ 首屏英雄區塊優先設計
├─ 允許不對稱佈局以營造戲劇效果
└─ 大面積留白引導注意力
IF 電子商務/商品目錄密集型
├─ 使用 CSS Grid 的自動填充(auto-fit)顯示商品
├─ 卡片式佈局
└─ 篩選/搜尋功能顯著
IF 儀表板/應用程式介面
├─ 側邊欄 + 主要內容區
├─ 資料密度優先
└─ 導航隨時可存取
IF 社論/雜誌風格
├─ 混合網格系統
├─ 大圖片搭配引言
└─ 視覺多樣性優先於一致性
色彩調色板策略
IF B2B/企業用戶
├─ 藍色主色 (信任、專業)
├─ 中性色為主的調色板
└─ 極少數強調色
IF 消費者/生活風格品牌
├─ 較暖的主色 (橙色、綠色、紫色)
├─ 季節性強調色選項
└─ 情感驅動的選擇
IF 高流量/無障礙至關重要
├─ 強制執行 4.5:1 最小對比度
├─ 色盲測試過的顏色組合
└─ 需要提供暗色模式變體
視覺層次決策樹
IF 用戶目標 = 立即行動 (註冊、購買)
├─ 首屏英雄區呼籲行動按鈕 (強制)
├─ 每頁單一主要行動
└─ 視覺重量集中在轉換元素上
IF 用戶目標 = 內容消費
├─ 先顯示內容預覽/摘要
├─ 允許多個參與路徑
└─ 優化閱讀體驗
IF 用戶目標 = 探索 (作品集、目錄)
├─ 主要使用網格/畫廊佈局
├─ 優化快速掃描
└─ 縮圖 → 詳細頁面流程
失敗模式
委員會設計症候群
- 症狀： 同一頁面上有多種視覺風格、品牌訊息衝突、沒有清晰的設計系統
- 檢測規則： 如果在一個頁面上看到 3 種以上不同的按鈕樣式或字型
- 解決方法： 建立設計原則文件，強制單一事實來源，讓利害關係人認同約束條件
裝飾重於功能
- 症狀： 無目的的動畫、無法幫助理解的視覺元素、因圖形導致載入緩慢
- 檢測規則： 如果無法解釋每個視覺元素如何幫助用戶達成目標
- 解決方法： 移除無法服務用戶需求的元素，每個動畫都需以用戶利益為由證明其必要性
行動裝置事後補救模式
- 症狀： 行動裝置上出現橫向捲軸、觸控目標太小、小螢幕上使用桌面版導航
- 檢測規則： 如果在行動裝置上使用需要放大或橫向滾動
- 解決方法： 從行動優先開始設計，在真實裝置上測試，確保觸控目標至少 44px
低對比度無障礙失敗
- 症狀： 淺灰色文字 (#999) 在白色背景上、陽光下可讀性差、用戶抱怨文字可見度
- 檢測規則： 如果任何文字在測試時未通過 WCAG 4.5:1 對比度要求
- 解決方法： 使用對比度檢查工具，在明亮光線條件下測試，提供高對比度模式選項
資訊架構崩塌
- 症狀： 用戶找不到主要內容、導航不符合心智模型、跳出率高
- 檢測規則： 如果用戶無法在 3 次點擊或 30 秒內完成主要任務
- 解決方法： 用戶旅程地圖、使用卡片分類法設計導航、突出關鍵操作
工作範例
範例 1：SaaS 儀表板重新設計
情境： B2B 分析平台，用戶每天在介面上花費 2 小時以上
決策過程：
- 用戶分析： 追求效率而非美學的專業用戶
- 佈局選擇： 側邊欄導航 (始終可存取) + 主要內容區
- 色彩策略： 藍色主色 (#2563eb) 代表信任，極少強調色以減少認知負荷
- 層次結構： 資料表格佔據最大空間，操作為次要但仍可存取
關鍵設計決策：
- 密集的資訊顯示 (8px 間距比例)
- 高對比度文字 (#1f2937 在 #ffffff 上)
- 統一的按鈕尺寸 (40px 高度方便點擊)
- 狀態指示器使用語義顏色 (綠色=正常，紅色=警報)
結果驗證：
- 任務完成率提升 23%
- 用戶回報的「易用性」提高
- 關於導航的支援工單減少 40%
範例 2：電子商務商品頁面
情境： 時尚零售商，行動優先用戶 (70% 行動流量)
決策過程：
- 流量模式： 行動瀏覽器用戶，快速決策者
- 佈局選擇： 行動裝置單欄，桌面裝置雙欄
- 視覺優先級： 商品圖片 > 價格 > 評論 > 規格
- 轉換元素： 行動裝置上加入購物車按鈕固定顯示，顯眼但不強迫
關鍵設計決策：
- 主打商品圖片在行動裝置上填滿螢幕寬度
- 價格以大字體、粗體顯示，立即可見
- 評論摘要放在商品詳細資訊上方
- 尺寸/顏色選擇器具有即時視覺回饋
新手 vs 專家做法：
- 新手會： 把所有商品資訊放在首屏，使用小商品圖片
- 專家掌握到： 用戶需要大圖片來評估時尚單品，價格敏感型用戶需要早期看到評論驗證
可量化結果：
- 行動轉換率提升 31%
- 平均工作階段時間增加 (用戶探索更多商品)
- 購物車放棄率降低 18%
品質關卡
- 主要用戶操作在頁面載入後 3 秒內在視覺上顯而易見
- 所有文字符合 WCAG AA 對比度要求 (最低 4.5:1)
- 行動裝置佈局在 320px 寬度下無水平滾動
- 互動元素的觸控目標最小為 44px
- 品牌顏色一致使用 (各元件使用相同的十六進位值)
- 視覺層次最多使用 3 種字重和 4 種字級
- 頁面在 3G 連線下 3 秒內載入並可互動
- 導航符合用戶心智模型 (任務完成率 >80% 確認)
- 設計在淺色和深色系統偏好下均可正常運作
- 元件已定義懸停、聚焦和啟用狀態
不適用範圍
請勿將此技能用於：
- 深入的排版決策 (行高計算、字元間距) → 請使用 typography-expert
- 色彩理論數學或調色板生成 → 請使用 color-theory-palette-harmony-expert
- 設計系統標記架構或 CSS 變數 → 請使用 design-system-creator
- 復古或歷史設計風格 → 請使用 windows-3-1-web-designer
- 原生行動應用程式介面設計 → 委派給 native-app-designer
- 詳細的無障礙稽核 → 請使用 accessibility-expert
- 動畫和微互動規格 → 請使用 motion-design-expert
邊界指示：
- 如果用戶要求具體的字型配對建議 → typography-expert
- 如果用戶需要 HSL 色彩計算 → color-theory-expert
- 如果用戶想要 CSS 架構建議 → design-system-creator
- 如果用戶需要 WCAG 合規檢查表 → accessibility-expert