分頁標籤和分段控制怎麼選？
一句話做出判斷
分頁標籤用來切換不同內容。分段控制只改變同一畫面裡的模式、篩選或值。
每個選項都有一大段不同內容時，用分頁標籤。少量短選項只改變同一內容時，用分段控制。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Tabs
↗ 分頁標籤
分頁標籤是一排標籤，會切換同一個內容區，但不會離開目前的主要任務。
「總覽」、「活動」和「權限」會切換下方內容，但仍留在同一個專案裡。
- 什麼時候用
- 只有少量同一層的內容區，而且標籤要一直看得到時，就使用分頁標籤。
- 什麼時候不要用
- 不要把分頁標籤當成前往無關頁面的迷你連結。
- 程式裡的名稱
role="tablist"
Toggle Group
↗ 切換按鈕群組
一組有標籤的開關按鈕。彼此獨立的選項可以一個或多個保持按下。
切換按鈕群組
文字編輯器可以同時開啟粗體和斜體。每個按鈕都會說明自己是否已按下。
- 什麼時候用
- 只有少量、可復原的模式，而且目前狀態要一直看得見時使用。
- 什麼時候不要用
- 只能送出一個選項時，用單選按鈕。一般表單的多選資料則用核取方塊。
- 程式裡的名稱
button[aria-pressed] in a labeled group
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 分頁標籤Tabs | 只有少量同一層的內容區，而且標籤要一直看得到時，就使用分頁標籤。 | 不要把分頁標籤當成前往無關頁面的迷你連結。 | role="tablist" |
| 切換按鈕群組Toggle Group | 只有少量、可復原的模式，而且目前狀態要一直看得見時使用。 | 只能送出一個選項時，用單選按鈕。一般表單的多選資料則用核取方塊。 | button[aria-pressed] in a labeled group |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 分頁標籤（Tabs）、切換按鈕群組（Toggle Group） 中，為真實使用流程選出最合適的介面模式。判斷規則：分頁標籤用來切換不同內容。分段控制只改變同一畫面裡的模式、篩選或值。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。