折疊區塊和分頁標籤怎麼選？
一句話做出判斷
折疊區塊會在頁面中展開，也能同時開啟多段。分頁標籤一次只顯示一段內容。
問答或需要一起閱讀的段落，用折疊區塊。少量分開的內容一次只看一個時，用分頁標籤。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Accordion
↗ 手風琴式摺疊區
手風琴式摺疊區會上下排列多個區段，每個標題都能展開或收合自己的內容。
手風琴式摺疊區
手風琴式摺疊區會上下排列多個區段，每個標題都能展開或收合自己的內容。
適合使用
內容可以選擇閱讀，而且每一區都有清楚的獨立標題時，就使用摺疊區。
常見問答會先顯示問題，點開後就能在同一頁看到答案。
- 什麼時候用
- 內容可以選擇閱讀，而且每一區都有清楚的獨立標題時，就使用摺疊區。
- 什麼時候不要用
- 不要只為了讓畫面整齊，就把簡短而必要的資訊藏起來。
- 程式裡的名稱
<details><summary>
Tabs
↗ 分頁標籤
分頁標籤是一排標籤，會切換同一個內容區，但不會離開目前的主要任務。
「總覽」、「活動」和「權限」會切換下方內容，但仍留在同一個專案裡。
- 什麼時候用
- 只有少量同一層的內容區，而且標籤要一直看得到時，就使用分頁標籤。
- 什麼時候不要用
- 不要把分頁標籤當成前往無關頁面的迷你連結。
- 程式裡的名稱
role="tablist"
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 手風琴式摺疊區Accordion | 內容可以選擇閱讀，而且每一區都有清楚的獨立標題時，就使用摺疊區。 | 不要只為了讓畫面整齊，就把簡短而必要的資訊藏起來。 | <details><summary> |
| 分頁標籤Tabs | 只有少量同一層的內容區，而且標籤要一直看得到時，就使用分頁標籤。 | 不要把分頁標籤當成前往無關頁面的迷你連結。 | role="tablist" |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 手風琴式摺疊區（Accordion）、分頁標籤（Tabs） 中，為真實使用流程選出最合適的介面模式。判斷規則：折疊區塊會在頁面中展開，也能同時開啟多段。分頁標籤一次只顯示一段內容。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。