Tabs 頁籤
概述
頁籤是一種用於在同一個空間內切換不同內容區塊的元件。它允許使用者通過點擊頁籤來切換不同的內容面板，從而在有限的空間內呈現更多資訊，並提供直觀的內容訪問方式，提升使用者體驗。
使用時機
頁籤常用於以下情境：
- 多個同層級內容：當有多個同層級的內容需要呈現時，頁籤能讓使用者清楚了解內容的分類，並快速切換。例如購物網站的商品分類、新聞app的新聞類別。
- 節省介面瀏覽空間：當介面空間有限，無法同時顯示所有內容時，頁籤能有效利用空間，讓使用者自行選擇要查看的內容。例如行動裝置上的設定頁面、多功能app的不同功能模組。
使用規範
當您取用頁籤進行設計時，應考慮以下原則：
- 標籤文字：使用簡潔明瞭的文字，清楚表達每個頁籤代表的內容，避免過長或模糊的文字。
- 標籤排列：根據內容的邏輯順序或重要性排列標籤。
- 預設頁籤：設定一個預設顯示的頁籤，讓使用者開啟頁面時能立即看到內容。
- 注意：頁籤的使用情境為在同一頁面內「切換不同的內容區塊」。點擊不同的頁籤標籤會顯示不同的內容面板，頁面本身不會重新載入。若要設計快速跳轉到「頁面中的特定位置」，請使用錨點元件。
設計範例
線條型頁籤 (Line Tabs)
適合用於頂部導航區塊。
![]()
- 標籤 (Tab)
- 標籤文字 (Tab Label)
- 選取指示器 (Tab Indicator)
![]()
滑動式 (Scrollable)
當標籤數量超過螢幕寬度時，使用者可以透過水平滑動來查看所有標籤。這種設計在有限的螢幕空間中容納更多標籤，同時保持介面的整潔。
- 標籤 (Tab)
- 標籤文字 (Tab Label)
- 選取指示器 (Tab Indicator)
- 滾動按鈕 (Scrollable Button)
區塊式頁籤 (Contained Tabs)
適合用於內容區塊或表格。
![]()
- 標籤 (Tab)
- 標籤文字 (Tab Label)
- 選取指示器 (Tab Indicator)
![]()
滑動式 (Scrollable)
當標籤數量超過螢幕寬度時，使用者可以透過水平滑動來查看所有標籤。此設計在有限的螢幕空間內容納更多標籤，同時保持介面的整潔。
- 標籤 (Tab)
- 標籤文字 (Tab Label)
- 選取指示器 (Tab Indicator)
- 滾動按鈕 (Scrollable Button)
