UI 元件百科

導覽與資訊架構

Tabs｜分頁籤

在同一個內容區域切換彼此平行、同層級的面板；一次只查看其中一個。

常見俗稱：分頁籤、頁籤、標籤頁、Tabs

60 秒決策

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

適合使用

  • 多個內容面板地位相同，使用者一次只需要看其中一個。
  • 每個標籤名稱夠短，切換後仍停留在同一個任務脈絡。

不適合使用

  • 內容有填寫順序或完成條件，應使用 Stepper。
  • 每段內容需要同時對照，或內容很長而不該被隱藏。

畫面要說清楚的事

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

名稱說出面板內容

「成員與權限」比「第二頁」有用；標籤本身應能讓人決定要不要切換。

選取狀態與內容同步

目前 Tab 的樣式、aria-selected 與下方 tabpanel 要一起更新，不能只換底線。

鍵盤有固定走法

Tab 進入目前項目，左右方向鍵在標籤間移動；Home、End 可到第一個與最後一個。

必要狀態與回應

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

目前面板

一個 Tab 被選取，對應面板可見且有完整內容。

未選取面板

其他 Tab 保留可辨識名稱，但不假裝它們的內容正在顯示。

鍵盤焦點

焦點與選取狀態都能看見，不用滑鼠也能知道準備切換到哪一頁。

操作 Demo

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

操作前先知道

  1. 工作區設定的平行頁面

    先觀察：一般設定、成員與權限、通知是三個同層級設定面板。

    操作：用左右方向鍵切到「通知」，再按 Home 回到第一個標籤。

    預期結果：選取狀態與可見面板同步更新，焦點不會跳到頁面其他位置。

可操作 Demo

平行設定頁適合用 Tabs，不需要把內容切成流程。

工作區設定

設定內容該切換、收合，還是只揭露一段說明？

目前面板

一般設定

工作區名稱、時區與預設語言。這些設定和成員、通知同層級，切換時只需要換一個面板。

目前顯示「一般設定」。可用左右方向鍵、Home、End 切換。

告訴 AI

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

在 LumenDesk 的工作區設定頁建立 Tabs：一般設定、成員與權限、通知。三個標籤切換的是同一區域中彼此平行的設定面板；目前 Tab 使用 aria-selected="true"，並正確連到對應 tabpanel。支援 Tab 進入、左右方向鍵在標籤間移動、Home 前往第一項、End 前往最後一項。不要把長篇 FAQ 或有先後步驟的表單做成 Tabs。

驗收清單

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

  • 標籤是否切換平行面板，而不是流程步驟？
  • 每個 Tab 是否有對應的 tabpanel？
  • aria-selected、可見內容與目前樣式是否同步？
  • 左右方向鍵、Home、End 是否可預期地操作？
  • 手機下標籤名稱是否仍看得懂且不讓整頁溢出？