系統訊息與頁內提示
重要訊息，到底該放在哪裡？
先問它是不是眼前任務的問題；若不是，再判斷它是否影響整個服務，或只是剛好能讓使用者少走一步的提醒。訊息位置會決定它有沒有被看見，也會決定它會不會打斷人。
選擇流程
先找訊息和任務的距離，再決定它佔多少版面。
差異對照
三條訊息，不能共用同一個位置。
點選欄位名稱可進入各元件的閱讀路徑、實際 Demo 與可複製的 AI Prompt。
| 判斷面向 | Alert即時警示訊息 | Banner通知橫幅 | Callout重點提示區塊 |
|---|---|---|---|
| 和目前任務的關係 | 使用者現在做的事出了問題，或需要立刻知道一個不改變頁面的結果。 | 影響服務整體、下一段旅程或使用者的持續通知，但不一定是眼前欄位的問題。 | 在附近內容旁補充一個能幫助判斷的建議、規則或背景。 |
| 放在哪裡 | 緊貼發生問題的欄位、表單區或操作結果附近。 | 主要內容前或頁面顯眼位置，避免和目前欄位錯誤混在一起。 | 就在相關設定、段落或決策點旁，讓人閱讀到那裡時能用上。 |
| 訊息生命週期 | 出現後留到問題修正，不能幾秒後自動消失。 | 在通知有效期間維持可見；可關閉時，要能視需要回看。 | 正常留在內容中；規則不再適用時才更新或移除。 |
| 語意與焦點 | 動態重要訊息可使用 alert 語意通知輔助科技，但不搶走焦點。 | 產品上的通知橫幅不等於 ARIA role="banner"；後者是網站頁首 landmark。 | 沒有通用 ARIA role；依內容使用語意化 section 或 aside，不要因為有框線就宣告成 alert。 |
| 不適合的情況 | 長期服務公告、一般教學或需要強制確認的高風險操作。 | 目前欄位的驗證錯誤，或太短暫的操作結果。 | 剛發生的錯誤、成功狀態或需要使用者立刻回應的問題。 |
示範情境
同一個後台，三種訊息各有自己的位置。
在 LumenDesk 裡，尚未選擇通知管道卻儲存，是眼前設定的問題，使用 Alert；角色維護時間影響整個成員管理，放 Notification Banner；「先從最小權限開始」則是角色設定旁的 Callout。這裡的視覺 Banner 不是 ARIA `banner` landmark，網站頁首才是。
查看 Alert Demo →