浮動說明與資訊卡

Popover|彈出資訊面板

由明確入口開啟的浮動內容面板,可承載較完整資訊與下一步操作;內容、焦點與關閉規則都要被設計。

常見俗稱:彈出資訊面板、操作浮層、Popover、資訊面板、Pop-over

60 秒決策

先確認使用者要完成的事。

適合使用

  • 使用者需要由明確入口開啟一塊較完整的資訊,並可能在其中執行一兩個後續動作。
  • 內容仍屬於目前頁面的局部脈絡,開啟後不需要停止整個背景流程。

不適合使用

  • 只是兩句短提示,或內容根本沒有任何可操作與延伸閱讀的必要。
  • 內容需要強制回應、高風險確認、長表單或多步驟流程。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

入口說清楚會打開什麼

「查看通知摘要」比三個點或沒有文字的圖示更容易讓人預期內容。

內容可以多一點,但層級要更清楚

標題、摘要和一兩個下一步就足夠;別把完整設定頁縮成一張漂浮卡。

關閉規則跟內容強度一致

可輕易離開的資訊可支援 Escape 與點外部關閉;若離開會遺失工作,改用有明確取消的流程。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

未開啟

觸發按鈕清楚說明會看到的內容,不讓人猜三個點代表什麼。

已開啟

浮層有標題、摘要與可抵達的第一個操作,不會遮住自己的觸發點。

完成下一步

操作後留下具體回饋,並決定是否收合面板。

輕量關閉

Escape、點擊外部或再次點觸發點能關閉;不把半完成的長表單當成輕量內容。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 通知摘要

    先觀察:面板是否比 Tooltip 多了資訊與下一步,但仍沒有變成一個需要填寫的長流程。

    操作:點選「查看通知摘要」,按 Tab 移到「前往通知設定」,再按 Escape 或點擊面板外部。

    預期結果:你能閱讀摘要並進行一個下一步;面板可被安全關閉,背景內容維持可用。

Popover Demo

內容可以操作,但還是要保持局部與好關閉
情境:LumenDesk 工作區

通知中心

今天有 3 則待處理通知你可以先看摘要,再決定是否前往設定。

通知摘要

需要你處理的 3 件事

  • 成員邀請等待核准
  • 週報尚未閱讀
  • 產品設計更新了專案時程

這裡有摘要和下一步,所以不是 Tooltip;按 Escape 或點面板外部可關閉。

尚未開啟通知摘要。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的通知設定旁建立 Popover。使用者點選「查看通知摘要」後,開啟一個包含今日待處理通知、目前頻率與「前往通知設定」動作的浮動面板。面板的內容可以操作,因此不能把它當 Tooltip;要有清楚標題、可見觸發入口、點擊外部或 Escape 的關閉規則,以及鍵盤能抵達的第一個操作。若內容已經是多步驟或高風險任務,改用 Dialog 或完整頁面。

驗收清單

不要只確認欄位能不能點。

  • 入口是否明說會顯示哪一類內容?
  • 面板是否有標題,並只放目前任務需要的資訊與動作?
  • 第一個可操作元素是否能被鍵盤找到?
  • Escape 與點外部關閉是否符合內容風險?
  • 內容若變成長表單或高風險確認,是否已改用 Dialog 或完整頁面?
  • 操作結束後,是否給出可理解的結果?