通知與 onboarding

通知中心和 onboarding 是兩件常被做混的事:通知是「持久紀錄」,使用者隨時回來都該看得到;toast 只是一閃而過的提示,不該拿來當通知用。這章把 bell badge、即時更新、入門 checklist、tooltip/popover/coach mark 的用途與界線講清楚。當你要設計鈴鐺紅點、規劃新手引導、或猶豫「這該用 tooltip 還 popover」時翻這頁。

站內通知(In-app Notifications)

這是什麼

頂部列鈴鐺圖示搭配未讀數字角標;下拉依今天/昨天分組,並可一鍵全部標為已讀。

什麼時候用

系統有與使用者相關的事件需要即時提醒,但不必每次都打斷主要工作。

預覽依本指南規則實作

提示文字(Tooltip)

這是什麼

滑鼠移入或鍵盤聚焦時顯示的一行說明文字;純圖示按鈕需另加無障礙標籤。

什麼時候用

圖示或縮寫按鈕意義不明、或按鈕因權限暫時無法使用需說明原因時。

預覽依本指南規則實作

彈出面板(Popover)

這是什麼

點按鈕後在旁邊彈出小面板,可放表單、連結或次要動作;按 Esc 或點外部關閉。

什麼時候用

需要在不離開目前頁面的前提下完成簡短操作(邀請成員、快速設定)時。

預覽依本指南規則實作

引導標記/聚光導覽

這是什麼

新功能導覽:每步聚光指向一個介面元素並附說明,顯示進度,全程可略過。

什麼時候用

首次使用或重大改版時,引導使用者完成關鍵第一步;步數控制在三到五步。

預覽依本指南規則實作

從這裡開始

建立第一個專案以邀請團隊協作。

步驟 1 / 3

Onboarding 設定清單

這是什麼

新用戶設定清單:進度條、逐步打勾、當前步驟展開說明與行動按鈕,且可關閉不再強迫顯示。

什麼時候用

新帳號或新工作區需要引導完成建專案、邀請成員、串接資料等關鍵設定時。

預覽依本指南規則實作

完成設定(4 步)

完成設定後可解鎖完整工作流程

2/4 完成
  • 建立第一個專案
  • 邀請團隊成員
  • 連結資料來源

    串接 CRM 或上傳 CSV,儀表板才會開始有數據。

  • 設定自動化規則
  • 步驟 3–6 個、由易到難;明確顯示進度(x/y 或 %)。
  • dismiss,且關閉後勿再強迫顯示;完成後自動收合或慶祝。
  • 與 dashboard 首頁共用(見 22-dashboard-page),同一元件勿重複實作。

活動動態 Feed

這是什麼

依時間分組的活動紀錄,每列呈現「誰做了什麼、對哪個對象、何時」;可放在儀表板區塊或獨立頁。

什麼時候用

團隊需要查看客觀事件流(非個人未讀通知)時,例如專案動態、系統匯入完成。

預覽依本指南規則實作
今天
  • Sam 更新了 行銷 Q2 狀態

    10 分鐘前
  • Alex 加入了工作區

    1 小時前
  • 系統 完成匯入 48 筆客戶資料

    2 小時前
昨天
  • Bob 上傳了附件 brief.pdf

    昨天 16:20
  • Ana 建立了 官網改版

    昨天 09:05
  • in-app notifications 區分:feed = 客觀事件流(可不需未讀態);通知 = 與我相關、需處理。
  • 行為人加粗、受詞可點;時間用相對格式(X 分鐘前),hover 顯示絕對時間。
  • 分群標題 sticky 或淡底;長列表搭配 load more / 無限捲動(見 15-pagination)。

規格速查

項目定稿值
通知入口Topbar 右側 bell icon(avatar 旁)
未讀提示紅點或數字 badge,未讀數 > 99 顯示 99+
通知性質持久紀錄,可回看,勿與 toast 混用
即時更新polling 30 秒,或 websocket
每筆通知須含是什麼、誰、何時、連到哪
Onboarding checklist進度條 + 3–6 步(由易到難),明確顯示完成度(x/y 或 %)
checklist 可關可 dismiss,關閉後勿再強迫顯示;完成後收合並留「Show again」
Tooltip純文字 < 1 句,hover/focus 觸發,不放按鈕連結
Popoverrich content(文字+按鈕+表單),click 觸發,點外面關
Coach mark第一次引導 overlay,≤ 3–5 步,可 skip/dismiss/重看

常見做錯

做錯正確
用 toast 當持久通知toast 一閃即逝,持久訊息一律進通知中心
Onboarding coach mark 不能 dismiss一定要可 skip、可 dismiss,不強迫看完
Onboarding checklist 沒有完成度配進度條與 x/y 或 %,讓使用者知道還剩幾步
Tooltip 塞關鍵操作或按鈕關鍵資訊放畫面上,需要互動的內容改用 popover
數字 badge 直接顯示破百數字未讀超過 99 一律顯示 99+

相關章節

  • 回饋 — toast 與通知的分工,避免把短暫提示當紀錄
  • 狀態 — 通知列表的空狀態與 empty state 即引導
  • 設定頁 — 通知類型 × 通道(in-app/email/push)的開關設定