導覽與資訊架構
看起來都能「切換」，其實是在處理四種不同的內容關係。
Tabs、Accordion、Disclosure 與 Segmented Control 都會暫時隱藏或替換內容。先確認內容是平行、分段、補充，還是檢視模式，AI 才不會把設定頁做成一串看似整齊的按鈕。
選型流程
先辨認內容關係，再決定控制方式。
- 一次只看一個平行設定頁？使用 Tabs，切換同一區域的 tabpanel。
- 長內容要按段落選擇閱讀？使用 Accordion，每段都有可操作標題。
- 只是一小段可選補充？使用 Disclosure，讓說明留在原本脈絡附近。
- 是少量互斥的檢視模式？使用 Segmented Control，切換後讓附近內容立刻更新。
比較表
同一個「設定頁」裡，切換的理由並不相同。
點選元件名稱可查看個別 Demo、AI Prompt 與驗收清單。
| 比較面向 | Segmented Control｜分段控制器 | Tabs｜分頁籤 | Accordion｜手風琴 | Disclosure｜揭露控制項 |
|---|---|---|---|---|
| 主要回答的問題 | 同一區要看哪一個平行面板？ | 長內容要先打開哪一段？ | 要不要看這一小段補充？ | 同一份資料要用哪種局部檢視？ |
| 內容關係 | 互相平行，一次顯示一個 | 多段可獨立閱讀，可各自開啟 | 主內容旁的一小段附加資訊 | 少量互斥的檢視或模式 |
| 適合的情境 | 一般設定、成員與權限、通知 | 進階安全規則、FAQ、規格段落 | 資料保留期限、名詞解釋 | 列表、看板、行事曆 |
| 需要觀察的語意 | tablist、tab、tabpanel、aria-selected | Button、aria-expanded、aria-controls | details/summary 或 aria-expanded | 互斥選取、目前模式與內容同步 |
| 常見誤用 | 把流程步驟做成 Tabs | 把必要欄位或錯誤收起來 | 把整個長頁塞進「更多」 | 把全站導覽或長選項做成三顆按鈕 |
這組結論
元件外觀可以相似，內容關係不能含糊。
在 LumenDesk 情境裡，工作區設定的平行頁面用 Tabs，進階規則用 Accordion，資料保留說明只用 Disclosure，列表與看板才交給 Segmented Control。
操作 Tabs Demo →