引導式導覽與驗收標記
問題
新使用者第一次打開後台系統，看到 12 個側邊欄項目和一張 20 欄的表格。
寫一份操作手冊？他不會讀。做一支影片？他會看一次然後忘記。 最有效的是帶著他在真的畫面上走一遍。
但自製導覽最常見的三個失敗：
- 卡片擋住它正在叫你點的按鈕
- 暗罩把目標也蓋住了，使用者只能看，不能真的操作
- 鍵盤走不完，滑鼠壞掉或用讀屏軟體的人直接卡死
做法
1. 聚光洞可以點穿
用巨大 spread 的 box-shadow 罩住洞外，洞本身透明且 pointer-events: none。
使用者仍然能點到被圈起來的控制項。
導引是教人操作，不是代替他操作。 自動幫使用者點下去的導覽， 走完之後他還是不知道那顆按鈕在哪。
2. 卡片可以縮小
需要實際操作時（開對話框、切分頁），卡片收成右下角小膠囊，整個畫面恢復可用。 換步時自動展開——否則上一步縮小後，下一步的說明沒人看見。
✅ 這樣做
提供「縮小」按鈕，而且圖示要看得懂（− ／ ⤢）。
🚫 不要這樣
不要只提供「關閉」。使用者需要真的操作一下時只剩關閉這條路， 然後他就再也不會打開導覽了。
3. 鍵盤與螢幕報讀器
- ← → 換步、Esc 略過、Enter 前進
- 每步自動把焦點移入卡片
aria-live="polite"讓報讀器唸出新內容aria-modal="false"——它不是 modal，背景仍可操作
4. 錨點找不到要降級，不是壞掉
目標元素不存在時（該分頁沒開、該功能沒權限），targetRect = null
→ 顯示置中卡片，內容照舊。導覽不該因為一個錨點消失就整支崩潰。
延伸：同一個元件做驗收
加上「✅ 通過／❌ 有問題＋備註」的逐步標記，走完就是一份驗收報告。
這個用法是意外長出來的：原本只是新手導覽，後來發現 「帶著人走一遍畫面並逐項標記」正好就是驗收該做的事。 一個元件、兩種用途，維護成本沒有增加。
取捨
代價：導覽內容會過期。 畫面改了，錨點就失效。
減災方式：
- 錨點用語意屬性（
data-tour="export-button"）而不是 CSS selector - 錨點找不到時降級成置中卡，不要整支中斷
- 導覽步驟數控制在 3–7 步，越短越不容易過期
反例
✅ 這樣做
導覽涵蓋一條完整的關鍵路徑（從進入到完成一件事）。
🚫 不要這樣
不要用導覽逐一介紹每個按鈕。需要 12 步才講得完的畫面， 問題不在導覽——導覽只是把「看不懂」延後了三分鐘。
實作見 Coachmark。