Day 15｜同一區域怎麼切換內容？Tabs、Accordion、Disclosure 與 Segmented Control

安安～我是ChiYu～

昨天，我把帳號申請頁上的 Breadcrumb、Stepper、Pagination 和進度資訊分開後，總算不會再用一條藍線回答所有問題。結果文章才剛收尾，工作區設定又送來一排看起來很整齊的 Tabs。

先把昨天結尾那個錯誤現場搬回來。這張圖是依照第一版問題重建的畫面，不含真實資料：

圖 1：同一排放了八個 Tab，現在只顯示一般設定；另外七類內容全得靠使用者逐一打開尋找。

當時我留給 AI 的需求只有一句：

「把設定頁內容分區，畫面做得精簡一點。」

AI 很俐落。

一般設定一個 Tab、成員權限一個 Tab、雙重驗證一個 Tab、資料保留說明一個 Tab，連列表、看板和行事曆也排成一列。原本塞滿內容的設定頁確實變乾淨了，代價是每一段內容都得先躲起來。

操作幾次後，問題開始跑出來：

• 為什麼雙重驗證和資料匯出規則不能同時打開比較？
• 資料保留明明只是一小段補充，為什麼要切走整個面板？
• 列表和看板只是同一批專案的不同看法，怎麼長得像在切換網站頁面？

這些內容都會「切換」或「收合」，關係卻完全不同。Vibe Coding 時若只寫「做成 Tab，畫面乾淨一點」，AI 會很努力地替每一段內容找地方藏，卻不會自動知道哪些內容互相平行、哪些應該同時閱讀。

今天就來處理這個問題。Tabs、Accordion、Disclosure 與 Segmented Control 外觀有些相似，真正的選型線索藏在內容彼此的關係裡。

先看 Tabs、Accordion、Disclosure、Segmented Control 完整比較頁如何把四種內容放回各自的位置。

圖 2：一般設定、進階規則、補充說明與檢視模式都能被切換，但它們不該全住進 Tabs。

這張比較圖裡，四個元件沒有誰比較進階。它們只是各自接住一種內容關係。關係挑對了，畫面自然會變短；挑錯時，內容雖然消失了，讀者的疑問還留在原地。

先說出內容關係，再決定要切換還是收合

我把工作區設定拆成四組後，選型就清楚很多：

這裡有一個很好用的反向檢查：兩塊內容如果需要同時閱讀或同時修改，就不要為了「看起來乾淨」把它們關進互斥的 Tab。乾淨是畫面結果，內容關係才是元件選擇的原因。

如果還在兩個元件之間猶豫，可以沿著這張圖往下判斷：

圖 3：先問內容是平行、分段、補充，還是同一資料的檢視模式，再看要用哪種控制方式。

我會把這張圖放在 AI 第一版旁邊檢查。只要四條路最後全部通往 Tabs，需求大概還停在「幫我藏起來」這一層。

Tabs：切換平行面板，別拿來假裝任務流程

Tabs 元件頁使用「一般設定、成員與權限、通知」三個同層級面板。使用者一次專心處理一個面板，也會在它們之間來回切換。

圖 4：選到「通知」後，Tab 的選取狀態、下方面板、狀態文字與焦點要一起更新。

一個 Tab 對應一個 tabpanel。目前項目使用 aria-selected="true"，下方內容也要跟著換。若只有藍色底線從「一般設定」滑到「通知」，面板還在顯示成員權限，那不是切換，只是底線自己出去散步。

Tabs 也有自己的鍵盤操作。按 Tab 會進入目前項目，左右方向鍵移到相鄰 Tab，Home 回到第一個，End 前往最後一個。至於焦點一移動就立刻換面板，還是再按 Enter／Space 才啟用，兩種都可以；W3C 只建議在面板能無延遲顯示時使用自動啟用，避免每按一次方向鍵都卡在載入。W3C WAI：Tabs Pattern

LumenDesk 的三個面板都已經在本機載入，所以這個 Demo 選擇自動啟用：方向鍵、Home 或 End 移到新 Tab 時，選取狀態和面板一起更新。如果內容要等 API 回來，我會改成手動啟用，先移動焦點，再由使用者按 Enter 或 Space 決定要不要載入。兩套都能做，最怕的是 Prompt 沒選，AI 做到一半才臨時猜。

