60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者正在看一個人、專案或名詞，想先得到少量背景資訊再決定要不要深入。
- 預覽與觸發對象有明確關係，原頁仍保留必要身分與任務資料。
不適合使用
- 這張卡是唯一能看到的關鍵資料，或使用者必須依卡片內容完成正式操作。
- 畫面上到處都是可滑出的卡片，導致人無法判斷哪些文字可互動、哪些只是文字。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
讓可預覽的對象看起來可互動
可聚焦的名稱、底線或其他一致提示，讓人不用靠碰巧滑過去才發現有內容。
預覽不是第二張完整頁面
放身分、關係與少量近況即可；長歷史、設定和多個命令留到詳細頁。
同時設計滑鼠、鍵盤與觸控
hover 之外也要支援 focus 和點選；離開與 Escape 的收合規則要可預期。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
平時收合
原頁的名稱與基本角色本來就看得到，使用者可理解資料而不必打開卡片。
滑過、聚焦或點選
卡片顯示相關預覽，並以 aria-expanded 告知目前開啟狀態。
游標在卡片上
從觸發點移到卡片時不應瞬間消失，讓人來得及閱讀。
離開或 Escape
離開互動範圍、再次點選或按 Escape 後收合，焦點回到原本對象。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
成員快速預覽
先觀察：姓名本來就能辨識對象；Hover Card 只補團隊、角色與近期專案，而不是唯一資料來源。
操作：用 Tab 聚焦「林子安」，或滑過、點選它開啟卡片；再按 Escape 或再點一次收合。
預期結果：桌面滑鼠、鍵盤與觸控式點選都能得到同一份預覽；卡片不會在移到內容時立刻消失。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的成員名稱旁建立 Hover Card。使用者滑過、Tab 聚焦或在觸控裝置點選「林子安」時，顯示姓名、團隊、角色與近期參與專案的簡短預覽。卡片只提供認識對象的補充，不承擔重要設定或唯一操作入口；重要身分資訊仍要在原頁可見。卡片開啟時更新 aria-expanded，按 Escape 可關閉，離開焦點或游標後可收合；觸控使用者能再點一次收合。驗收清單
不要只確認欄位能不能點。
- 觸發對象是否明顯可互動，且可被鍵盤聚焦？
- 原頁是否已直接顯示必要身分或任務資料？
- Hover Card 是否只給短預覽，而非重複完整資料頁？
- hover、focus、click 或 tap 是否都能開啟？
- 從觸發點移到卡片時，內容是否仍留得住？
- Escape、離開與再次點選是否有一致的收合結果？