PAM 績效考核管理系統 — UI 優化建議書
文件日期：2026/03/28 對照文件：技術規格 v3.3、流程圖 v3.2、Figma 規格、UI 設計規劃書 目前技術棧：React 19 + TypeScript + Tailwind CSS v4 + Radix UI + Lucide Icons
一、現況分析
目前 UI 架構
- 設計語言：Google Material 風格配色（Blue 1A73E8 / Green 34A853 / Amber F9AB00 / Red EA4335）
- 元件庫：Radix UI 作為 headless 元件 + 自定義樣式
- 佈局：左側可摺疊 Sidebar + 主內容區
- 表單：React Hook Form + Zod 驗證
- 資料查詢：TanStack React Query v5（30s stale time）
主要問題
- 資訊密度不足 — 表格數據多但缺少視覺化摘要
- 操作路徑過長 — HR 常用操作需多次點擊才能到達
- 缺少情境引導 — 新手 HR 或主管不知道下一步該做什麼
- 回饋不即時 — 操作後缺乏明確的狀態變化指示
- 行動裝置適配不足 — 主管可能需在手機上快速審核
二、整體設計優化方向
2.1 設計系統統一
建議：建立完整的 Design Token 系統
語義色彩（取代硬編碼）：
- --color-status-pending: amber-500 // 待處理
- --color-status-progress: blue-500 // 進行中
- --color-status-completed: green-500 // 已完成
- --color-status-returned: red-500 // 已退回
- --color-status-excluded: gray-400 // 已排除
- --color-status-locked: purple-500 // 已鎖定
等第色彩（固定不變）：
- --color-grade-outstanding: purple-600 // 特優
- --color-grade-excellent: blue-600 // 優等
- --color-grade-good: green-600 // 甲等
- --color-grade-fair: amber-600 // 乙等
- --color-grade-poor: red-600 // 丙等
2.2 佈局架構優化
現況：所有頁面用相同的 Sidebar + Content 佈局 建議：
| 頁面類型 | 佈局 | 說明 |
|---|---|---|
| 儀表板 | Grid Dashboard | 卡片式佈局，可拖曳排列 |
| 名單/列表 | Master-Detail | 左列表右詳情，減少頁面跳轉 |
| 考核表單 | Wizard / Stepper | 分步驟引導，減少認知負擔 |
| 設定頁 | Tab Panel | 分類索引標籤 |
三、各頁面優化建議
3.1 HR 儀表板（DashboardPage）
現況：垂直堆疊多個區塊，資訊量大但重點不明 優化方案：
A. 頂部 KPI 卡片列（一目了然）
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ 總考核人數 │ │ 完成率 │ │ 卡關件數 │ │ 異常標記 │ │ 剩餘天數 │
│ 905 │ │ 68.5% │ │ 12 🔴 │ │ 3 ⚠️ │ │ 5 天 │
│ ↑15 vs 上期│ │ ████░░░ │ │ 較昨日+2 │ │ 需HR介入 │ │ 初核截止 │
└──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘
B. 進度視覺化改進
- 環形進度圖：取代純文字百分比，一眼看出完成狀況
- 流程漏斗圖：初核 → 複核 → 初審 → … → 完成，每關顯示人數與瓶頸
- 熱力圖：虛擬部門 × 考核狀態矩陣，紅色代表落後
C. 快捷操作列
[📧 一鍵催繳逾期] [🔄 批次退回異常] [📊 匯出報表] [⚙️ 等第分配]
- 將最常用的 HR 操作放在儀表板首頁
- 點擊直接執行或跳轉，減少導航層級
D. 即時通知區（右側面板）
- 最近操作、系統提醒、待處理事項
- 類似 Slack 的即時更新感
3.2 人員管理頁（ParticipantsPage）
現況：單一長表格，需滾動查找 優化方案：
A. Master-Detail 雙欄佈局
┌─────────────────────┬──────────────────────────┐
│ 員工列表（60%） │ 選中員工詳情（40%） │
│ ┌─────────────────┐ │ 基本資料 │
│ │ 🔍 搜尋 / 篩選 │ │ 考核主管鏈 │
│ ├─────────────────┤ │ 當前狀態/分數 │
│ │ 王小明 | 業務部 │ │ 歷史考核記錄 │
│ │ 李大華 | 技術部 ← │ │ 操作按鈕： │
│ │ ... │ │ [修改主管] [排除] [退回] │
│ └─────────────────┘ │ │
└─────────────────────┴──────────────────────────┘
B. 批次操作工具列
- 勾選多人後，頂部浮出工具列：批次修改主管、批次排除、批次修改職級
- 類似 Gmail 的多選操作 UX
C. 狀態圖示優化
⬜ Pending（待處理） 🔵 InProgress ✅ Completed
🔙 Returned（已退回） ⛔ Excluded 🔒 Locked
- 用一致的圖示 + 顏色取代純文字 Badge
3.3 考核表單頁（ReviewFormPage）
現況：所有 20 題 + 評語 + 出勤在單一長頁面 優化方案：
A. 分頁式表單（5 面向 = 5 個 Tab）
[工作品質] [工作效率] [專業知識] [團隊合作] [管理能力]
↑ 當前
┌─────────────────────────────────────────────┐
│ 面向三：專業知識（4 題） │
│ │
│ 題目 1: ___________ │
│ [0.5] [1.0] [1.5] [2.0] [2.5] ... │
│ │
│ 題目 2: ___________ │
│ [0.5] [1.0] [1.5] [2.0] [2.5] ... │
│ │
│ 小計: 7.5 / 20 │
│ │
│ [← 上一面向] [下一面向 →] │
└─────────────────────────────────────────────┘
B. 即時分數預覽側邊欄
┌──────────────┐
│ 目前得分預估 │
│ │
│ A 分: 82.5 │
│ 出勤扣分: -1 │
│ ──────────── │
│ 預估 D: 81.5 │
│ 預估等第: 優等 │
│ │
│ ⚠️ 優等已達 │
│ 14% (上限15%) │
└──────────────┘
C. 評分輸入優化
- Slider + 數字輸入雙模式：可拖曳也可直接輸入
- 星級視覺化：0.5~5.0 用半星呈現，直覺化
- 鍵盤快捷鍵：Tab 下一題，數字鍵直接輸入分數
D. 歷史對照面板
- 審核主管可展開查看前一關的各題分數
- 差異 > 2 分的題目自動標示（紅色底）
3.4 等第分配頁（GradeDistributionPage）
現況：表格形式，數字密集 優化方案：
A. 視覺化圖表優先
┌────────────────────────────────────────────┐
│ 虛擬部門：新聞部（跨公司） 總人數: 85 │
│ │
│ 特優 ██░░░░░░░░ 8% (6.8→7人) 上限12% │
│ 優等 ████░░░░░░ 12% (10.2→10人) 上限15% │
│ 甲等 ██████████████████ 75% (63.8→64人) │
│ 乙等 █░░░░░░░░░ 3% (2.6→3人) 上限5% │
│ 丙等 █░░░░░░░░░ 2% (1.7→1人) 上限5% │
│ │
│ 合計: 85 ✅ [儲存] [套用建議值] │
└────────────────────────────────────────────┘
B. 超標即時預警（v3.3 #11 配合）
- 調整數字時即時更新百分比條
- 超出範圍 → 條變紅 + 搖晃動畫 + 彈出理由輸入框
- 不需要單獨的 Modal，inline 展示更流暢
C. 全局概覽視圖
- 所有虛擬部門的等第分配一覽
- 用紅/黃/綠三色標示：合規 / 接近上限 / 超標
3.5 帳號管理頁（AccountsPage）
現況：基本表格 + 搜尋 優化方案：
A. 帳號健康度指標
┌──────────────────────────────────────────┐
│ 帳號總覽 啟用: 109 停用: 10 缺漏: 0 ✅ │
│ 最後同步: 2026/03/28 23:58 │
└──────────────────────────────────────────┘
B. 角色分群 Tab
[全部 (119)] [考核主管 (98)] [HR (3)] [Admin (2)] [已停用 (16)]
C. 批次操作
- 一鍵重設所有密碼（配合考核開始流程）
- 一鍵同步員工編號
- 缺漏帳號一鍵建立
3.6 審核主管儀表板（ReviewDashboardPage）
現況：簡易版，缺少等第分配與下轄狀態 優化方案：
A. 三區塊佈局
┌──────────────────┬────────────────────────┐
│ 我的待辦 │ 管轄進度 │
│ 🔴 逾期 3 件 │ [環形圖] 完成 68% │
│ 🟡 即將到期 5 件 │ │
│ 🟢 正常 12 件 │ 初核: 85% │
│ │ 複核: 72% │
│ [一鍵進入考核] │ 初審: 45% │
├──────────────────┼────────────────────────┤
│ 等第分配狀況 │ 退回紀錄 │
│ 核定 vs 實際比例 │ 我退回的: 3 筆 │
│ [確認等第分配] │ 被退回的: 1 筆 │
└──────────────────┴────────────────────────┘
B. 快速行動
- 儀表板直接提供「開始考核」按鈕，跳到第一筆待評員工
- 批次提交按鈕（已填完但尚未提交的）
四、互動體驗優化
4.1 Loading & Skeleton
現況：純 Spinner 或空白等待 建議：
- 表格使用 Skeleton 骨架屏（灰色脈動條）
- 表單使用 Optimistic Update（先更新 UI，背景送 API）
- 列表使用 Infinite Scroll 或 Virtual List（大量資料）
4.2 表單自動儲存
現況：手動點擊儲存草稿 建議：
- 每 30 秒自動儲存草稿（Debounced）
- 離開頁面前檢查未儲存變更（beforeunload）
- 底部顯示「已自動儲存 HH:mm:ss」
4.3 鍵盤導航
建議：
- 考核表單：Tab 切換題目、Enter 下一頁、Esc 暫存
- 列表頁：↑↓ 選擇、Enter 進入、Space 勾選
- 全局：Ctrl+K 快速搜尋（Command Palette）
4.4 批次操作確認
現況：單一確認 Dialog 建議：
- 批次操作顯示影響範圍預覽（影響 N 人、N 個部門）
- 危險操作用紅色 Destructive Dialog
- 成功後用 Toast + Confetti（可選）
4.5 即時協作感
建議：
- HR 儀表板數據每 60 秒自動刷新
- 考核被退回時，主管登入後首頁顯示紅色提醒橫幅
- 新資料進入時用動畫漸入，而非整頁重新載入
五、響應式與行動裝置適配
5.1 主管行動版
考核主管可能在外出時需要快速審核，建議：
| 頁面 | 行動版調整 |
|---|---|
| 待評清單 | 卡片式列表取代表格 |
| 考核表單 | 單題全螢幕，左右滑動切換 |
| 儀表板 | 垂直堆疊，摺疊次要區塊 |
5.2 Breakpoints
sm: 640px — 手機（單欄）
md: 768px — 平板（雙欄壓縮）
lg: 1024px — 筆電（標準佈局）
xl: 1280px — 桌機（寬版佈局）
六、無障礙 (Accessibility)
- 所有操作支援鍵盤導航
- 表單輸入有清楚的 Label + Error Message
- 色彩對比度符合 WCAG AA（Radix UI 原生支援）
- 分數輸入支援 ARIA 標註
七、效能優化
| 項目 | 現況 | 建議 |
|---|---|---|
| 路由載入 | React.lazy 已使用 | 保持，加入 Suspense fallback UI |
| 表格渲染 | 全量渲染 | 超過 100 筆改用 @tanstack/react-virtual |
| 圖片 | 無 | 頭像/附件用 lazy loading |
| Bundle | 單一 chunk | 分離 vendor + 各 route chunk |
| API 快取 | 30s stale time | 靜態資料（公司、部門）改為 5min |
八、實作優先順序
Phase 1 — 快速改善（1-2 天）
- KPI 卡片列（儀表板頂部）
- 狀態圖示統一（Badge → Icon + Color）
- 表格 Skeleton 載入動畫
- 考核表單自動儲存草稿
- 全局快捷操作列
Phase 2 — 核心體驗（3-5 天）
- 考核表單分頁 Tab（5 面向）
- 即時分數預覽側邊欄
- 等第分配視覺化圖表
- Master-Detail 人員管理佈局
- 審核主管儀表板補齊（等第 + 退回紀錄）
- 等第超標即時預警 inline UI
Phase 3 — 進階體驗（5-7 天）
- 行動裝置適配（考核表單單題全螢幕）
- 鍵盤導航與 Command Palette
- 流程漏斗圖 + 熱力圖
- 虛擬列表（大量資料效能）
- 儀表板自動刷新 + 動畫漸入
九、參考設計
推薦元件庫補充
- 圖表：Recharts 或 Nivo（已有 Recharts 依賴可直接使用）
- 虛擬列表：@tanstack/react-virtual
- 動畫：Framer Motion（頁面切換 + 數字跳動）
- Command Palette：cmdk（命令面板）
設計參考
- Figma 規格中的元件庫結構（NavigationSidebar、DataTable、FormField 等）可直接對應實作
- UI 設計規劃書中的資訊架構可作為導航重構依據
產出者：AI 開發助手 · 2026/03/28