昨天的四步驟申請就不適合 Tabs。申請人資訊填完才走到權限設定，內容有先後依賴，交給 Stepper 比較合理。Tabs 裡的三個設定面板則是平行的，先看通知或先看一般設定都不會破壞任務。

按下 End 後，我檢查四個位置有沒有一起換

我先把焦點放在「一般設定」，再按 End。選取項目跳到最後一個「通知」，接著逐一看下面四個位置：

四個結果都有同步，代表 Tab 和 Tabpanel 真的綁在一起。這也是我會放進 Prompt 的驗收方式：不要只叫 AI「支援鍵盤」，要寫清楚按下哪顆鍵、目前項目怎麼變、哪一塊內容要跟著更新。

Accordion：長內容可以分段，也可以同時打開比較

工作區的邀請限制、雙重驗證與資料匯出設定都是完整段落。有人只想查看其中一段，也有人需要把雙重驗證和匯出規則同時攤開核對。Accordion 元件頁因此允許多段同時展開。

圖 5：手機版維持單欄閱讀，兩段進階規則也能同時展開，不會互相把對方關掉。

Accordion 的每段標題都要有合適層級的 Heading，Heading 裡再放完整可操作的 Button。展開時更新 aria-expanded，再用 aria-controls 對應內容區。箭頭只是狀態提示，不能讓它縮成唯一可以點擊的地方；手機上用手指追著一顆小箭頭點，耐心通常會比內容更早收合。

一次只能開一段，還是可以同時開很多段，得由內容決定。這次需要比對規則，所以我選擇允許多段展開。若打開新內容會讓前一段失去意義，才適合互斥。W3C 的 Accordion Pattern 也把重點放在各標題控制的顯示與隱藏狀態，沒有規定所有 Accordion 都必須玩打地鼠。W3C WAI：Accordion Pattern

還有一條我會直接擋下來：必要欄位和錯誤訊息不要藏進收合區。使用者連「哪裡填錯」都得先猜該展開哪一段，表單只會更短，不會更好改。

Disclosure：只補一段說明，不用切走整個設定面板

資料保留期限旁邊只有一段方案說明，讀者不一定每次都需要看。Disclosure 元件頁在原位置放了一個「顯示資料保留說明」，需要時再展開。

圖 6：補充文字在目前設定旁展開，讀者沒有被送到另一個面板，也不會失去原本脈絡。

Disclosure 很適合定義、備註或一小段規則。原生 HTML 的 <details> 與 <summary> 已經能提供可用鍵盤操作的展開／收合行為，內容簡單時不用急著自己重做整套控制。MDN：<details>

它和 Accordion 的差異不只在數量。Disclosure 是主要內容旁的可選補充；Accordion 則把幾段相對完整、可獨立閱讀的內容組織在一起。當 Disclosure 裡開始塞 FAQ、三組安全設定和一張資料表，它已經不是補充，根本是偷偷搬了一間套房進去。

Segmented Control：切換同一批資料的觀看方式

專案仍是同一批，只是有時想看列表，有時需要看板或行事曆。Segmented Control 元件頁把三種檢視放在資料旁邊，切換後立刻更新附近內容。

圖 7：列表、看板與行事曆共用同一批專案資料，改變的是觀看方式。

Segmented Control 適合少量、名稱短而且互斥的選項。HTML 沒有一個叫 Segmented Control 的原生元素，因此規格要先選語意模型。LumenDesk 的「列表、看板、行事曆」一次只能選一種，這次採用單選 Radio Group：方向鍵移動時會一併改變選取模式，附近資料也立即更新。W3C WAI：Radio Group Pattern

只讓「看板」外觀變藍，下方繼續排著列表，和剛才只會散步的 Tab 底線是同一種問題。若 Segmented Control 其實是在執行粗體、對齊或排序命令，就要改用符合命令行為的 Button／Toggle Button 模型，不要看見膠囊外觀就一律塞進 Radio Group。

它不適合全站導覽。選項變多、名稱變長，或開始出現上下層關係時，這排控制項很快就會變成被壓扁的 Navbar。Material Design 3 也把 Segmented Buttons 放在相近、互斥的選項與檢視控制情境中；元件外觀可以參考設計系統，內容關係仍要由我們自己判斷。Material Design 3：Segmented button

改寫 Prompt：不要只告訴 AI「把內容藏起來」

原本的需求只說要分區、要精簡。重新整理後，我把四種內容關係、鍵盤操作與手機行為一起寫進 Prompt：

為 LumenDesk 工作區設定頁設計內容切換方式。請依內容關係選元件，不要把所有內容都做成 Tabs。

1. Tabs：一般設定、成員與權限、通知是三個同層級面板。使用 role="tablist"、role="tab"、role="tabpanel"；目前 Tab 使用 aria-selected="true"，選取狀態與可見面板同步。三個面板已預先載入，所以採自動啟用：Tab 進入目前項目，左右方向鍵、Home、End 移動焦點時也同步切換面板。若日後改成遠端載入，改採手動啟用，使用 Enter 或 Space 顯示內容。這不是填表流程。

2. Accordion：邀請限制、雙重驗證、資料匯出設定是可獨立閱讀的長段落。每段使用符合頁面層級的 Heading，Heading 裡放控制內容的 Button，並帶有 aria-expanded 與 aria-controls。本案例允許同時展開多段，方便比對規則；不要把必要欄位或錯誤訊息收起來。

3. Disclosure：在資料保留設定旁放「顯示資料保留說明」。展開後只顯示一段方案保留期限文字，留在原位置。優先使用 details/summary；這不是長內容目錄或設定頁切換。

4. Segmented Control：以列表、看板、行事曆切換相同專案資料的局部檢視。這次使用有名稱的單選 Radio Group，一次只選一種模式；方向鍵移動時同步更新選取模式、目前模式文字和附近資料預覽。不要拿它當全站導覽或長選項表單。

360px 手機版：所有操作區保留完整文字；Tabs 可在自己的列內捲動，但整頁不能水平溢出；Accordion 和 Disclosure 維持單欄閱讀。

這份 Prompt 沒有規定 Tab 底線要幾個像素，因為內容關係還沒接好前，底線再精緻也只是在錯的地方做得很漂亮。

驗收四種切換元件，不能只輪流點一遍

畫面完成後，我會沿著每種元件真正承諾的行為去操作：

1. 用左右方向鍵、Home 和 End 切換 Tabs，確認選取狀態、面板、狀態文字與焦點同步。
2. 同時展開兩段 Accordion，確認兩段內容能一起閱讀，狀態也沒有互相覆蓋。
3. 展開再收合 Disclosure，確認補充文字留在原位置，主要設定沒有跟著消失。
4. 把 Segmented Control 從列表切到看板、再切到行事曆，確認模式文字和資料預覽一起更新。

接著再用 Tab、Enter、Space 和方向鍵走一次所有控制項。縮到 360px 後，操作文字仍要完整，Tabs 可以在自己的列內捲動，但整頁不能多出水平捲軸；Accordion 和 Disclosure 則維持單欄閱讀。

如果這些操作都能完成，畫面變短才有意義。若只是把內容藏起來，使用者最後還是得一個一個打開找，精簡很快就會變成尋寶。

內容關係整理完，三點選單又讓狀態和命令排在一起

工作區設定現在各自有位置：平行面板使用 Tabs，能同時比較的長段落交給 Accordion，一小段補充由 Disclosure 原地展開，列表、看板與行事曆則用 Segmented Control 切換同一批資料。

我回到專案列表準備處理任務，最後一欄只放了一顆三點按鈕。展開後依序出現「進行中、編輯、刪除」。

下面是我依照第一版問題，在網站上重建的錯誤現場，不含真實資料：

圖 8：「進行中」會保存資料，「編輯」和「刪除」則會立刻執行命令；第一版卻讓三個項目共用同一種外觀。

三個項目排得很整齊，問題也藏得很整齊。使用者在按下 Enter 前，根本看不出這次是在替任務選狀態，還是在對資料下命令。

明天就從這顆三點按鈕繼續，把 Menu、Context Menu、Overflow Menu 與 Command Palette 的命令入口拆開，也順便替「下拉選單」這個萬用稱呼減輕一點工作量。

延伸閱讀

• W3C WAI：Tabs Pattern
• W3C WAI：Accordion Pattern
• MDN：<details>
• W3C WAI：Radio Group Pattern
• Material Design 3：Segmented button

資料查閱：2026-08-07。